CSS Help needed - positioning

Discussion in 'Web Design and Development' started by joe8232, May 18, 2008.

  1. joe8232 macrumors regular

    Joined:
    Jun 21, 2005
    #1
    Hi all,

    I am relatively new to CSS - used to use tables to layout a webpage. The problem I am having is that I have a div aligned left that I plan to use for navigation.

    I have added a list to it and want to get the items in the list to appear like elements of a table - like the ones here [www.st-and.ac.uk] for prospective students etc.

    The only problem I have is that the doesn't seem to start at the same place as the div but rather about 50px to the right. Why is this?

    Here is the page: www.st-and.ac.uk/~jl386/site/ and here is the code:

    #leftRail{
    width:175px;
    float:left;
    margin-right:25px;
    margin-bottom:25px;
    background-image:url(blue_background.jpg);
    background-repeat:no-repeat;
    color:#fff;
    margin-left:15px;
    }

    #leftRail li {

    list-style:none;
    background-color:#FF0000;
    color:#fff;
    border-bottom:1px solid;
    width:175px;
    }

    then on the page:
    <div id="leftRail">
    <ul>
    <li><a href="index.php">Home Page</a></li>
    <li>Events</li>
    <li>News</li>
    <li><a href="photo.php">Photo Album</a></li>
    <li>Aurora</li>
    <li>Comittee</li>
    <li>Links</li>
    </ul>
    </div>

    Any help would be really appreciated.
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    an <ul> usually gets indented a bit. Try:
    #leftRail ul{
    margin: 0;
    padding: 0;
    }
     
  3. joe8232 thread starter macrumors regular

    Joined:
    Jun 21, 2005
    #3
    Great! Thanks for that Darth.Titan - I was trying all sorts of things like having negative margins etc. Really appreciate it.
     
  4. &Ingonyama macrumors member

    Joined:
    May 6, 2008
    #4
    Its good to set all margins/padding to 0 at the beginning of your stylesheet like this:

    Code:
    * { padding: 0; margin: 0 }
    (the start means "ALL")

    There's also Eric Meyers reset stylesheet which does the same thing but sets other things to good starting values:

    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
     
  5. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #5
    Resets are a good idea ( I start with Eric Meyers and personalize it to the project at hand). However, I've read places that the universal selector (*) has issues, so a reset like Eric's, which uses actual tag names, might give you better results.
     
  6. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #6
    Just a comment on another general area - your kerning is very tight in all your body copy, and I didn't see the use of typography to distinguish types of content/your blurbs in the right hand column. The information needs visual hierarchy.

    Also, taking a look at your code, you seem to be suffering from divitis. You have a lot of unnecessary divs at the beginning of your document.

    I'm just trying to be constructive - not talking down to you. I'm still learning, too. Just wanted to pass along some knowledge.
     

Share This Page