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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts

    Question Div Alignment & Position

    Hiya Guys...

    I have a slight problem, i have just started to create my own web site, and have come across a problem.

    i am sure it would be really easy to fix, and i probably just missed something out of the CSS, but here it goes...

    CSS File
    PHP Code:
    body{
    text-alignleft;
    background-color#171717;
    font-familycourier new;
    font-weightnormal;
    font-size16pt;
    }
    h1{
    color#aaff55;
    font-familycomic sans ms;
    font-size32pt;
    font-weightnormal;
    }
    h2{
    color#ffffff;
    font-familytahomaserif;
    font-size18pt;
    font-weightnormal;
    }
    h3{
    color#aaff55;
    font-familycomic sans ms;
    font-size18pt;
    font-weightnormal;
    text-decorationunderline;
    }

    #container{
    width760;
    heightauto;
    positionabsolute;
    right50px;
    background-color#d3d3d5;
    }

    #header{
    width760;
    height220;
    background-imageurl(images/Header.jpg);
    background-repeatno-repeat;
    positionrelative;
    }

    #sidebar {
    width200;
    heightauto;
    overflowauto;
    floatleft;
    text-aligncenter;
    }
    #sidebar a:link { 
    color#333333;
    text-decorationunderline;
    }
    #sidebar a:visited { 
    color#333333;
    text-decorationunderline;
    }
    #sidebar a:hover { 
    color00ff00;
    background-color#171717;
    }

    #section{
    width550;
    heightauto;
    overflowauto;
    margin-left10px;
    }

    #footer{
    width760;
    height186;
    background-imageurl(images/Footer.jpg);
    background-repeatno-repeat;
    positionabsolute;

    HTML File
    PHP Code:
    <html>
        <
    head>
            <
    title>
                
    GCS-Computers FriendsGames Web Dev
            
    </title>
        <
    LINK REL=StyleSheet HREF="layout.css" TYPE="text/css" MEDIA=screen>
        </
    head>
        
        <
    body>
            <
    div id="container">
                <
    div id="header">
                </
    div>
                    <
    div id="sidebar">
                        <
    a href="swat4.htm">SWAT 4 Server</a></li>
                        <
    a href="send.htm">Send E-Mail</a></li>
                    </
    div>
                    <
    div id="section">
                    
    Hello World !!!
                    </
    div>
                <
    div id="footer">
                </
    div>
            </
    div>
        </
    body>
    </
    html
    Now, the problem is, when the main body (#section) is larger than the nav bar(#sidebar) then the #footer positions itself underneith the main #section...that is all good..

    however, if on one page the #section is only small and the #sidebar has many links, the #footer still positions itself under the body, even though the #sidebar is longer, this results in the #sidebar being behind #footer and proruding from the bottom...

    a couple of links...

    Working Fine - http://gcs-computers.net/section.htm
    Long #sidebar - http://gcs-computers.net/sidebar.htm

    Hope you guys can help me out...

    S2K

    EDIT--
    the error with the sidebar displays differently on IE... but im looking to get it right on FF first..
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Goodmorning Shoot2Kill,
    The random absolute positioning was not helping, remove that and add clear: both; and the footer will be pushed down by whichever column is longest.
    Like this:
    Code:
    #container{
    width: 760;
    background-color: #d3d3d5;
    overflow: hidden;
    }
    #header{
    width: 760;
    height: 220;
    background-image: url(images/Header.jpg);
    }
    #sidebar {
    width: 200;
    float: left;
    text-align: center;
    }
    #section{
    width: 550;
    margin: 0 0 0 210px;
    }
    #footer{
    width: 760;
    height: 186;
    background-image: url(images/Footer.jpg);
    clear: both;
    }
    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

  • #3
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    Yes, Thankyou This Worked Great,

    however, with the #container Div, i have entered
    right: 50px;

    but al of the container is aligned to the left, not right...
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    **Bump**

    http://gcs-computers.net/index.htm

    How do i align everything right (but leave a 50px gap like above links...) ??
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Code:
    #container{
    width: 760px;
    float: right;
    margin: 0 50px 0 0;
    background-color: #d3d3d5;
    overflow: hidden;
    }
    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

  • #6
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    OK, Thanks.. Worked Great, i should have thought of it.. lol...

    1 more problem.. lol

    on the site http://gcs-computers.net

    when you hover on a link, it displays a block with span text in it, however this block is positioned "fixed" and i want it to be inside the sidebar <div> so that when the page is moved, or a different res is used, it will still position correctly..

    sorry about al <div> questions, but it is the first time i have really used them, i used to use tables lol
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE


  •  

    Posting Permissions

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