SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    My div moves when I have a unorderd list

    Hey there!

    I have a div where I'm going to have a navigation menu with listed items in a unorderd list but when I have it inside the div, the div moves down like 30px or something.

    This is my html

    Code:
    <!DOCTYPE html>
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <link href="../css/styles.css" rel="stylesheet" type="text/css">
    
    <title>kwpwebdesign.se - Startsida</title>
    </head>
    
    
    <body>
    
    
    
    <div id="upper">
    
    <div id="innerupper">
    
    <ul>
    <li>Hem</li>
    <li>Om mig</li>
    <li>Tjänster</li>
    <li>Kontakt</li>
    <li>Övrigt</li>
    </ul>
    
    
    
    </div>
    
    
    </div>
    
    <div id="wrapper"></div>
    
    
    </body>
    </html>
    And this is my CSS:

    Code:
    body {background-color:#FFFFFF; margin-top:0; margin-left:0; margin-right:0; }
    
    
    #upper { height:70px; margin-left:auto; margin-right:auto; background-color:#990033;   }
    
    #innerupper { height:70px; margin-left:auto; margin-right:auto; width:1000px;  }
    
    #innerupper ul  { list-style:none;  }
    #innerupper ul li { display:inline; margin-left:25px;  }
    
    #wrapper { margin-top:25px; height:800px; margin-left:auto; margin-right:auto; width:1000px; background-color:#CCCC99;}
    I love all help!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, it's moving down because the <ul> has a top margin by default set on it. That causes everything to move down (you also have a margin collapse going on)

    To rectify everything, just remove the top margin on <ul>. You should really have a reset in there .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict kvnwpts's Avatar
    Join Date
    Mar 2012
    Location
    Helsingborg, Sweden
    Posts
    266
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Great, I learned something new today

    But what if i wanna push my listed items down a bit, I can't wrap a div around them and use margin-top because the same thing happens?



    Quote Originally Posted by RyanReese View Post
    Hi, it's moving down because the <ul> has a top margin by default set on it. That causes everything to move down (you also have a margin collapse going on)

    To rectify everything, just remove the top margin on <ul>. You should really have a reset in there .

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Than you just need to stop the margin collapse going on that I mentioned .

    Code:
    #innerupper{padding-top:1px;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •