- Basic list styling and CSS codes scroll box
Basic list styling is very simple. Say you start with this simple to-do list:
<ul>
<li>Read emails</li>
<li>Write book</li>
<li>Go shopping</li>
<li>Cook dinner</li>
<li>Watch Scrubs</li>
</ul>
To add a custom bullet you could use the list-style-image property. However, this doesn’t give you much control over the position of your bullet image. Instead, it is more common to turn list bullets off and add your custom bullet as a background image on the list element of the css code scroll box. You can then use the background image positioning properties to accurately control the alignment of your custom bullet.
Internet Explorer and Opera control list indentation using left margin, whereas Safari and Firefox choose to use left padding. As such, the first thing you will want to do is remove this indentation by zeroing down the margin and padding on the list. To remove the default bullet, you simply set the list style type to none:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
- STYLING LISTS USING CSS HEADER EXAMPLES
Adding a custom bullet is very straightforward. Adding padding to the left side of the list item of your css header example creates the necessary space for your bullet. The bullet is then applied as a background image on the list item. If the list item is going to span multiple lines, you will probably want to position the bullet at or near the top of the list item. However, if you know the contents of the list items won’t span more than one line, you can vertically center the bullet by setting the vertical position to either middle or 50%:
li {
background: url(bullet.gif) no-repeat 0 50%; padding-left: 30px;
}
As always, you need to start with a good HTML framework:
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
The first thing you want to do is remove the default bullets and zero down the margin and padding:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Rather than style the list items, you are going to be styling the enclosed anchors. To create a button-like hit area, you need to set the display property of the anchors to block, and then specify the anchor’s dimensions. In this example my navigation buttons are 200 pixels wide and 40 pixels high. The line height has also been set to 40 pixels in order to center the link text vertically. The last couple of rules are just stylistic, setting the color of the link text and turning off the underlines.
ul a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
}
Using the Pixy rollover technique, the rollover graphic is applied as a background image to the anchor link.
The background image is aligned left in order to reveal the up state. The anchor text is given a 50-pixel indent so that it is not sitting directly over the arrow in the background image.
ul a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat ➥ left middle;
text-indent: 50px;
}
- STYLING LISTS AND CREATING NAV BARS
You only want a single, 1-pixel black line between each nav bar item. To get around this problem, clip the top line off by aligning the background images to the bottom of the anchor and then reducing the height of the links by 1 pixel and that's a way to write a good css code:
ul a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat ➥ left bottom;
text-indent: 50px;
}
The links now stack up nicely, with a single black line appearing between each one. However, the top black line on the first link is no longer showing. To put this back you need to reset the height of the first anchor to 40 pixels—the full height of the image. You can do this by applying a class of first to the first list item:
li.first a {
height: 40px;
line-height: 40px;
}
The list now looks like a stylish vertical navigation bar. To complete the effect of your css example, the last thing you need to do is apply the hover and selected states. To do this, you simply shift the background image on the anchor links to the right, uncovering the hover state graphic. This style is applied to the anchor links when the user hovers over them. It is also applied to any anchors that have a class of selected applied to their parent list item.
|
