Combining Floating Lists with Other Web Page Elements - Polishing the appearance of the sample (X)HTML file
(Page 3 of 4 )
As I explained in the previous section, it would be nice to make the floating lists that you saw before a bit more attractive. Thus, with this idea in mind, I'm going to add a gray background color and a thin dark border to them.
The result of this styling process can be seen clearly in the CSS code below:
ul.leftlist{
float: left;
width: 350px;
position: relative;
padding: 10px 20px;
margin: 0;
list-style-position: inside;
list-style-type: disc;
background: #eee;
border: 1px solid #999;
}
ul.rightlist{
float: right;
width: 350px;
position: relative;
padding: 10px 20px;
margin: 0;
list-style-position: inside;
list-style-type: disc;
background: #eee;
border: 1px solid #999;
}
As you can see, now the respective floating HTML lists will look much more attractive, since they’ll be displayed centered on a gray rectangle, which also will be surrounded by a thin black border. Of course, in this case the CSS styles applied to the lists in question are only a result of my personal preferences and naturally can be modified.
All right, now that you have seen how the lists were spiced up with a couple of additional CSS styles, it’s time to see how they look when included into a web document, along with some other paragraphs.
This process will be the last example that I’ll show you in this tutorial, so jump ahead and read the final section. We’re almost finished!
Next: Seeing the recently styled HTML lists >>
More Style Sheets Articles
More By Alejandro Gervasio
