Issues with margin-top and UL tag

Discussion in 'Web Design and Development' started by tech4all, Jul 26, 2012.

  1. tech4all macrumors 68040

    tech4all

    Joined:
    Jun 13, 2004
    Location:
    NorCal
    #1
    Ok so I have an a DIV tag with a another div/header inside of it. Inside of that div/header tag I have an UL tag. For the main DIV tag and header I have margin-top: 0px so the outer one is up against the top of the body/browser, and the header DIV tag is also up against the top of that parent DIV tag.

    However when I put the UL tag and have that set to a magin-top: xx, it stays at the top and the outer most DIV applies the margin-top of the UL tag to it. Very frustrating.

    HTML:

    Code:
    <div id="site-outside-wrapper">
    	<div id="header">
        	<img class="logo" src="assets/graphics/logo.gif" />
           	<ul class="nav1">
            	<li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
         	</ul>
            </div>
    </div>
    
    CSS:

    Code:
    #site-outside-wrapper {
    	position: relative;
    	margin-top: 0px;
    	width: 700px;
    	height: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: black;
    	border: 0px solid black;
    }
    
    #header {
    	position: relative;
    	height: 100px;
    	margin-top: 0px;
    	background-color: red;
    	border: 0px solid black;
    }
    
    img.logo {
    	float: left;
    	margin-top:0px;
    	margin-left:25px;
    }
    
    ul.nav1 {
    	position: relative;
    	margin-top: 0px;
    	margin-left: 400px;
    	margin-bottom: 0px;
    	padding: 0px;
    	border: 1px solid black;
    }
    
    ul.nav1 li {
    	display: inline;
    	border: 1px solid black;
    }
    
    Hopefully that makes sense!
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    I googled this because it had me confused as well. I copied and pasted the below answer from here.

     
  3. mikelegacy macrumors 65816

    mikelegacy

    Joined:
    Dec 5, 2010
    Location:
    Pittsburgh, PA
    #3
    Do this:

    CSS
    Code:
    #site-outside-wrapper {
    	position: relative;
    	margin-top: 0px;
    	width: 700px;
    	height: 800px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: black;
    	border: 0px solid black;
    }
    
    #header {
    	position: relative;
    	height: 100px;
    	margin-top: 0px;
    	background-color: red;
    	border: 0px solid black;
    }
    
    img.logo {
    	float: left;
    	margin-top:0px;
    	margin-left:25px;
    }
    
    ul.nav1 {
    	position: relative;
    	top: 20px;    /* add whatever margins for the UL you want there */
    	margin-left: 400px;
    	margin-bottom: 0px;
    	padding: 0px;
    	border: 1px solid black;
    }
    
    ul.nav1 li {
    	display: inline;
    	border: 1px solid black;
    }
    Why do you have a margin left of 400px? You should be floating things if you are trying to line to create a column style grid...

    I want to make a jsfiddle To show you the proper way to do this but I am on my iPad right now. The way you are doing it is far from a best practice for sure
     
  4. tech4all thread starter macrumors 68040

    tech4all

    Joined:
    Jun 13, 2004
    Location:
    NorCal
    #4
    Thanks for the link. At least now I know what the "issue" is called; collapsed margins.

    The numbers (and code) aren't final. It was just put there to test things. The logo is on the left (floated and fine-tuned with margins). The navigation will be towards the right.

    I'd appreciate any further info you could provide with jsfiddle.
     

Share This Page