| Designing without tables by using CSS layouts is | | | | of the parent element. |
| fastbecoming the new standard on the Web because | | | | With the nav div floated to the left and limited to a |
| of thebenefits mentioned in my previous article. Web | | | | setwidth, it leaves room for the main div to move up |
| browsersused these days are now able to render | | | | to theright of the nav div, thus creating the |
| web pagesproficiently. In this article I will endeavor to | | | | two-column effect. |
| create abasic 2 column CSS layout which you can use | | | | The div#main style includes the margin-left: 30% rule |
| for futuredesign projects. | | | | tokeep the main text aligned in a neat column instead |
| Web Page: | | | | ofspreading out below the nav column. The main div's |
| Style Sheet: | | | | leftmargin is set to a value slightly larger than the |
| 1. Divide your page into sections - the div id | | | | width ofthe nav div. |
| tagsallows you to create distinct divisions on your | | | | Style Sheet |
| web page. | | | | If links are placed elsewhere on the page they will |
| They are identified with a unique id. You can then | | | | inheritthe same properties as above..a blue link that |
| add astyle (css selector) that specifically applies to | | | | hovers tored. What if you wish to create another |
| the divof that id. Remember to include the DOCTYPE | | | | set of links thatare a different color and on passing |
| (to render yourpage accurately in the browsers) and | | | | your mouse over themthey are underlined. |
| meta tags (enablessearch engines to spider your | | | | 4. Create the bottom navigation - to include this in |
| pages).wrapper: is the div that wraps around all the | | | | thesection of the page, I use div#footer andcode |
| other divslike a container for the page | | | | each link accordingly. To make the list gohorizontally I |
| elements.header: defines the top banner of the | | | | use: display: inline; |
| pagemain: defines the main content of the pagenav: | | | | Now that I have finished creating my style sheet I |
| defines the navigation of the pagefooter: defines the | | | | want toshorten the code on page by linking it to my |
| footer and sub-navigation of the page | | | | external stylesheet. Here's how: |
| 2. Create the CSS code - the CSS code styles the | | | | 4. Create an external style sheet - copy and paste all |
| page as a centered 2 column CSS layout with a | | | | thecss code (without these tags: ) into notepad and |
| navigation bar and a footer. The div#wrapper style | | | | label it something like |
| creates the centered box which acts as a container | | | | "style sheet". Place this style sheet between the |
| for the rest of the page content. The width: 80% | | | | head tagsof your web page. |
| rule sets the width of the div. The | | | | This will reduce the code on your page so it will load |
| background-color:#FFFFFF rule creates a white | | | | fastplus the search engines can more easily spider |
| background for the div. The margin-top: 50px | | | | your webpage. |
| andmargin-bottom: 50px rules create a space of 50 | | | | 4. Add content to your page - after you have got |
| pixels forthe top and bottom margins for the div | | | | your pagelooking correctly, you can add more |
| itself. | | | | content to it. |
| The proper way to center a block-level element with | | | | Adjustments can easily be made to any style on the |
| CSS isto set margin-left: auto and margin-right: auto. | | | | page (oryour whole site) by simply editing one style |
| Thisinstructs the browser to automatically calculate | | | | sheet. |
| equalmargins for both sides, thus centering the div. | | | | 5. Upload your files - be sure to upload your web |
| The border:thin solid #000000 rule adds a border | | | | pages andstyle sheet to the root directory of your |
| around the outer div. | | | | server. |
| The rest of the CSS code styles the divs for the | | | | 6. Validate your code - be sure to validate your |
| header,footer, nav, and main content. | | | | xhtmlcode: and css code: and make correctionswhere |
| The div#header and div#footer styles set margins | | | | necessary. |
| andpadding for those divs. In addition, div#header | | | | 7. Check browser compatibility and screen resolution |
| includesthe text-align: center rule to center the | | | | -check that your page renders well in the popular |
| header text, anddiv#footer includes the border-top: | | | | browsers |
| thin solid #000000 ruleto create a border along the | | | | (IE6, NN7, Firefox) |
| top edge of the div to replacethe horizontal rule | | | | If you are beginning with CSS layouts, implement |
| above the footer in the table-basedlayout. | | | | thenslowly by making small changes to your pages i.e. |
| The div#nav and div#main styles create the two | | | | creatinga style sheet for your main headers and |
| columns inthe middle of the centered box. In the | | | | fonts only. As youbecome more familiar with CSS |
| div#nav style, thefloat: left rule pushes the div to the | | | | you may eventually build allyour future sites with CSS |
| left side of itsparent element (the wrapper div), and | | | | layouts. |
| the width: 25% rulesets the div's width to 25 percent | | | | |