0

I have problem in css setting. I have created three link in header section on right side. with small icons
1. Home 2. Contact us and Site Map.

 <div class="icons"><!--icons starts here -->
                    <ul>
                        <li class="home"><a href="#">Home</a></li>
                        <li class="contact"><a href="#">Contact Us</a></li>
                        <li class="sitemap"><a href="#">Site Map</a></li>                    
                    </ul>
            </div><!--icons ends here -->

CSS Code:

.icons{float:right; width:263px;  border:1px solid #000;}
.icons{float:right; width:263px;}
.icons ul{ list-style-type:none; display:inline; margin:0; padding:0;}
.icons ul li{padding-left:26px; float:left; position:relative; margin-right: 28px; margin-top: 20px; border:1px solid #000;}
.icons ul li a{color:#5d5d5d; text-decoration:none; font-size:12px; padding-top:8px; display:block; }
.icons ul li.home{background:url(img/homeicon.jpg) no-repeat; width:22px; height:20px; }
.icons ul li.contact{background:url(img/contacticon.jpg) no-repeat; width:20px; height:22px;}
.icons ul li.sitemap{background:url(img/sitemap.jpg) no-repeat; width:30px; height:21px;}

Its not working fine. Home is working good but contact us link and sitmap are coming in two lines.
Contact
us

Site
Map

This is how it is howing with icons.

How can i make them in on single line. Plzz help me.

3
Contributors
3
Replies
21
Views
3 Years
Discussion Span
Last Post by mattster
0

You have specified the width of each li. The "Contact Us" is much longer than "Home" and that would be wrapped into the specified with (20px). The "Site Map" is also a bit longer than your specified width (30px). Simply increase the width of both .icons ul li.contact and .icons ul li.sitemap to a bit bigger and see the different.

1

Thanks for your Feed back.

Please mark solved if @Taywin has fixed it and give him some credit

Edited by mattster

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.