How do I move my list left a bit?

Discussion in 'CSS' started by travoholic, Mar 29, 2007.

  1. #1
    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
     
    travoholic, Mar 29, 2007 IP
  2. maonnie

    maonnie Member

    Messages:
    71
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    try..

    
    #navcontainer ul
    {
    margin: 0 10px;
    padding: 0;
    list-style-type: none;
    text-align: left;
    }
    Code (markup):
     
    maonnie, Mar 29, 2007 IP
  3. travoholic

    travoholic Well-Known Member

    Messages:
    299
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #3
    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
     
    travoholic, Mar 30, 2007 IP
  4. maonnie

    maonnie Member

    Messages:
    71
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    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.
     
    maonnie, Mar 30, 2007 IP
  5. mr_bill

    mr_bill Banned

    Messages:
    1,292
    Likes Received:
    110
    Best Answers:
    0
    Trophy Points:
    135
    #5
    try this also

    #navlist
    {font-size: 9pt; font-family: arial;}

    Tightens the right side navigation
     
    mr_bill, Mar 30, 2007 IP
  6. www.infoebookstore.co.uk

    www.infoebookstore.co.uk Peon

    Messages:
    487
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #6
    watch out for Adsense TOS with images next to ads! Friendly advice
     
  7. matthewbeckman

    matthewbeckman Peon

    Messages:
    140
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I also would make sure you add a doc type to the top... no reason you shouldn't have one.
     
    matthewbeckman, Feb 29, 2008 IP