| Designing without tables by using CSS layouts is fast | | | | set |
| becoming the new standard on the Web because of | | | | width, it leaves room for the main div to move up |
| the | | | | to the |
| benefits mentioned in my previous article. Web | | | | right of the nav div, thus creating the two-column |
| browsers | | | | effect. |
| used these days are now able to render web pages | | | | The div#main style includes the margin-left: 30% rule |
| proficiently. In this article I will endeavor to create a | | | | to |
| basic 2 column CSS layout which you can use for | | | | keep the main text aligned in a neat column instead |
| future | | | | of |
| design projects.Web Page: | | | | spreading out below the nav column. The main div's |
| Style Sheet: Divide your page into sections - the div | | | | left |
| id tags | | | | margin is set to a value slightly larger than the width |
| allows you to create distinct divisions on your web | | | | of |
| page. | | | | the nav div.Style Sheet |
| They are identified with a unique id. You can then | | | | links are placed elsewhere on the page they will |
| add a | | | | inherit |
| style (css selector) that specifically applies to the div | | | | the same properties as above..a blue link that hovers |
| of that id. Remember to include the DOCTYPE (to | | | | to |
| render your | | | | red. What if you wish to create another set of links |
| page accurately in the browsers) and meta tags | | | | that |
| (enables | | | | are a different color and on passing your mouse |
| search engines to spider your pages).wrapper: is the | | | | over them |
| div that wraps around all the other divs | | | | they are underlined.4. Create the bottom navigation - |
| like a container for the page elements. | | | | to include this in the |
| header: defines the top banner of the page | | | | section of the page, I use div#footer and |
| main: defines the main content of the page | | | | code each link accordingly. To make the list go |
| nav: defines the navigation of the page | | | | horizontally I use: display: inline;Now that I have |
| footer: defines the footer and sub-navigation of the | | | | finished creating my style sheet I want to |
| page2. Create the CSS code - the CSS code styles | | | | shorten the code on page by linking it to my |
| the page as a centered 2 column CSS layout with a | | | | external style |
| navigation bar and a footer. The div#wrapper style | | | | sheet. Here's how:4. Create an external style sheet - |
| creates the centered box which acts as a container | | | | copy and paste all the |
| for the rest of the page content. The width: 80% | | | | css code (without these tags: ) into notepad and |
| rule sets the width of the div. The | | | | label it something like |
| background-color:#FFFFFF rule creates a white | | | | "style sheet". Place this style sheet between the |
| background for the div. The margin-top: 50px and | | | | head tags |
| margin-bottom: 50px rules create a space of 50 | | | | of your web page.This will reduce the code on your |
| pixels for | | | | page so it will load fast |
| the top and bottom margins for the div itself.The | | | | plus the search engines can more easily spider your |
| proper way to center a block-level element with CSS | | | | web |
| is | | | | page.4. Add content to your page - after you have |
| to set margin-left: auto and margin-right: auto. This | | | | got your page |
| instructs the browser to automatically calculate equal | | | | looking correctly, you can add more content to it. |
| margins for both sides, thus centering the div. The | | | | Adjustments can easily be made to any style on the |
| border: | | | | page (or |
| thin solid #000000 rule adds a border around the | | | | your whole site) by simply editing one style sheet.5. |
| outer div. | | | | Upload your files - be sure to upload your web pages |
| The rest of the CSS code styles the divs for the | | | | and |
| header, | | | | style sheet to the root directory of your server.6. |
| footer, nav, and main content.The div#header and | | | | Validate your code - be sure to validate your xhtml |
| div#footer styles set margins and | | | | code: and css code: |
| padding for those divs. In addition, div#header | | | | and make corrections |
| includes | | | | where necessary.7. Check browser compatibility and |
| the text-align: center rule to center the header text, | | | | screen resolution - |
| and | | | | check that your page renders well in the popular |
| div#footer includes the border-top: thin solid | | | | browsers |
| #000000 rule | | | | (IE6, NN7, Firefox)If you are beginning with CSS |
| to create a border along the top edge of the div to | | | | layouts, implement then |
| replace | | | | slowly by making small changes to your pages i.e. |
| the horizontal rule above the footer in the | | | | creating |
| table-based | | | | a style sheet for your main headers and fonts only. |
| layout.The div#nav and div#main styles create the | | | | As you |
| two columns in | | | | become more familiar with CSS you may eventually |
| the middle of the centered box. In the div#nav | | | | build all |
| style, the | | | | your future sites with CSS layouts.Resources:Basic |
| float: left rule pushes the div to the left side of its | | | | CSS layout |
| parent element (the wrapper div), and the width: | | | | Style Sheet |
| 25% rule | | | | of CSS |
| sets the div's width to 25 percent of the parent | | | | Drost is the Certified Internet Webmaster (CIW) |
| element. | | | | owner and author of Affordable |
| With the nav div floated to the left and limited to a | | | | Web Site Design and Web Hosting. |