| Basic CSS Layout | | | | If links are placed elsewhere on the page they will |
| Navigation | | | | inheritthe same properties as above..a blue link that |
| 2. Create the CSS code - below is the CSS code that | | | | hovers tored. What if you wish to create another |
| stylesthe page as a centered 2 column CSS layout | | | | set of links thatare a different color and on passing |
| with anavigation bar and a footer. The div#wrapper | | | | your mouse over themthey are underlined. |
| style createsthe centered box which acts as a | | | | 4. Create the bottom navigation - to include this in |
| container for the rest ofthe page content. The width: | | | | thesection of the page, I use div#footer andcode |
| 80% rule sets the width of thediv. The | | | | each link accordingly. To make the list gohorizontally I |
| background-color:#FFFFFF rule creates a | | | | use: display: inline;div#footer ul li{color : |
| whitebackground for the div. The margin-top: 50px | | | | #000000;background-color : transparent;display: inline; |
| andmargin-bottom: 50px rules create a space of 50 | | | | }div#footer ul li a{color : #115EAC;background-color : |
| pixels forthe top and bottom margins for the div | | | | transparent;text-decoration : none; |
| itself. | | | | }div#footer ul li a:hover{text-decoration : underline; |
| The proper way to center a block-level element with | | | | } |
| CSS isto set margin-left: auto and margin-right: auto. | | | | --> |
| Thisinstructs the browser to automatically calculate | | | | Now that I have finished creating my style sheet I |
| equalmargins for both sides, thus centering the div. | | | | want toshorten the code on page by linking it to my |
| The border:thin solid #000000 rule adds a border | | | | external stylesheet. Here's how: |
| around the outer div. | | | | 4. Create an external style sheet - copy and paste all |
| The rest of the CSS code styles the divs for the | | | | thecss code (without these tags: ) into notepad and |
| header,footer, nav, and main content. | | | | label it something like |
| The div#header and div#footer styles set margins | | | | "style sheet". Place this style sheet between the |
| andpadding for those divs. In addition, div#header | | | | head tagsof your web page like this:type="text/css" |
| includesthe text-align: center rule to center the | | | | > |
| header text, anddiv#footer includes the border-top: | | | | This will reduce the code on your page so it will load |
| thin solid #000000 ruleto create a border along the | | | | fastplus the search engines can more easily spider |
| top edge of the div to replacethe horizontal rule | | | | your webpage. |
| above the footer in the table-basedlayout. | | | | 4. Add content to your page - after you have got |
| The div#nav and div#main styles create the two | | | | your pagelooking correctly, you can add more |
| columns inthe middle of the centered box. In the | | | | content to it. |
| div#nav style, thefloat: left rule pushes the div to the | | | | Adjustments can easily be made to any style on the |
| left side of itsparent element (the wrapper div), and | | | | page (oryour whole site) by simply editing one style |
| the width: 25% rulesets the div's width to 25 percent | | | | sheet. |
| of the parent element. | | | | 5. Upload your files - be sure to upload your web |
| With the nav div floated to the left and limited to a | | | | pages andstyle sheet to the root directory of your |
| setwidth, it leaves room for the main div to move up | | | | server. |
| to theright of the nav div, thus creating the | | | | 6. Validate your code - be sure to validate your |
| two-column effect. | | | | xhtmlcode: and css code: and make correctionswhere |
| The div#main style includes the margin-left: 30% rule | | | | necessary. |
| tokeep the main text aligned in a neat column instead | | | | 7. Check browser compatibility and screen resolution |
| ofspreading out below the nav column. The main div's | | | | -check that your page renders well in the popular |
| leftmargin is set to a value slightly larger than the | | | | browsers |
| width ofthe nav div. | | | | (IE6, NN7, Firefox) |
| 3. Create the side navigation menu - to build the left | | | | If you are beginning with CSS layouts, implement |
| sidenavigation I use the normal CSS code for the | | | | thenslowly by making small changes to your pages i.e. |
| differentlinks iea:link {text-decoration: none; | | | | creatinga style sheet for your main headers and |
| }a:visited {text-decoration: none; | | | | fonts only. As youbecome more familiar with CSS |
| }a:hover {text-decoration: underline;color: #FF0000; | | | | you may eventually build allyour future sites with CSS |
| }a:active {text-decoration: none; | | | | layouts. |
| } | | | | |