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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS DIV aligment

    Hello

    I have changed my website from tables to DIV statements, and whilst I believe I have everything working correctly now, there is only 1 issue that remains.

    The main issue is this: I have the header, the navigation, the content.
    All displays correctly between both IE & FF that i've tried in, but the content comes out of alignment once any text goes past the navigation height.
    For an example, go to www.brisbanetransport.info.

    Here is the css code if it is any help in seeing what I may have done wrong or left out!
    body {
    font: 10pt Arial;
    background-color: #FFF;
    color: #000;
    margin: 0px 0px 0px 0px;
    }

    h1 {
    font: 16pt Arial;
    font-weight: bold;
    }

    h2 {
    font: 12pt Arial;
    font-weight: bold;
    }

    A:link {color: #000000}
    A:visited {color: #000000}
    A:active {color: #000000}
    A:hover {color: #FF0000}

    #header {
    font: 16pt Arial;
    background-color: #041943;
    color: #FFF;
    margin: 20px 0px 0px 0px;
    padding-left: 15px;
    }

    #navigation {
    float: left;
    font: 10pt Arial;
    background-color: #DADADA;
    color: #000;
    margin: 15px;
    margin-left: 15px;
    width: 190px;
    padding: 5px;
    }
    #navigation A:link {color: #041943}
    #navigation A:visited {color: #041943}
    #navigation A:active {text-decoration: none; color: #041943}
    #navigation A:hover {color: #FF0000}

    #content {
    background-color: #FFF;
    color: #000;
    margin-left: 225px;
    margin-right: 5px;
    font: 10pt Arial;
    }

    table {
    font: 10pt Arial;
    color:#000;
    border-width: 1px;
    border-spacing: 0px;
    border-style: solid;
    border-color: #CCC;
    border-collapse: collapse;
    background-color: transparent;
    margin: 0;
    }

    table th {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: #CCC;
    color: #FFF;
    background-color: #041943;
    -moz-border-radius: ;
    }
    table td {
    border-width: 1px;
    padding: 2px;
    border-style: solid;
    border-color: #CCC;
    color: #000;
    background-color: transparent;
    -moz-border-radius: ;
    }

    Thankyou in advance!

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    I don't fully understand what you're trying to say. Could you elaborate on it, or give a visual example please?
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, hopefully this makes abit more sense.

    The header across the page works perfectly
    The navigation to the left of the page works perfectly
    The content, will display at 225px from the left page margin correctly, but if there is more text in the content then there is of menu links in the navigation, the text from the content goes back a few pixels.

    So in theory, if you run a ruler down the page of where the content starts, you'll notice that the it isn't straight.



    you'll notice that i've added a red line to indicate that the text is straight, but once it gets past the navigation pane, the content then goes to the left!

    I hope that now makes more sense, sorry!

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    First add a doctype to your page. I recommend this one. It goes above the <html> tag. Read the sticky for more info on doctypes.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Without a doctype IE6 and IE7 were in quirks mode so they won't display some things properly.

    Now on to your problem. Your #navigation div is taking of 235px of horizontal space, 10px padding (5px padding times 2), (15px margin times 2), plus the width 190px. You only give a left margin of 225px to your #content, that needs to be 235px in order for the text to not move to the left. Another issue that is occurring in both IE6 and IE7 (due to no doctype for IE7) is you are experiencing the double margin bug on your #navigation div. To fix this you need to add display:inline; to the CSS for #navigation.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thankyou, that seems to work perfectly.

    Although it did make the <li> statements do silly things, so I changed the navigation links from <li> to a character which looks even better!

    Thankyou once again!


  •  

    Posting Permissions

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