Baxtex Posted May 8, 2011 Share Posted May 8, 2011 I can't get my Navigation bar to work properly, I want it to look like this: http://imageshack.us/photo/my-images/228/namnlsqf.jpg/But now it looks like this: http://imageshack.us/photo/my-images/204/namnlsmi.jpg/Adn here is my code (but not all of it, took the parts which i found relevant: HTML:<div id="navigation"> <ul> <li><a href="#">Länk 1</a></li> <li><a href="#">Länk 1</a></li> <li><a href="#">Länk 1</a></li> <li><a href="#">Länk 1</a></li> </ul> </div> <div id="content"> <p> text</p></div>CSS:#navigation { width:20%; float:left; border-right:2px solid blue; padding:0px; } #navigation ul{ list-style:none; margin:0px; padding:0px;} #navigation a { padding:5px 5px 5px 0px; background-color:white; color:green; border:2px solid black; text-decoration:none; } #navigation li{ float:right; padding:50px; } #navigation a:hover,a:focus{ background-color:orange; Color:blue; } So, what am i doing wrong? Have been changing the padding values for over an hour now, but i can't seem to get it to work. If i change the values in Navigation A, padding:5px 5px 5px 0px; to higher, my link "boxes" just changes row(!).So, i can change the height of the li elements, but not the width. And i can't get the li elements to "stack together" upon each other, there are serveral pixels between them, i don't want that either. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 8, 2011 Share Posted May 8, 2011 the anchor is inline element, change the anchor to block element display:block; now you can add padding to anchor. Link to comment Share on other sites More sharing options...
Baxtex Posted May 8, 2011 Author Share Posted May 8, 2011 Thank you very much! Link to comment Share on other sites More sharing options...
Baxtex Posted May 8, 2011 Author Share Posted May 8, 2011 Thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.