PAWDD E-Training
22Sep/090

Styling Lists Menus with Images that Expand

It is common to see a list styled as a vertical or horizontal menu. Our menus are usually very simple but why limit ourselves to simple text lists as a menu.

Especially when CSS is so powerful and can be used along with the tag to allow for genuine gorgeous list menus styled with images that expand and contract with link text length.

The following is CSS that will allow you to have beautiful image styled menus that expand and contract with content.

This example only expands horizontally, not vertically, so it is not a good idea to have multi-line text in your lists.

The Image

Image to use for your list menu up/down states

Image to use for your list menu up/down states

This example used an image that is 300x48, thusly taking into account that your link will never be more than 296px wide, and accounting for a 24 pixel high menu item, with a hover state built into the image using a stacked image that contains both states in one image, thus reducing load on your server, and removing the need for OnLoad events on the body.

The CSS

#menu li {
     list-style:none;
     float:left;
     margin-right:4px;
}
* html #menu li {
     height:24px;
     display:inline;
}
#menu li a {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat left top;
     padding-left:15px;
     color:#405768;
     font:700 0.88em/26px Arial, Helvetica, sans-serif;
     text-decoration:none;
     cursor:pointer;
}
#menu li a span {
     height:24px;
     display:block;
     background:url(images/nav.png) no-repeat right top;
     line-height:24px;
     padding-right:15px;
}
#menu li a:hover, #menu li a.s {
     background-position:left bottom;
}
#menu li a:hover span, #menu li a.s span {
     background-position:right bottom;
}
* html #menu li a, * html #menu li a span {
     width:1%;
     white-space:nowrap;
     cursor:pointer;
}
* html #menu li a span {
     position:relative;
}

The XHTML

<ul id="menu">
	<li><a title="button 1" href="http://"><span>Button 1</span></a></li>
	<li><a title="Button 2" href="http://"><span>Button 2</span></a></li>
	<li><a title="Button 3" href="http://"><span>Button 3</span></a></li>
</ul>
Tagged as: , , , , , , No Comments
10Sep/092

Make Lists Align Properly

Bulleted lists can present many issues in formatting in older and newer browsers.  I consistently run into a problem where my bulleted lists will slam up against the far left side of my division.

The fix for this issue is to use CSS to replace the standard bullet image with a left side margin and a background image as the bullet, or to remove the bullet image completely by placing a transparent background image as the bullet.

The CSS for the ul and li is as follows: 

ul  {
     white-space: normal;
     display: block;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 5px;
}
li  {
     margin: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 3px;
     padding-left: 10px;
     list-style: disc url(none) outside;
     background-image: url(../images/bullet/bullet.gif);
     background-repeat: no-repeat;
     background-position: left top;
}
Tagged as: , , , , , , 2 Comments
   

Dashboard

Training Categories

Shaded Pixel LLC

Monthly Archive

Page Links

PAWDD E-Training