Professional CodeIgniter, Thomas Myer
Chapter 5: Building a Shopping Cart
132
margin: 2px 0 10px 0;
padding: 0;
background: #31363E;
}
Next, establish the rules for the
<
ul
>
list. You don ' t want any margin or padding on it, and you also
don ' t want any bullets on any of the list items. Why not? Because you ' re about to create a horizontal list,
and bullets would make the list look confusing and muddled. Stripping the bullets out of the list items
leaves you with a clean look.
and bullets would make the list look confusing and muddled. Stripping the bullets out of the list items
leaves you with a clean look.
#globalnav ul {
margin: 0;
padding: 0;
list-style: none;
}
Next, establish the rules for the
<
li
>
elements and the links within them. In this case, the links will be a
light color that changes to a sandy tan when someone rolls over them.
#globalnav li {
float: left;
margin: 0;
padding: 0;
font-size: 80%;
letter-spacing: 2px;
text-transform: uppercase;
}
#globalnav li a {
float: left;
padding: 10px 12px;
text-decoration: none;
color: #e7e3d9;
border: none;
}
#globalnav li a:hover {
color: #e4deae;
}
Finally, as you ' ll be including the search form instead of an
<
li
>
, you want to make sure it is placed well
within the list item, so add a bit of padding to offset it from the top and bottom.
#globalnav li form{
padding:3px 0px;
}
What you should end up with so far is something that looks like Figure 5 - 10 .
c05.indd 132
c05.indd 132
6/10/08 5:35:24 PM
6/10/08 5:35:24 PM