CSS Positioning

[phatcactus]

Basically I've got a web page with three main rectangular sections: a title, a navigation list, and a content region. Right now I've got everything layed out with tables and non-standard HTML. The images are all JPGs.

I've been meaning to replace this ugly code with some XHTML and CSS, and change the graphics over to the PNG format, so I started last night. Now that I've got the XHTML in a logical hierarchy, does anybody have any suggestions on the most elegant way to lay it all out?

I'm something similar in form to top:150px; left:100px; exists.

- Brian

 

[toast]

Why don't you stick to W3C compliant <table> coding to get it all done ?

If I understood your layout, you're using the "Netscape Mail Inbox"-type layout style: 3 zones, one on top, one left column that starts under top and continues to bottom page, and last the rest of the page being the webpage in itself.

You can do this in plain HTML, using <colspan="2"> to make your 'top' cell go all over the page.

PNG is heavy, beware. JPEG suits most pictures. Use PNG when you need transparency (esp. 24-bit transpa., see ttp://www.alistapart.com/issues/156/index.html for precise use of PNG).

 

[phatcactus]

Well the idea was to use PNG for all the transperency stuff, but have it overlap the DIVs a bit. This way when the window is resized, the PNG moves cleanly across the background (a gradient) and overlaps some of the navigation bar and contnt area.

See http://pedestrian.homeunix.com/ for the current layout.

http://pedestrian.homeunix.com/ped.html is what I'm workin' on.

Please excuse the sloppy code on both pages.

This was all just a project, really, to see if I could completely separate the content from the layout, as is so popular with the web kids these days.

Maybe I can't?

- Brian

 

[toast]

Well, I'm not too much in total separation between form & content, as the websites I work on don't need daily nor weekly but rather monthly updates

PS: your shop has funny items in it