New to CSS layout and trying not to tables!

[scouse]

Hey

I've been dabbling in CSS for a while now, but never had the time to sit and learn how to build a website without using tables... well now I've got some spare time and determined to master it. Basically I've read a lot about techniques and how to do certain things but I just need a quick pointer.

I'm trying to set out my footer and I've got a <div> tag with an id="footer". However I'm trying to make a footer that looks like this:

Footer (http://www.siesta-media.co.uk/css/footer.jpg)

now if I was doing this with tables I'd do something like this

Footer with tables (http://www.siesta-media.co.uk/css/footer_table.jpg)

But I've become a bit stuck how I'd slice it up and create it using Divs. Also, I've read a lot about how the HTML should be markup just for your content and presentational code should be kept seperate. I was thinking a possible way of doing this would be to use some kind of nested divs... but wouldn't that mean the code for presentation would be in the HTML markup??? :confused: :confused:

Help, I really want to get to grips with this, but I'm getting confused and wanting to resort to my old habits!

Thanks

[drhowarddrfine]

Don't have time to delve into this but get away from the need to "slice things up". There is no need to piece graphics together to fit in any grid when you use css.

[ray326]

http://alistapart.com/articles/holygrail would be a good starting point.

[KDLA]

Ray's link is good. But, just for some extra help, here's some useful code if you've got a fixed width --

#footer {
width: 755px;
display: block;
background: #419830 url(footer.gif) no-repeat bottom;
height: 30px;
color: #fff;
margin: 0;
padding: 15px 5px;
}
#address {
text-align: right;
font-size: .7em;
margin: 0;
padding: 0;
width: 130px;
display: block;
float: right;
}

- The "footer.gif" would be the image used in your example (green with border).
- You'd need to nest the #address inside the #footer div.
KDLA

[scouse]

ah right... so theres no need to cut an image up anymore?? I just plonk it in a divs background property and then overlay the text with postioning? For some reason I thought that would be a bad way to do it!

Cheers Ray, for the link I'll have a look. I may have already been there as I have been doing a lot of reading lately on the subject... but it was starting to confuse me and therefore I decided to jump in with both feet and give it a go!

[ray326]

therefore I decided to jump in with both feet and give it a go!That's the best way to go.

[drhowarddrfine]

Why do you need an image at all? You can create that with a background color and use plain text with no images. The corners may require an image depending on how you do it. I've seen rounded corners without them.

[scouse]

drhowarddrfine,

I think I know how I would do that, but not sure how I could do a curved bottom left corner and a curved bottom right corner with or without images. Would I need two seperate Divs (Footerleft and Footerright)?

Sorry if this is a stupid question, but I'm really tryin to get to grasp with this!

Thanks

[ray326]

http://alistapart.com/articles/slidingdoors should give you some ideas. Normally you'd take either your left or right column and make that an img with the remainder being a background. Bowman's example is for tabbed menus but it applies to any block element.

[scouse]

Thanks Ray326 for the link. I had a quick scan over it and will look in more detail later. From what I saw it looks like it will do the trick nicely!

Thanks