Wednesday 08th of February 2012 12:07:48 AM
CSS Page Layout Templates
Intro/Two column
Three column
General templates
General Templates
The following templates general layouts with no strict format.
If you have any ideas for layouts you would like to see mail me with details.
Templates: Two column |
Three column |
General
Center Float Box 
Description:
Pretty simple template but I like this one. It
has top and bottom "bar" for links etc with a center content box
of fixed or percentage width which floats in the browser. The
content box has a scroll bar.
Nested Box
Description:
This is a very simple template. It's just a div
nested in a main div and floated to one side. Simple and
effective.
Templates: Two column |
Three column |
General
Note: The poor colour schemes and thick borders
of the templates are for demonstration purposes. :-)
|
|
Thus, each list item has a 10-pixel top margin and a 15-pixel bottom
margin. However, when the list is rendered, the distance between
adjacent list items is 15 pixels, not 25. This is because along the
vertical axis, adjacent margins are said to be collapsed. In other
words, the smaller of the two margins is eliminated in favor of the
larger. Figure 7-16 shows the difference between
collapsed and uncollapsed margins.
Figure 7-16. Collapsed versus uncollapsed margins
Correctly implemented user agents will collapse the vertically
Use multiple BR tags, or insert special non-breaking space characters
between P tags instead:
You can include a BASEFONT tag at the start of your BODY section to
specify the font SIZE, and, for some browsers, font FACE and font COLOR
for your page:
<BASEFONT SIZE="n" FACE="name" COLOR="color">Allowed lengths other than em andex are simple length measures (e.g.,0.125in). The usual caveats apply here; even ifyou use a valid length measure like 4cm , thebrowser (or the operating system) may have an incorrect metric forreal-world measures. Thus, when you display your document on amonitor, a ruler might reveal that the line height was not exactlyfour centimeters. For more details, see Chapter 3, "Units and Values". parent.Many of you may have an overwhelming desire to cry"Foul!" right about now. Personally, I don't blameyou. It seems completely wrong to allow the top inner edge to behigher than the top outer edge, for example, but with a negative topmargin, that's exactly what you get -- just as negativemargins on normal, nonfloated elements can make them wider than theirparents. The same is true on all four sides of a floatedelement's box: set the margins to be negative, and the contentand which is<BR>
larger than the surrounding text.
</P>
Since the line-height for the "tall"
text is less than its font-size, the inline box
for that element is smaller. This will change the placement of the
text itself, since the top of its inline box must be aligned with the
top of the line box for its line. Thus we get the result shown in
Figure 8-55.
|
'
'
'
'
(5+)
