Background image on list items

Positioning icons

[icoder]

Hi,

I'm using css for making my navigation bar using ul and li list item with a background image. some how i have aligned but since i want to add facebook like button after contact the whole alignment become a mess.

my css code is:

===============================================================
.TopNavigation {height:75px;background:url(../images/bg.skills.gif) no-repeat

top center;}
.social {width:110px; height:62px;float:right; padding: 24px 0 0 0;}
ul.nav {width:700px;margin: 0 0 0 285px;}
ul.nav li {float:left;display:inline;margin:28px 66px 0 0;font-size:15px;font-

family:"Century Gothic", arial, Helvetica;font-weight:bold;}
===============================================================

please suggest, how to align properly using a background image

Thanks,
you help will be highly appreciated
:)

[edited by: alt131 at 11:54 pm (utc) on May 16, 2011]
[edit reason] Thread Tidy [/edit]

[webable]

Hi icoder, welcome to WebmasterWorld!

Aligning properly to a background image is just about positioning. If I understand you right, you want the icon buttons placed in the background square close to "Contact"?

Easiest I think is to float the div.social left and give space with some margin:

/* .social {width:110px; height:60px;float:right; padding: 24px 0 0 0;} */
.social {width:110px; height:60px; float:left; margin-left:-34px; padding: 24px 0 0 0;}

But I would suggest putting the icons in a nested list instead of the div.social for this:

<div class="TopNavigation">
<ul class="nav">
<li><span class="active">Home</span></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<li>
<ul class="social">
<li><a href="http://www.twitter.com/WizIcon"><img src="images/icons/twitter.gif" alt="Read my tweets"></a></li>
<li><a href="#"><img src="images/icons/feed.gif" alt="Subscribe feed"></a></li>
<li><a href="mailto:[e-mail]"><img src="images/icons/mail.gif" alt="Send a message"></a></li>
</ul>
</li>
</ul>
</div>

The adjusted css:

.TopNavigation {height:75px;background:url(../images/bg.skills.gif) no-repeat top center;}
ul.nav {float:left; margin: 0 0 0 242px;width: 610px;}
ul.nav li {float:left;width:122px; margin:25px 0 0 0; text-align:center; font:bold 15px/25px "Century Gothic", arial, Helvetica;}
ul.nav a {color:#666;text-decoration:none;}
ul.nav a:hover {color:#ae5b02;}
ul.nav .active {color:#ae5b02; text-decoration:underline;}
ul.nav li ul.social { float:left; margin: 0 0 0 13px;}
ul.nav li ul.social li {float:left; margin:0 0 0 0; width:auto;}

[edited by: tedster at 10:01 pm (utc) on Dec 9, 2010]
[edit reason] member request [/edit]