Designing Web Pages without Tables - No Tables for Layout
(Page 2 of 4 )
No Tables for Layout
Tables were never meant for layout. They are supposed to be used for displaying tabular data such as athlete records or other information that goes into a table. For layout, you must use CSS. The <div> tag is a loosely defined block-level element made so that you can use CSS on your web page.
Making Classes for the <div> Elements
The first thing you need to do is define a CSS class which your <div> elements will use. This is how to do it:
div.leftnav{
background: white;
color: black;
/* Other display information here */
/* Add Positioning information here */
}
This CSS class is rather simple and won't really do anything right now but define black text on white background. You must position the element somewhere on the page.
Simple Relative Positioning
This means that we just position an element where it is, without defining the exact location.
div.leftnav{
background: white;
color: black;
/* Other display information here */
width: 15%;
}
What did we do? We said that the left navigation would be on the left wherever it is put on the page. This isn't bad, but for more flexibility, you might need absolute positioning. Also, it is important to note that what I just showed you was not real positioning (relative or otherwise.) All that was defined was the width so it will make an element that is 15% wide wherever is it on the page. It won't really position it anywhere. For real positioning, read on.
Next: Absolute Positioning, Add Borders and Margins >>
More Style Sheets Articles
More By Sasha Slutsker
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
