PDA

View Full Version : CSS Nav.


Jittor
10-25-2006, 11:01 PM
Hello everyone,

I have a CSS nav in my left side column and I am trying to get an images as the background for the buttons. I got the image to work but the button only expands the length of the word. I would like them all to be uniform and have a fixed width. I would like have them all to have a width of 90px. I tried adding a width but nothing has worked. Well, here is the CSS code. Any help would be great - thanks


}
#nav{
font:80% Arial, Helvetica, sans-serif;
float:left;
width:100px;
text-align:left;
display:block;
margin-top:5px;
margin-left:3px;
}
#nav a{
background-image:url(../images/Lnav_button.gif);
width:90px;
color:#000000;
font-variant:small-caps;
text-decoration:none;
text-align:left;
padding:2px 6px;
}
#nav a:hover, #nav a:focus{
background-image:url(../images/Lnav_button_over.gif);
text-decoration:underline;
}

dreamlynx
10-26-2006, 12:03 AM
Fix at DWT for this I see.

chriskq
10-26-2006, 12:04 PM
dont forget to hack the width for FF when using padding
eg:

width: 90px;
padding: 2px 6px;
widt\h: 78px; /* width - left and right padding = widt\h */


dont forget to put display: block on ur a classes.

domedia
10-26-2006, 01:42 PM
Yupp, only block elements can have width set, and A is by default an inline element.

Jittor
10-26-2006, 03:21 PM
I am still learning this so would you mind furtur explaining the hack width/padding for FF:

widt\h: 78px; /* width - left and right padding = widt\h */

Dom - Are you saying that even though I have my nav at a "display:block" because I used "#nav a" a set width will not work?

Dreamlynx - Fix at DWT for this you see correct.

domedia
10-26-2006, 03:49 PM
Dom - Are you saying that even though I have my nav at a "display:block" because I used "#nav a" a set width will not work?
I'm saying if the element you want to fix is the <A> (anchor), then that element needs to be display block to have a width.

Jittor
10-26-2006, 05:19 PM
Dom - That rocks, I added the "display:block" and it did allow me to add a fixed width. Awesome - Thanks.