Building Floating Lists With CSS - Completing the construction of floating lists
(Page 4 of 4 )
Having defined in the two previous sections the CSS styles and the markup required to build a couple of floating HTML lists, the only thing that remains to do is glue these pieces together, in this manner finalizing this introduction to creating these fancy lists with CSS.
That being said, please pay close attention to the definition of the following (X)HTML file, which constructs the aforementioned lists in a few basic steps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on building floating lists with CSS</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#listcontainer{
width: 70%;
}
ul.leftlist{
float: left;
}
ul.rightlist{
float: right;
}
</style>
</head>
<body>
<h1>Basic example on building floating lists with CSS</h1>
<div id="listcontainer">
<ul class="leftlist">
<li>This is the list item 1, floated to the left.</li>
<li>This is the list item 2, floated to the left.</li>
<li>This is the list item 3, floated to the left.</li>
<li>This is the list item 4, floated to the left.</li>
<li>This is the list item 5, floated to the left.</li>
</ul>
<ul class="rightlist">
<li>This is the list item 1, floated to the right.</li>
<li>This is the list item 2, floated to the right.</li>
<li>This is the list item 3, floated to the right.</li>
<li>This is the list item 4, floated to the right.</li>
<li>This is the list item 5, floated to the right.</li>
</ul>
</div>
</body>
</html>
Didn't I tell you before that building floating HTML lists with CSS was indeed a no-brainer process? And the veracity of my claim is demonstrated by the above sample file. As you can see, the two lists have been adequately floated to the left and right of the web document by using the couple of CSS classes defined previously.
You should notice that I decided to include the respective lists within a general container, but logically the use of this additional containing element is completely optional.
Finally, in order to demonstrate more clearly how these floating HTML lists are displayed by most non-IE browsers, below I included another small screen capture, which shows their visual appearance:
At this point, you have at disposal all of the source code required to build a few floating lists with CSS. But what a minute! If you test the previous (X)HTML file with Internet Explorer, you'll realize that it does float the lists correctly on the web page, but the bullets are missing.
Pretty weird, huh? Don't feel disappointed, because this issue will be addressed in the next tutorial.
Final thoughts
In this first episode of the series, I showed you how to build a pair of floating HTML lists by using some CSS styles and basic markup. However, as I explained before, the bullets of the floated lists won't be displayed by IE, which is certainly a bug that must be quickly corrected.
However, to learn how this IE-related issue will be fixed up, you'll have to read the upcoming article, so you don't have any excuses to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
