Thread: CSS Layout

    #1
  1. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Posts
    7
    Rep Power
    0

    CSS Layout


    I'm working on an all CSS layout for my site to increase speed and make things easier on myself, as well as to create something that will actually support standards for once.

    However, I've run in to a bit of a problem with one of the layout boxes. I want to create a "bar" that will be located at the bottom of every page. It should be 100% wide and have no margins between it and the sides or bottom of the screen. It needs to be 20 pixels tall. Right now, this is what I have:

    PHP Code:

    # Stylesheet:
    .bottom {
        
    positionabsolute;
        
    width100%;
        
    background#000000;
        
    margin0px 0px 0px 0px;
        
    height15px;
        
    bottom0px;
    }

    .
    bottomtitle {
        
    positionrelative;
        
    color#FFFFFF;
        
    floatleft;
        
    font-familyverdanasans-serif;
        
    font-size12pt;
        
    font-weightbold;
        
    padding3px 0px 3px 3px;
    }

    .
    copyright {
        
    positionrelative;
        
    color#FFFFFF;
        
    floatright;
        
    font-familyverdanasans-serif;
        
    font-size8pt;
        
    padding3px 3px 3px 0px;
    }

    #actual HTML code for the bottom box:

    <div class="bottom">
        <
    div class="bottomtitle">Company Name</div>
        <
    div class="copyright">
            
    Copyright (1999-2002 My Company<br />
            
    Check out our Privacy Policy
        
    </div>
    </
    div
    As you can see, I also require right and left aligned text on either side of the box as well.

    My problem is that when any text in the content portion of the site becomes longer than the window, it simply "goes behind" the box, rather than just pushing it down to the bottom. Does anybody have any suggestions for this? Is it fixable?
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
  4. #3
  5. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Posts
    7
    Rep Power
    0
    That simply moves it to the top of the page, rather than allowing it to stay at the bottom of every page, regardless of the length of the content.
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Yeah, sorry about that. This is a perennial CSS question, that's replaced the old question about getting a table/table cell to render to the bottom of the document. It's easy to do with scripting, but I haven't seen a pure CSS-based solution. Maybe someone else has one.
  8. #5
  9. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Posts
    7
    Rep Power
    0
    I got it!

    What I had to do was nest all of my content in an overall div and then place the bottom bar right below the content in that same div.
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Fireman-x...

    Could you post the solution? Very interested...
  12. #7
  13. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Posts
    7
    Rep Power
    0
    Yeah, lemme clean up my code a bit and I'll post it...
  14. #8
  15. No Profile Picture
    Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2000
    Posts
    7
    Rep Power
    0
    test.php:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    <
    html>
    <
    head>
    <
    title>CSS Test</title>
    <
    link rel='stylesheet' type='text/css' href='test.css' />
    </
    head>
    <
    body>
    <
    div class="top">This is the Top Bar</div>
    <
    div class="main">
         <
    div class="left">
              <
    div class="leftmenu">This is a left menu</div>
              <
    div class="leftmenu">This is another left menu</div>
         </
    div>
         <
    div class="content">Title of Page</div>
         <
    div class="content">
    Some body text goes here....
         </
    div>
         <
    div class="bottom">
              <
    div class="bottomtitle">My Site</div>
              <
    div class="copyright">
              
    Copyright (1999-2002 My Site<br />
              
    Check out our Privacy Policy
              
    </div>
         </
    div>
    </
    div>
    </
    body>
    </
    html
    test.css:

    PHP Code:
    BODY {
        
    margin0 0 0 0;
        
    background#CCCCCC;
    }

    .
    main {
        
    positionabsolute;
        
    margin50px 0px 20px 0px;
        
    width100%;
    }

    .
    content {
        
    positionrelative;
        
    widthauto;
        
    border1px solid #000000;
        
    margin5px 10px 5px 165px;
        
    padding10px;
        
    z-index2;
        
    background#FFFFFF;
    }

    .
    left {
        
    positionrelative;
        
    floatleft;
        
    width140px;
    }

    .
    leftmenu {
        
    positionrelative;
        
    width150px;
        
    border1px solid #000000;
        
    margin5px 0px 0px 0px;
        
    padding5px;
        
    z-index1;
        
    background#FFFFFF;
    }    

    .
    top {
        
    positionabsolute;
        
    width100%;
        
    border-bottom1px dashed #000000;
        
    margin0px 0px 0px 0px;
        
    height40px;
        
    background-color#CCCC99;
        
    padding3px 0px 0px 0px;
    }

    .
    bottom {
        
    positionrelative;
        
    width100%;
        
    background#000000;
        
    margin0px 0px 0px 0px;
        
    height15px;
        
    bottom0px;
    }

    .
    bottomtitle {
        
    positionrelative;
        
    color#FFFFFF;
        
    floatleft;
        
    font-familyarialsans-serif;
        
    font-size14pt;
        
    font-weightbold;
        
    padding3px 0px 3px 3px;
    }

    .
    copyright {
        
    positionrelative;
        
    color#FFFFFF;
        
    floatright;
        
    font-familyverdanasans-serif;
        
    font-size8pt;
        
    padding3px 3px 3px 0px;
    }

    .
    sectiontitle {
        
    font-familyarialsans-serif;
        
    font-size16pt;
        
    font-weightbold;
        
    padding5px;

    Last edited by Fireman-x; October 17th, 2002 at 09:30 PM.

IMN logo majestic logo threadwatch logo seochat tools logo