Improve Your Rankings with a Sitemap That Works: The CSS - Begin Improving the Sitemap Visuals
(Page 2 of 6 )
You can contain each of the sections in styled <divs> to further improve the look of the page, and you can create columns that minimize the scroll effect. This time, create the following ID selectors:
#left {
text-align:right;
float:left;
width:50%;
background-color:ffffff;
border-width:0;
padding:10;
}
#right {
text-align:left;
float:right;
width:50%;
background-color:ffffff;
border-width:0;
}
You could also use class selectors instead of ID selectors; the end result is the same, and the choice is yours. The time that you wouldn’t want to use ID selectors would be if you were doing work involving scripting or the DOM because these can sometimes rely on elements having unique ID attributes. What these two selectors do is create two side-by-side <div> elemtns and align the contents to either left or right to give the appearance of columns. Further columns can be created if necessary, and the width and alignment attributes altered accordingly. This prevents your visitors from having to scroll too far down.
To use the selectors with the HTML, you’ll need to encase the lists that you want to appear as either column in a <div> with an ID set to the name of the selector; so in the HTML file, put the first three lists into a div with an ID of left, and the remaining lists in a <div> with an ID of right.
This changes the flow of the document and takes things out of their natural order. As a side issue, you can add the following ID selector and use it to reset the document back to the normal flow if you want content to appear below the columns:
#foot {
clear:both;
background-color:ffffff;
border-width:0;
text-align:center;
font-size:10;
}
Now in the HTML document, create the following section of code and place it at the end of the file, just above the closing <body> tag:
<div id="foot">Copyright © Rogue Records 2005</div>
View the web page again and see what this achieves.
Now, the page looks better, but it’s still not that attractive; you can enclose each of the lists inside its own <div id="block"> element, including the lists headings, and add some further styling effects to help space out and separate the lists in a more presentable manner. Create the following ID selector:
#block {
border-width:1;
border-style:solid;
border-color:ffccoo;
background-color:ffffff;
width:50%;
padding:0;
}
Next: Finishing Off the Selectors >>
More Search Optimization Articles
More By Dan Wellman
/ 5 
