Adjusting Padding and Margins on Floating Lists with CSS - Controlling the indentation of bullets
(Page 4 of 4 )
As I stated in the prior section, the last adjustment that I’m going to introduce to the floating lists is with reference to the indentation of their bullets. This minor modification can be easily performed by assigning fixed values for the left padding of the lists, so now that you know how this final change will be implemented, please take a look at the following (X)HTML file, which this time displays the floating lists with the new padding values:
<!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</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: 0 20px;
margin: 0;
list-style-position: inside;
list-style-type: square;
}
ul.rightlist{
float: right;
width: 350px;
position: relative;
padding: 0 20px;
margin: 0;
list-style-position: inside;
list-style-type: square;
}
</style>
</head>
<body>
<h1>Basic example on building floating lists</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>
Here you have it. As you can see on the above hands-on example, I assigned to the respective lists a left padding value of 20px, in addition to specifying a relative position for each of them. Also, you’ll have a better idea of the visual appearance of these floating lists if you look at the following screen capture:
Definitely, you’ll have to agree with me that building floating HTML lists with CSS is a straightforward process that can be learned in a short time. Of course, you’re completely free to use all of the code samples included in this tutorial to start incorporating floating lists into your own web sites.
Final thoughts
In this third chapter of the series, I showed you how to improve the look and feel of the corresponding HTML lists by controlling their padding, margins and widths. I also modified the indentation of list bullets, but naturally all of these changes to the lists’ styles are completely optional, and it’s up to you decide when and how to apply them.
In the final installment, I’m going to teach you how to use these recently-styled floating lists in the context of a real-world example, where you’ll be able see how to utilize them along with paragraphs and other common web page elements.
Now that you know what the next article will be about, you can’t 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. |
