Professional CodeIgniter

(singke) #1

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.

#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.
Free download pdf