| Heading With Your Important Keywords | | | | defines the "id" of the div followed by the name. I |
| Subheading With Important Keywords | | | | set the width to 200px which is like making a table |
| Your important content will be here, with keywords. | | | | cell that width. I have used the 500px height just as |
| Notice how this is right at the top of your code. No | | | | an example so the summary below will start where |
| matter where this is on the page, you want it here | | | | the nav ends. You want to be sure everything will fit |
| at the top of your code. | | | | with the sizes you specify. You can also set padding, |
| This could have image buttons, text, or both. If using | | | | but unlike a table cell in HTML, you can set each side |
| images, make sure to include alt text which should | | | | separately. In the example above, the first 20px is |
| contain keywords. With tables for layout, this would | | | | the top, then it declares each side in clockwise order |
| most likely be above the content, now it is below | | | | so the left side is also 20px. */ #summary {position: |
| where it should be. The div id above will help you | | | | absolute; top: 00px; left: 0px; width: 200px; padding: |
| control this. | | | | 20px 10px 10px 20px; } /* The summary above |
| As the name can imply, this can be at the top of the | | | | starts where the nav ends, at 500px from the top. |
| page, but notice how it is way down in your code | | | | The other settings match for alignment. I did not set |
| because it has no strong SEO elements. It might be | | | | a height because it will stretch just like a table cell |
| your logo or additional navigation. Even though it | | | | when you insert your content. */ #banner {position: |
| shows at the top of the page to the user, it is not | | | | absolute; top: 0px; left: 200px; width: 550px; height: |
| the first thing you want the search engine to read or | | | | 150px; padding: 20px 0px 10px 20px; } /* The |
| display in search results. | | | | banner will be at the top of the page, but will start at |
| This example of another div is used to illustrate | | | | 200px from left where the nav ends. Declaring a |
| another SEO principle. Use keywords in it so it is like | | | | height is optional, but it will help for making sense out |
| your closing point. By appearing at the bottom of the | | | | of where the content below will start. I used 150px |
| code, it makes stronger SEO. | | | | just as an example. The reason for 0px padding on |
| Next, I will show a simple example of how to make | | | | the right side is because the remainder of the screen |
| the file.css to control the layout. You can use this | | | | is empty in this layout, no need to pad that side. I |
| code in a text editor to see the effects. For | | | | limit the width so it will display well down to 800x600 |
| simplicity, I will focus on only the layout code, we will | | | | res (the total width here is 750px). */ #content |
| not be declaring fonts, sizes, links, etc. | | | | {position: absolute; top: 150px; left: 200px; width: |
| In the HTML example, we have 4 sections (divs). | | | | 550px; padding: 10px 0px 10px 20px; } /* Now the |
| You can divide up by pixels or percentages (or even | | | | content starts right where the banner leaves off, |
| both). We will be using pixels for simple illustration of | | | | 200px to the left and 150px from the top. Notice this |
| the principle here. | | | | is last. If you used tables to create the same layout, |
| /*Begin CSS*/ /*Just for the record, this is a | | | | this would be last in your code too. The search |
| comment in CSS*/ #nav {position: absolute; top: 0px; | | | | engines would read everything else before getting to |
| left: 0px; width: 200px; height: 500px; padding: 20px | | | | the meat of your page. In the HTML used here, it is |
| 10px 10px 20px; } /* To explain the code above, I | | | | at the top of your code so the search engines see it |
| listed the divs in a different order than the HTML. | | | | first. */ /*End CSS*/ |
| This order follows the flow of the way I am doing | | | | These are simple examples, but if you can think in |
| the page layout. It also follows the flow you would | | | | terms of top down logic, you can build search engine |
| have if you set up a table structure in HTML. The | | | | friendly pages. They will also load faster as complex |
| nav section butts up against the top left corner of | | | | table structures take longer to load than CSS layout, |
| the page (top and left are both 0px). The # sign | | | | which is another benefit to CSS. |