O.K., I am ready to be schooled.
I am used to doing things with tables and such, but this is not xhtml valid... so I want to use <div> tags and css. How would I convert this code to using <div> tags...
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/header-template_01.gif" width="348" height="100" alt=""></td>
<td>
<img src="images/header-template_02.gif" width="100%" height="100" alt=""></td>
<td>
<img src="images/header-template_03.gif" width="411" height="100" alt=""></td>
</tr>
</table>
That code will give me a header graphic which will stretch from 800 x 600 as far up as necessary without really breaking. I have tried for a couple of hours now to figure out the <div> way of doing this with no luck.
Can someone explain it to me?
Thanks....
Jeff
Well the basic concept is that you have two background-images, one of which stretches from one corner and continues for as far as it possibly could need to (the equivalent of the middle and one side cell combined in your table version). The other image then overlaps the first image on the other side to provide the other corner.
In order to have two background images you need two tags to attach them to e.g. a div and h3 tag, though various different combinations can be used as appropriate.
Because you have a fixed height, you don't need as much complexity as you would if you wanted to grow the box in both directions, you just need to make the images 100 pixels high.
That's not a great explanation but you'll find various different implementations here (all with code and usually screenshots):
rounded corners on the css-discuss wiki
The slighly more Zen answer is why are you trying to use a table-based presentation technique and then force it into a CSS mold rather than starting with one of the many cool CSS effects that can be more easily applied. There's plenty of nice CSS only sites for you to find inspiration from, and the code's only a view source away. You'll find they have a certain look, just as table based sites do and that creating one with the other may be more work than it needs to be.
Also note that tables are XHTML valid, and are fairly accessible unless overused, they're just not semantically correct unless you are using them for tabular data and can add unnecessary complexity and bloat to your PHP and HTML code.
The slighly more Zen answer is why are you trying to use a table-based presentation technique and then force it into a CSS mold rather than starting with one of the many cool CSS effects that can be more easily applied.
Well... I start my themes in Photoshop, then dump them to Image Ready to slice. I have done websites like this for a long time and am now in that rut. What I am trying to do is learn another, better way of doing this. But, I need to start from a frame of reference I understand. Which is why I asked the question the way I did.
I will check out the sites you suggested and pick up a CSS book. Thats for responding, I appreciate your help.
Jeff
Well... I start my themes in Photoshop, then dump them to Image Ready to slice. I have done websites like this for a long time and am now in that rut. What I am trying to do is learn another, better way of doing this. But, I need to start from a frame of reference I understand. Which is why I asked the question the way I did.
I will check out the sites you suggested and pick up a CSS book. Thats for responding, I appreciate your help.
Jeff
Thanks jon, I will check it out.
Jeff
Jeff
Hi Jeff,
some times ago we started to collect interesting sources for XHTML and CSS work. You will find there some discussions about tables and CSS too. I think they can help you getting the whole picture.
And here is a linklist I discovered shortly
Live long learning is great, isn't it?
Urs
Thanks Urs!!