SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Nested Margin, Simple Problem

    Hey,

    Having a really simple problem, I've never come accross this before so I think Im being stupid and missing something silly.

    Basicaly Im just trying to push my header away from the top of the wrapper div, thing is the margin setting on the header which is nested inside the wrapper is pushing both the wrapper and itself away from the top of the page, adding padding instead just has no effect.

    Any ideas?

    http://mattadamson.mine.nu/test/

    If you look at the page I have the simple code below

    HTML Code:
    <div id="wrapper_bg">
    
    <div id="header">
    TEST HEADER
    </div><!--close #header-->
    
    <div id="content">
    </div><!--close #content-->
    
    </div><!--close #WRAPPER_BG-->
    And CSS

    Code CSS:
    body
    {
    	margin: 0;
    	padding: 0;
    	background: #bbbec0;
    }
    #wrapper_bg
    {
    	width: 100%;
    	height: 589px;
    	margin: 0;
    	background: url(img/outer_bg.jpg) repeat-x;
    }
    #header
    {
    	width: 980px;
    	height: 55px;
    	margin: 40px auto 0 auto;
     
    }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think if you change your CSS to the following it should achieve what you're after?

    Code:
    body
    {
        margin: 0;
        padding: 0;
        background: #bbbec0;
    }
    #wrapper_bg
    {
        width: 100&#37;;
        height: 589px;
        background: url(img/outer_bg.jpg) repeat-x;
    }
    #header
    {
        width: 980px;
        height: 55px;
        margin: 0 auto;
        padding-top: 40px;    
    }

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Collapsing margins

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Grea thanks! I thought I tried that before but it didnt work, the page must have cached.

    I have one other question about a navigation. Im trying to get horizontal navigation with blocks.

    http://mattadamson.mine.nu/test/

    You can see what I want to get done here, my only problem is because in floating the li elements to the right the end up in reverse order to the way its coded, how can I overcome this?

    HTML Code:
    <div id="header">
    <ul>
    <li><a href="#" title="Features">FEATURES</a></li>
    <li><a href="#" title="Features">SPECIFICATIONS</a></li>
    <li><a href="#" title="Features">DOWNLOADS</a></li>
    <li><a href="#" title="Features">EMAIL A FRIEND</a></li>
    </ul>
    </div><!--close #header-->

    Code CSS:
    #header ul
    {
    	width: 400px;
    	margin: 36px 0 0 0;
    	float: right;
    }
    #header li
    {
    	width: 98px;
    	height: 17px;
    	padding: 2px 0 0 0;
    	float: right;
    	background: #C8CCD5;
    	border-top: 1px solid #8c8e95;
    	border-right: 1px solid #8c8e95;
    	border-left: 1px solid #8c8e95;
    	list-style: none;
    	display: block;
    	text-align: center;
    }

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just change the li's to float left

    Code:
    #header li
    {
        width: 98px;
        height: 17px;
        padding: 2px 0 0 0;
        float: left;
        background: #C8CCD5;
        border-top: 1px solid #8c8e95;
        border-right: 1px solid #8c8e95;
        border-left: 1px solid #8c8e95;
        list-style: none;
        display: block;
        text-align: center;
    }
    Your <ul> is already being floated to the right of the page so that will position the list to the right and then you can float the individual list items to the left within this

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I really am stupid sometimes lol, Ive done this a million times but just couldnt wrap my head around it today, you might notice if you take the float away totaly then each li item has a small space between that you cant get rid of, know why this is ? Im just curious

    Thanks for your help!

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem.... which float do you mean? Tried taking away the float: left; and they just stack up on top of each other as I'd expect. Maybe it's a specific browser issue as I've only tested in Firefox?

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2006
    Location
    UK
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry it was when I was displaying them inline rather then block my mistake again lol

    Cheers for you help though


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
  •