Hey guys, If you head to http://www.travoholic.com and look at the list in the top right hand corner you'll see that it's not really lined up properly. I'd like the squares justified to the far left, in line with my Adsense. Here's the code I have: ----------------------------------------------------------- <div id="navcontainer"> <ul id="navlist"> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> CSS: #navcontainer ul { list-style-type: none; text-align: left; } #navcontainer ul li a { background: transparent url(http://www.travoholic.com/list-off.gif) left center no-repeat; padding-left: 15px; text-align: left; font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif; text-decoration: none; color: #999; } #navcontainer ul li a:hover { background: transparent url(http://www.travoholic.com/list-active.gif) left center no-repeat; color: black; } #navcontainer ul li a#current { background: transparent url(http://www.travoholic.com/list-active.gif) left center no-repeat; color: #666; } ------------------------------------------------------ Any ideas? I'm new to CSS. First time fiddling around with lists so go easy! Thanks loads for any help!! Kirsty
try.. #navcontainer ul { margin: 0 10px; padding: 0; list-style-type: none; text-align: left; } Code (markup):
Thanks loads mate! One more question... any idea how I scrunch the list up a bit? I want to reduce the vertical space between the listings. Thanks again! Kirsty
Np. #navcontainer ul li { margin: 0px; } Code (markup): If you want to adjust it, replace 0px with top-and-bottom-marginpx left-and-rightpx or you can set 4 individual margins in this order: top right bottom left.