Topic: background in a cell (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10974" title="Pages that link to Topic: background in a cell (Page 1 of 1)" rel="nofollow" >Topic: background in a cell <span class="small">(Page 1 of 1)</span>\$

viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-18-2003 18:00 I've done a lot of research in the Internet, to no avail, so, let me try here if anyone has a magical way to do the impossible. I have a small website that I am developing as my final project for a course. I have used a table of one row and two columns for the main layout, so to the left there is the navigational side and to the right the contents side. Nothing is new. Now I want to add a background only to the right side and I have tried all the possible tricks to no avail. The only way I found that does work is to use an inline style, like style="background:url("somepic.gif")" but I can't use inline style because I have implemented a style switcher and so all the style is done inside the .css files. I need even to change the background image of this cell. So my question is: does anyone know a way to add a background image to a cell using an external css file only? It must work in IE, Mozilla, Netscape and if possible in Opera. Last but not least, I need an answer for today or tomorrow because my project is due the day after tomorrow (I am not demanding anything, I am just telling that replies after tomorrow unfortunately will not be useful for my project, although still useful for my knowledge ) Thanks. [This message has been edited by viol (edited 05-18-2003).]
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 05-18-2003 18:41 http://www.in-dented.com/ozone/test.html no problem specifying it in an external style sheet - the css: table { margin:auto; border:#000 1px solid; } td { width:300px; height:600px; padding:5px; border:#000 1px solid; margin:5px; } .left { background-image:url(test.jpg); } the html: <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <table> <tr> <td class="left">Left side</td> <td class="right">Right side</td> </tr> </table> </body> </html> Tested in IE 6, NN7 and OP 7. Of course, more importantly, with such a simple layout, there's no need for a table whatsoever - I' drop the table altogether and just put it in a couple of <div>'s =)
viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-18-2003 22:03 Thanks DL, I will try it. Really thanks. ADDED: I tried the code and it didn't work. Then I tried _your_ code and it did work. Then I got angry. Why his code works and not mine? Why, why, why? Then I used your code and started copying and pasting my code inside your test code, little by little, until I found the problem. I was using ID to identify the left and right sides of the table, and you are using class. Once I changed my IDs to classes, all worked fine. BTW, how do I make a real table using <div>'s ? I have seen some sample code but it uses float and this is no good because when the contents of one side ends, the contents of the other side will wrap around. Is it possible to make a table out of <div> elements that does actually behave like a table? [This message has been edited by viol (edited 05-18-2003).]
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 05-19-2003 08:47 In theory, yes, it's possible. The CSS display property can take these values: table table-row table-cell (not sure if those are exactly correct) By using these, you can make any set of properly nested elements behave as though they were a table. This is great, in theory, for creating table layouts without actually using semantically incorrect tables. However, IE doesn't support it.
viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-19-2003 09:34 quote: However, IE doesn't support it. 95% of the visitors to the site will see the wrong layout then.
viol Maniac (V) Inmate From: Charles River Insane since: May 2002	posted 05-19-2003 18:52 Just to finish this thread with some useful information, that you expert CSS guys surely already know, I found that the path to the url used in a background image, when inside a CSS external file, is related to the location of the css file and not to the location of the html page that is using this external file. It makes sense because the html pages can be in different locations, but I didn't know it and I lost sometime until I figured it out.

Topic: background in a cell (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10974" title="Pages that link to Topic: background in a cell (Page 1 of 1)" rel="nofollow" >Topic: background in a cell <span class="small">(Page 1 of 1)</span>\$

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-18-2003 18:00

I've done a lot of research in the Internet, to no avail, so, let me try here if anyone has a magical way to do the impossible.
I have a small website that I am developing as my final project for a course. I have used a table of one row and two columns for the main layout, so to the left there is the navigational side and to the right the contents side. Nothing is new.
Now I want to add a background only to the right side and I have tried all the possible tricks to no avail. The only way I found that does work is to use an inline style, like style="background:url("somepic.gif")" but I can't use inline style because I have implemented a style switcher and so all the style is done inside the .css files. I need even to change the background image of this cell.
So my question is: does anyone know a way to add a background image to a cell using an external css file only? It must work in IE, Mozilla, Netscape and if possible in Opera. Last but not least, I need an answer for today or tomorrow because my project is due the day after tomorrow (I am not demanding anything, I am just telling that replies after tomorrow unfortunately will not be useful for my project, although still useful for my knowledge )
Thanks.

[This message has been edited by viol (edited 05-18-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 05-18-2003 18:41

http://www.in-dented.com/ozone/test.html

no problem specifying it in an external style sheet -

the css:
table {
margin:auto;
border:#000 1px solid;
}

td {
width:300px;
height:600px;
padding:5px;
border:#000 1px solid;
margin:5px;
}

.left {
background-image:url(test.jpg);
}

the html:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>

<table>
<tr>
<td class="left">Left side</td>
<td class="right">Right side</td>
</tr>
</table>

</body>
</html>

Tested in IE 6, NN7 and OP 7.

Of course, more importantly, with such a simple layout, there's no need for a table whatsoever - I' drop the table altogether and just put it in a couple of <div>'s =)

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-18-2003 22:03

Thanks DL, I will try it. Really thanks.

ADDED: I tried the code and it didn't work. Then I tried _your_ code and it did work. Then I got angry. Why his code works and not mine? Why, why, why? Then I used your code and started copying and pasting my code inside your test code, little by little, until I found the problem. I was using ID to identify the left and right sides of the table, and you are using class. Once I changed my IDs to classes, all worked fine.

BTW, how do I make a real table using <div>'s ?

I have seen some sample code but it uses float and this is no good because when the contents of one side ends, the contents of the other side will wrap around. Is it possible to make a table out of <div> elements that does actually behave like a table?

[This message has been edited by viol (edited 05-18-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 05-19-2003 08:47

In theory, yes, it's possible. The CSS display property can take these values:

table
table-row
table-cell

(not sure if those are exactly correct) By using these, you can make any set of properly nested elements behave as though they were a table. This is great, in theory, for creating table layouts without actually using semantically incorrect tables.

However, IE doesn't support it.

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-19-2003 09:34

quote:
However, IE doesn't support it.

95% of the visitors to the site will see the wrong layout then.

viol
Maniac (V) Inmate

From: Charles River
Insane since: May 2002

posted 05-19-2003 18:52

Just to finish this thread with some useful information, that you expert CSS guys surely already know, I found that the path to the url used in a background image, when inside a CSS external file, is related to the location of the css file and not to the location of the html page that is using this external file. It makes sense because the html pages can be in different locations, but I didn't know it and I lost sometime until I figured it out.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: background in a cell (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: background in a cell (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10974" title="Pages that link to Topic: background in a cell (Page 1 of 1)" rel="nofollow" >Topic: background in a cell <span class="small">(Page 1 of 1)</span>\$