FLOATING INLINE LIST ITEMS
Start with a simple unordered list
We want to take a simple unordered list and convert it into a horizontal navigation bar
We will start with a simple unordered list. The UL is styled with an ID selector (id="navlist"). For this tutorial, an obvious name has been used to help illustrate the point, but any name can be used. However, it is better to name classes based on their meaning, rather than their appearance
CSS CODE
None
HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
Remove the bullets
To remove the HTML list bullets, set the "list-style-type" to "none". To target the specific UL, we use "ul#navlist", otherwise all UL’s on the page would be affected
CSS CODE
ul#navlist { list-style-type: none; }
HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
Remove padding and margins
Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.
To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
Display inline
To force the list into one line, apply "display: inline;" to the "LI". To target the specific list we use "ul#navlist li". This means we want to target the LI element within the UL, styled with a ID called "navlist".
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li {
display: inline;
}
HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
Float the "a" state
When list items are converted to inline, they have a set amount of padding on their left edges that cannot be removed. To make the list items sit beside each other without any gap, they must be set to "float: left". At this stage we cannot see that the gap has closed.
A width is also required when floating an element - unless it is an image.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
}
Add a background color
At this point a background color and text color can be applied. There are many color combinations that can be used.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
}
Add padding to the "a" state
To make each list item into a box, we need to add padding to the "a" state. In this case we are using a shorthand rule. The padding is set to 0.2em for the top and bottom and 1em for the left and right.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
}
Removing text decoration
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
}
Add a border to separate the list items
A border is set to the right of the list items to separate them.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
Add a rollover color
Use the "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
}
Float the UL
To make the entire list into a navigation bar, we need to color the UL and stretch it to the full width of the browser window. Before we can do that, we need apply "float: left" to the UL - otherwise it will not show. So, apply float to the UL and set the width to "100%".
A width is also required when floating an element - unless it is an image.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
}
Add a background color to the UL
At this point a background color and text color can be applied to the UL. There are many color combinations that can be used.
CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}
ul#navlist li { display: inline; }
ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
ul#navlist li a:hover {
background-color: #369;
color: #fff;
}
By : Ian
