View Full Version : Need Help Tabless Layout

01-30-2007, 04:53 AM
Ok so recently I have been studying up on xhtml and css to learn tabless coding but now the biggest trouble im having is applying it.

In this following layout can someone help me seperate it into sections so I can try to go from their I just cant seem to get my head around how this would seperate into containers.



Also if anyone knows of good sites to learn more about tabless coding I would love to know.

I currently have learnt from reading the HTML Dog site and bought the HTML Dog book both have helped but I find both lack detail in the tabless coding section.

01-30-2007, 01:15 PM
You've got some more reading to do yet....

Quickly, you'll be using divs to separate the sections and placing them using floats (float:right; etc). This layout should be fairly easy to put together.

You might want to check out sites like:



01-30-2007, 01:26 PM
The most important reading you should do is on semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/). Don't go at it too visually yet, at first think about how you would structure the document so people will still get the message without styles. (yeah those who know me might say I'm repeating myself but this is really crucial and I can't repeat it enough)

So your basic structure is: header section, content section, footer section, all within one container.

<div id="container">
<div id="header"><div>
<div id="content"></div>
<div id="footer"></div>

and you would use an h1 on top in the header section for the title of your page (company/website name) and a list (ul) for your navigation which you can put into the header (my personal preference) or in the content. On csszengarden.com it comes after the main content which you can also do. There are numerous approaches. Important is only that it is comprehensible for your visitors.
Then your layout look like a basic two column layout so you might find this tutorial (http://bonrouge.com/2c-hf-fixed.php) helpful.

01-30-2007, 06:52 PM
Thanks for the replies!

Ok so here is my next predicement. The way I see it the header is obviously my top part with the navigation. My content is is the full middle part. My footer is the home about service... at the bottom? Also seeing that my text in the header is most likely going to need to be graphics as I doubt to many people have the text I used how do I go about doing that? Will I be using the method where I enter the text and hide it for accessibility reasons and then just put the image over top?

Sorry about all these questions im finding the transition from tables to this very painfull.

01-30-2007, 07:40 PM
Ok now I got the ball rolling a bit. I put the html together as well as I could. Im sure there is errors and for the places with javascript I just through in script tags and left them blank for now seeing that I dont have the script yet.


Is the coding alright?