Neverside

CSS Question

Hello...I am trying to understand the code to a menu type script and I was wondering if anyone could help me. Below is part of the code.

#menu6 li a:hover, #menu6 li #current, #menu6 li a:active {
color: #6C7250;
background: url(menu6.gif) 0 -32px;
padding: 8px 0 0 10px;

I understand everything except the numbers next to background and padding. What do they do?

Last edited by marquesc, November 21st, 2006 04:44 PM (Edited 2 times)

its short hand. the above is quicker to write than the following.

backgrouind-image: url(menu6.gif);
background-position: 0 -32px;

padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;

so how exactly does this work ..i feel like i am close but i dont completely understand...

http://www1.coe.neu.edu/~mcrosby/index3.html

i mean i understand most of it i just dont get how they use one image for all of the rollovers..they somehow specify which part of the image to use for the rollover?

their using the background-position property to shift the image.

all the links have a set height of 24px

Code:

#menu4 li a {
          height:32px;       //don't know why this is here
          ...
          height: 24px;     //re-sets the height to 24px
          ...
        }

when you hover over a link it moves the background img up 32px revealing the bright orange row.

Code:

#menu4 li a:hover, ...{
        ...
        background: url(menu4.gif) 0 -32px;     //short hand
        ...
        }

when you activate a link it moves the img up 64px revealing the the brown row .

Code:

#menu4 li a:active {
        ...
        background: url(menu4.gif) 0 -64px;     //short hand
        ...
        }

ok for the most part i understand...i still dont get why the height is 24 and not 32 tho..each button is moved up 32 which is the height of the button no?

height:24 + padding-top:8 = 32