SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is this happening?

    Hi all,

    Im trying to learn CSS whilst messing around with some idea's for my website layout, and ive run into a brick wall.

    /edit/
    In Mozilla everything appears ok apart from the bullet points in the list appear outside of the nav2 box and in IE6 (not checked 7) my content box is miles out.

    //EDIT 2//

    I worked out the problem, i had forgotten to remove the width from the content div, only problem left now is the bullet points not being inside the nav2 div.

    Ill post the code, so if anyone could help me it would be great!

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    div#container {
    width:760px;
    margin:auto;
    margin-top: 15px;
    margin-bottom:15px;
    }
    
    div#header {
    width:760px;
    border:1px solid black;
    height:120px;
    }
    
    div#ads {
    width:760px;
    border:1px solid black;
    height:50px;
    margin-top:10px;
    }
    
    div#nav1 {
    width:760px;
    border:1px solid black;
    border-top:none;
    }
    
    div#nav2 {
    width:100px;
    border:1px solid black;
    margin:10px 0px 0px 0px;
    float:left;
    }
    
    div#content {
    width:650px;
    margin: 10px 0px 0px 110px;
    height:250px;
    border:1px solid black;
    }
    
    div#footer {
    margin-top:10px;
    border:1px solid black;
    width:760px;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="header" align="center">Logo / header etc</div>
    <div id="ads" align="center">ADVERTS GO HERE</div>
    <div id="nav1" align="center">About | Login/out | Etc</div>
    <div id="nav2">Logged in nav<hr /><li>Link</li<li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li><li>Link</li></div>
    <div id="content" align="center"><h1>Content Goes Here</h1></div>
    <div id="footer" align="center">Footer&copy;</div>
    </div>
    </body>
    </html>
    Many thanks,

    Gareth
    Last edited by gareth_w; Mar 3, 2007 at 12:57. Reason: Fixed it

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the position:absolute declaration from div#content.

    Don't use the align attribute. Use CSS instead. Four ways to Center Elements with CSS (in IE5+/Win and other browsers)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think we got caught up in my edit's, it all came a bit clearer after i'd taken a short break :P

    thanks alot for your input

    Gareth


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
  •