4 replies [Last post]
brian914
Offline
Regular
Last seen: 24 weeks 1 day ago
Timezone: GMT-7
Joined: 2007-09-20
Posts: 18
Points: 0

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;
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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; }

brian914
Offline
Regular
Last seen: 24 weeks 1 day ago
Timezone: GMT-7
Joined: 2007-09-20
Posts: 18
Points: 0

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!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

reduce the width by the same

reduce the width by the same 10px you've used for padding

brian914
Offline
Regular
Last seen: 24 weeks 1 day ago
Timezone: GMT-7
Joined: 2007-09-20
Posts: 18
Points: 0

Thanks you so much!

That seems to work!
Thank you!