Tue, 2007-10-02 22:50
I have a horizontal navigation that I am having some issues with. You can see the navigation here:
http://www.agilitygraphics.com/clients/darpino
The whole thing works fine, with the exception of the html links, which I would like to be able to give a margin without the their respective background images also taking on the margin. The background images are in the right spot and work as they should, just the links need to have a bit of top and left margin. How can I do that? Is that even possible?
The html looks like this:
The CSS looks like this:
.topNav {
height: 64px;
}
#mainnav {
float: right;
width: 425px;
font-size: 10px;
margin: 0 4px 0 0;
}
#mainnav ul {
}
#mainnav li {
display: inline;
list-style: none;
}
#mainnav a {
display: block;
float: left;
width: 85px;
text-decoration: none;
padding: 0;
background:#fff url(../img/general/btn_bg.gif) no-repeat;
}
#mainnav a:link, #mainnav a:visited {
color: #3D3D3D;
}
#mainnav a:hover, #mainnav a:active,
#uberlink a:link, #uberlink a:visited,
#uberlink a:hover, #uberlink a:active {
background-image:url(../img/general/btn_bg_over.gif);
background-repeat: no-repeat;
color: #3D3D3D;
}
Tue, 2007-10-02 23:14
#1
How about this: #mainnav a
How about this:
#mainnav a {
display: block; <-- not needed if floating, or use inline to fix IE
float: left;
width: 85px;
text-decoration: none;
padding: 10px 0 0 0;
text-align: center;
background:#fff url(../img/general/btn_bg.gif) no-repeat;
}
Tue, 2007-10-02 23:26
#2
yes! getting closer
Almost there.
I am using this now:
#mainnav a {
float: left;
width: 85px;
text-decoration: none;
padding: 10px 0 0 0;
text-align: left;
background:#fff url(../img/general/btn_bg.gif) no-repeat;
}
I would now like to, give the text a left padding. I don't want to center them. What I don't understand is why the 10px top padding works without moving the bg image, but as soon as I try that for left padding it moves the bg image with it. How can I get some left padding?
Thanks a lot for the help!
Tue, 2007-10-02 23:42
#3
reduce the width by the same
reduce the width by the same 10px you've used for padding
Tue, 2007-10-02 23:47
#4
Thanks you so much!
That seems to work!
Thank you!