The first step in moving from Tables based layout to CSS based layout is a relatively easy one, and should be managed without any problems. The next step introduces us to the beginnings of CSS layout.
Take a look at the following example:
|
Company address contact details email etc Company Name |
|
|
|
Now traditionally you might have considered achieving this result through a set of nested tables like the ones below:
|
|||||||||
|
|
||||||||
However, using a bit of CSS positioning we can easily eliminate the nested tables, lightening our code and improving accessibility.
The trick is using floats. Floats basically move elements to one side while still allowing the other content to wrap around it, and they are perfect for the example above.
Take the banner for example. If we first assign an id to the top table cell then float the logo graphic to the left and the <address> to the right we can remove the need for a nested table altogether.
<table border="0" cellpadding="0" cellspacing="1">
<tr>
<td id="banner" colspan="2"> <address>
Company address<br />
contact details <br />
email etc
</address>
<img src="images/logo.gif" alt="example logo" width="56" height="50" />
<h2>Company Name</h2></td>
</tr>
<tr>
<td style="width:30%"><ul id="exlist">
<li>Link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul></td>
<td> <p><img src="images/cat.gif" width="50" height="50"
alt="cat" style="float:right;margin-left:6px" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Etiam sed elit aliquet velit volutpat laoreet.
Pellentesque lacus. Curabitur eget arcu. </p>
<p><img src="images/rabbit.gif" alt="rabbit"
width="50" height="50" style="float:left;margin-right:6px"/>
Maecenas scelerisque, odio eget ornare dapibus, tortor quam
volutpat purus, et ultrices enim dui id nulla</p></td>
</tr>
</table>
And now the CSS:
#banner {height:60px;}
#banner img{float:left;margin-right:15px}
#banner address{float:right}
#exlist{list-style:none}
#exlist li{padding:3px}
The same thing has been done to the main content section, the images of the cat and rabbit have been floated to the right and left removing the need for the nested table there.
The navigation at the side uses a CSS styled list, again removing the need for a nested table. Making small changes like this to your site is an easy way to improve your coding while teaching you some valuable lessons about CSS positioning.
I've not covered floats or styled lists in detail here, but if you need help check out the excellent tutorials at css.maxdesign:
Comments