Adding Space Between List Items in Sprite Nav Menu

[doobiedubois]

Hello,

I’ve created a horizontal sprite menu in which I decided to delete one graphic, and now I would like to add space between the list items. I’ve tried adding padding and margins to the items but it is not changing its appearance. How would one do this?

Thanks.

[Ampitere]

It’d be best to show your code either here or in a live viewer.

[doobiedubois]

Hi Ampitere,

Thanks for responding. My page is http://www.grdnbklyn.com. Here is my code for navigation:

#mainNav {

width: 668px;

height: 32px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

position: relative;

background-image: url(images/mainnav2.png);

background-repeat: no-repeat;

}





#mainNav ul {

margin: 0px;

padding: 0px;



}



#mainNav li {

margin: 0;

list-style: none;

display: block;

font-size: 20px;

float:left;

text-indent: -9999px;

position:absolute;



}





#mainNav li a {

text-decoration:none;

display:block;

top: 0px;

height: 31px;





}



#home {left: 0px; width: 52px;}

#shop {left: 52px; width: 52px;}

#aboutus {left: 100px; width: 78px;}

#contact {left: 181px; width: 71px;}

#projects {left: 252px; width: 74px;}

#press {left: 326px;width: 52px}

#facebook {left: 378px; width: 76px;}

#blog {left: 461px; width: 52px;}

[joshbedo]

Can you post an example in jsfiddle.net?

[snillor]

They say that whenever you float an element, you must give it a width. According to the CSS you posted, your #mainNav li is floated, but no width assigned. Don’t know if that’ll fix the issue, though.

Nice looking site.

[wolfcry911]

@joshbedo, they provided a link to the actual page – you can’t ask for anything better. Use firebug or some other extension, or copy the code and post it to jsfiddle yourself.

@snillor, although it appears the li are floating – they’re not. The float is overruled by the absolute positioning.

@doobiedubois, as stated, the li are absolutely positioned. Margin and padding will no effect on the neighboring li. If you want to keep the absolute positioning, you’ll need to adjust their position by changing the left: nnnpx; rules in the individual li ids

[doobiedubois]

Thanks josh, snillor and wolfcry911 for the feedback.

wolfcry911, I attempted and padding the list id but it was not successful. So, I ended up making adjustments to the sprite and it was able to find a solution. And it required less time than I expected.

[wolfcry911]

I stated that padding will have no effect on the neighboring li – you needed to adjust the left: px values. What if you need another adjustment – are you going to redo the sprite again?

[Author]

Posts