Combining Floating Lists with Other Web Page Elements - Seeing the recently styled HTML lists
(Page 4 of 4 )
As I expressed in the previous section, below I coded a final hands-on example that shows how to include the recently styled floating lists, in conjunction with a few trivial paragraphs, into the same web document.
Here’s the corresponding code sample:
<!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 using floating lists with paragraphs</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#listcontainer{
width: 1000px;
}
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;
}
li{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
margin: 5px 0 5px 0;
}
</style>
</head>
<body>
<h1>Basic example on using floating lists with paragraphs</h1>
<div id="container">
<p>This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph.</p>
<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>
<p>This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph. This is the content of a simple paragraph.</p>
<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>
Since the above example speaks for itself, I’m not going to explain once again how it functions. Instead, I’d like to show you the output generated by the previous (X)HTML file, this time including the improved HTML lists. Take a look at the following screen shot, please:
With this final example, you’re armed with the required background to start building floating HTML lists with CSS. As you saw, the whole experience is fairly instructive and why not, also fun!
Final thoughts
Sad but true, we’ve come to the end of this series. Hopefully, all of the code samples included in the different articles will give you a clear idea of how to create, in a few simple steps, different floating HTML lists that will be displayed consistently by most modern browsers.
See you in the next web development tutorial!
| 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. |
