Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    adding <ul> navigation list moves previous <div> down

    Hi all,

    New to codingforums... and got a frustrating problem. Not sure whether it's a HTML or CSS problem. Relative noob. (not a positioning pun there)

    Please see HTML segment below.

    Code:
    <div id="parent_wrapper">
    <div id="child">
    <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    </div>
    CSS Below:

    Code:
    body {
    background: #000000 url(../images/d4t_bg.jpg) repeat-x;
    margin: 0px;
    font-family:Arial, Helvetica, sans-serif;
    }
    
    #parent_wrapper {
    width: 811px;
    height: 675px;
    margin: auto;
    background-image:url(../images/d4t_header.jpg);
    }
    
    #child {
    background:#000000;
    width: 763px;
    height: 400px;
    margin: auto;
    position: relative;
    top: 443px;
    }
    As you can see, I have a bg image (it's just a 40px x 675px strip) which repeats along the X axis.

    This image continues into the image contained in the #parent_wrapper and all works fine until i put my <ul> tag into my html.

    Then, it would seem that my #parent_wrapper div moves down from the very top of the page by about 20px, shifting my header image out of line with my bg gradient.

    If I am not being too vague, can anybody suggest a reason for this?

    I have exercised every bit of trouble shooting I can think of (at my amateur level) adjusting padding and margins to try and get the #parent_wrapper to butt up to the top of the page again.

    Any thoughts would be much appreciated. I will post an image if necessary.

    thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    No link to your site? Have you tried setting a 0 margin to your <ul>?

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello mattjc,
    Try making #parent_wrapper relative and positioning #child from that.
    Like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	background: #000 url(../images/d4t_bg.jpg) repeat-x;
    	font-family: Arial, Helvetica, sans-serif;
    	margin: 0px;
    }
    #parent_wrapper {
    	width: 811px;
    	height: 675px;
    	margin: auto;
    	background: #ff0 url(../images/d4t_header.jpg); /*a bg color for demonstration only*/
    	position: relative;
    }
    #child {
    	background: #000;
    	width: 763px;
    	height: 400px;
    	margin: auto;
    	position: absolute;
    	left: 25px;
    	top: 443px;
    }
    </style>
    </head>
    <body>
        <div id="parent_wrapper">
            <div id="child">
                <ul id="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            <!--end child--></div>
        <!--end parent_wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    teedoff you diamond!

    Now I'm p#ssed at myself for not working that out. I didn't realise how the properties of seemingly separate elements could affect my layout.

    Much appreciated.

    Thanks for your efforts too Excavator!


  •  

    Posting Permissions

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