"Adrienne Latimer" <[EMAIL PROTECTED]>
Sent by: [EMAIL PROTECTED]
03/14/2006 03:10 PM
To: css-d@lists.css-discuss.org
cc:
Subject: [css-d] sliding doors - a:hover
I am using the sliding doors technique for styling a horizontal list.
http://www.florida-agriculture.com/
Does anyone know of a way make the a:hover state reveal a taller tab as
opposed to just revealing a different color portion of the background
image
via positioning?
Thanks in advance for any ideas.
========================
Off the top of my head, I'd increase the height in a:hover.
In order to be able to increase both parts of the sliding
door, you'll have to resort to a little tag soup, and add
<span></span> around your text inside the anchors. The
image and height-width info that normally goes on the <li>
element should go on the <a>, and what normally was on the
<a> should go on the <span>. Then you would use a:hover
span {yada yada yada}. I did something similar, i.e.:
#uwMenu ul {
margin:0;
padding:0;
list-style:none;
}
#uwMenu li {
display:inline;
margin:0;
padding:0;
}
#uwMenu a {
background:url("/SHF/resources/images/uwMenuLeft.gif")
no-repeat left top;
color:#000;
display:block;
float:left;
height: 1.5em;
margin:0;
padding:0 0 0 8px;
text-decoration:none;
}
#uwMenu a span {
background:url("/SHF/resources/images/uwMenuRight.gif") no-repeat right
top;
display:block;
float:left;
height: 1.5em;
padding:0px 8px 0px 0px;
}
#uwMenu a:hover {
background-position:0 -200px;
color:#fff;
cursor:pointer;
height: 2em;
}
#uwMenu a:hover span {
background-position:100% -200px;
color:#fff;
height: 2em;
}
Glad to see my state using web standards.
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
