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 -->
                        <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>                    
            </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.


This is how it is howing with icons.

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

Recommended Answers

All 3 Replies

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.

Thanks for your Feed back.

Thanks for your Feed back.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.