Previous Message
Next Message

sliding doors - a:hover

Sent by Marcluzietti on 14 March 2006 20:08


"Adrienne Latimer" [EMAIL-REMOVED]>
Sent by: [EMAIL-REMOVED]
03/14/2006 03:10 PM

 
        To:     [EMAIL-REMOVED]
        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-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: