No, not necessarily. It depends on how many different blocks of three images
you need to use.
This method uses a single combined 3 image block for a vertical menu and works
cross-browser:
You'd need to set inline params for a horizontal menu.
It doesn't cater for sub-items, but once you have mastered this, it's a fairly
easy progression.
HTML:
<div id="menu">
<ul>
<li><a href="item1.html">Item1</a></li>
<li><a href="item2.html">Item2</a></li>
<!-- and as many more or less <li> items as you need -->
</ul>
</div>
---------------------------------------------------------------------------------------------
CSS
#menu {
/* Create box/position for menu with a background image if required */
}
#menu ul {
/* Set position and padding/margins of <ul> within menu box */
}
#menu li { /* Remove <li> defaults */
list-style:none;
}
#menu li a {
background-image:url(3 part single image url goes here);
background-repeat: no-repeat;
background-position:0 0;
/* Set width, height etc */
}
#menu li a:hover {
background-position:0 -73px; /* Change position to suit image sizes */
}
#menu li a:active {
background-position:0 -146px; /* Change position to suit image sizes */
}
---------------------------------------------------------------------------------------------
Just add appropriate sizes and positions to suit your images, and remove anchor
default coloring as necessary.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
----- Original Message -----
From: Christopher
To: css-d@lists.css-discuss.org
Sent: Saturday, June 21, 2008 1:49 AM
Subject: Re: [css-d] CSS Roll Over Problem Help
So I have one <div> now with just a background image. I have to create
three other <divs> ? And each one
being a :hover and a :active?
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
