Hello, Robert is my name. I am a junior designer and I am learning as I go, as most people do. I have used only tables because they seem to render not so differently cross-browser like the div's do. I have the example below, which shows of the kind of layout I am working with. I tried to make a div based layout like that one, but with little success. I am a total beginner with Divs and the way they are positioned, so please, if you take on this quest, give me some guidelines. I would also be pleased to be guided into making this layout tableless, I am not trying to make anyone do my work. I am just overwhelmed of the way the divs are positioned. So here goes, this is what I want to achieve using Doctype and ONLY Divs: <html> <head> <style> *, BODY, HTML { margin:0;padding:0;border:0 } table {border:1px solid black;} </style> </head> <body> <table cellpadding='0' cellspacing='0' border='0' bgcolor='#e2e3ff' height='100%' width='100%'> <tr> <td height='150'> <!--Header Divisons--> <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'> <tr> <td bgcolor='#ffa8b4' width='25%'> <td> <td bgcolor='#fca8ff' width='50%'> <td> <td bgcolor='#a8aeff' width='25%' align='right'> <table bgcolor='#dddddd' width='200' height='50' cellpadding='0' cellspacing='0' border='0'> <tr><td> </td></tr> <tr><td> </td></tr> <tr><td> </td></tr> </table> <td> </tr> </table> </td> <tr> <td height="50"> <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'> <tr> <!--Active Button --> <td bgcolor='#a8fff4'> <td> <td bgcolor='#55b6a9'> <td> <td bgcolor='#16665c'> <td> <!--Inactive Button --> <td bgcolor='#8feb93'> <td> <td bgcolor='#339537'> <td> <td bgcolor='#136317'> <td> </tr> </table> <td> </tr> <tr> <td height='100%' bgcolor='#ffffff'> <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'> <tr> <td bgcolor='#d18a64' width='25%'> <td> <td bgcolor='#d1c364' width='50%'> <td> <td bgcolor='#73d164' width='25%'> <td> </tr> </table> <td> </tr> <tr> <!--Footer Menu --> <td height='50'> <table cellpadding='0' cellspacing='0' border='0' height='100%' width='100%'> <tr> <!--Active Button --> <td bgcolor='#a8fff4'> <td> <td bgcolor='#55b6a9'> <td> <td bgcolor='#16665c'> <td> <!--Inactive Button --> <td bgcolor='#8feb93'> <td> <td bgcolor='#339537'> <td> <td bgcolor='#136317'> <td> </tr> </table> <td> </tr> <tr> <td height='30' align='center' valign='top' bgcolor='#e0b379'>Footer Text<td> </tr> </table> </body> </html> Code (markup): I am grateful to you already, for you have read so far Thanks, Robert.
Easier for those like me if you post an image or wire diagram to see what you mean. I'm a visual person. I can usually take an image and replicate it (with divs), but can't take table code and div it and get the same result. Tables work differently. Divs follow a slightly different set of rules and so I think it's just easier to take existing content (not existing tables) and shape it to the image or design in mind. Also, did you mean you DO have a doctype? Because starting with <html> is a great way to get everyone to display your site completely differently from each other : ) *Edit: there's a book called HTML Utopia: Designing Without Tabels Using CSS by Rachel Andrew and Dan Shafer. It's pretty good. It assumes you know your HTML, and gives a few demonstrations of taking the same HTML and making different layouts: full page, fixed-width, two column, three column, and styling a table. Check it out. I learned a lot from it, and now use the back as a quick-guide to CSS rules.
Robert, I showed you how to do this over on SitePoint (well, it was a rough example anyway). And yes, I did get your PM there.
You'll have to excuse me - but I think your approach is backwards, at least... it's hard to tell what's necessary and what isn't without CONTENT to fill the layout... Right now if I was to convert that to a non-table layout I would start with <body></body> because there is no content. You put the content on the page with semantic markup, THEN you bend the markup to your will with CSS... layout before content (to me at least) is just a waste of time and leads to bloated poorly coded pages.
Definitely not an easy design to start with... Mocked this up which should give you an idea about how it'd work. Will need more work but its a start for you.
Well, those 16%'s are NOT going to add up to screen width proper - in fact attempting to do so in general doesn't work which is why you usually don't see fixed width nav items, instead styling a bar and making them dynamic on said bar. You could probably make four of those 17%, but be warned that might not add up right in IE, and firefox will sometimes 'jog' it one pixel screwing them up if you float them. If you actually want them to divide evenly, there is only one set of tags that does that, and it's called a table. You shouldn't need a clearing DIV, and to get your columns to stretch to equal height you will have to fake columns using a background image or TWO since there is no such thing as making div's equal height. Oh, and if those 'nav' are menu items, they should NOT, I repeat NOT need classes on each of them, as they should be marked up as a list, put one class on the list and then style each LI off it's parent class.
Deathshadow - it was mocked up pretty quick but yes, 16% would be tad small but would work allowing original poster to go from there. For the same height divs you speak of... the header divs will be as they all have height set. In the content divs, the center one would have a background-image applied giving the effect of 3 different color columns all same height. The Clear at the bottom would allow the center column to always be at the same height as the biggest (height wise) column allowing the background-image effect to work right. And yes, Indead if what i used as class Nav, is in fact a navigation menu then yes, styles would be applied directly to UL LI and not to to each element individually.
Also note, webdesigner that your version of this layout (I saw the actual site, not the mockup you guys got) will break in Gecko based browsers (and probably Safari as well) upon text resize.