In this project, we will create anexternal style sheet that will define a basic, consistent look andfeel for an entire corporate web site. Our main goal is to createstyles that are as simple as possible, using few (if any) classes orIDs. For the purposes of the project, we will assume there is astandard writing guide for employees of the company: document titlesare in H1, subheadings in H2,every page uses standard graphics at the top, and so forth.
Wednesday 08th of February 2012 12:21:37 AM
Left Column
The left col can be used for navigation links,
search box etc.
The left column is absolutly positioned and is a fixed width.
It won't move.
The content column, which you are reading from, is flexible.
It will automatically change shape, width can be controlled by
setting appropriate margins or an actual width can be specified
if required.
This template has been tested in:
Mozilla 1.5b & Firefox 0.8
Internet Explorer 6
Netscape 7.1
Opera 7.11
Changes in this version:
Defined zero for the body to fix a problem in Opera.
Filler Content
Dáig alta in mac sin i tig a athar & a mathar
icon airdig i m-Maig Muirthemne, ocus adfeta dó scéla na maccaemi
i n-Emain. Dáig is amlaid domeill Conchobar in rigi, o ro gab
rígi in rí, .i. mar atraig fóchetóir césta & cangni in
choicid d'ordugud. In lá do raind i trí asa athlil: cetna trian
de fóchetóir ic fegad na maccaem ic imbirt chless cluchi &
immanae, in trian tanaise dond ló ic imbirt brandub &
fidchell, & in trian dedenach ic tochathim bíd & lenna,
con-dageib cotlud for cách, aes cíuil & airfitid dia thalgud
fri sodain. Ciataim ane ar longais riam reme dabiur bréthir, ar
Fergus, na fuil in hErind no i n-Albain óclach macsamla
Conchobair.
Ocus adfeta don mac sin scéla na maceáem & na
maccraide i n-Emain, & radis in mac bec ria mathair ar co
n-digsed dá chluchi do chluchemaig na Emna. Romoch duitsiu sain a
meic bic, ar a mathair, co n-deoch anruth do anrothaib. Ulad lett
no choimthecht ecin do chaimthechtaib Conchobair, do chor th'
aesma & t'imdegla for in maccraid. Cían lim-sa di sodain a
mathair, ar in mac bec, & ni biu-sa oca idnaide acht
tecoisc-siu dam-sa cia airm itá Emain. Is cían uait, ar a
mathair, airm in-das-fil. Sliab Fúait etrut & Emain. Dobér-sa
ardmes furri amne, ar esium.
As with margins, the left padding is applied to the beginning of the
element, and the right padding to the end of it; padding is
not applied to the right and left side of each
line.
Now let's talk about top and bottom padding. In theory, an
inline element with a background color and padding could have the
background extend above and below the element. Figure 7-61 gives us some idea of what that might look
like. The line height isn't changed, of course, but since
padding does extend the background, it should be visible, right?
Even better, you can string more than one child selector together toprecisely target a given type of element. Take this, for example:
Figure 10-4. Selecting grandchildren only
The first list item in the source is silver because it's thechild of an ordered list that is itself the child of aBODY. The second list item in the source is thechild of an unordered list, so it can't match the rule.Finally, the third list item in the source is a child of an orderedlist, but the OL element is the child of an
center. Table 6-1 showsequivalent keyword statements.
Table 6-1. Position Keyword Equivalents
6.2.3.2. Percentage values
Closely related to the keywords arepercentage values, although they behave in a rather interesting way.Let's say that you want to center a background image within itselement by using percentage values. That's easy enough:
