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 Coder
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need help with div color (css)

    I'm still pretty new to css (and website building in general for that matter) and I'm trying to create a css layout. However I'm running into a problem. I want the light gray color of the css frames to stretch the whole length of the page except for just 10px at the bottom of the screen.
    I've been experimenting with the bottom and height properties, but nothing is working the way I want it to.
    I can set the height of the frame to a specific px but then I'm going to have to use a different code for every page because every page will have a different amount of text, and I want to be able to link to the same css file for most, if not all pages. I can take out the height and bottom properties, but then the gray color just continues for however long the text does.


    So here's what I've ended up with: http://toucanets.freehosting.net/testpagea.html

    Here's the CSS:

    body{
    margin: 10px;
    padding: 0;
    border: 0;
    overflow: auto;
    height: 100%;
    max-height: 100%;
    background:#99FFCC;


    }

    #header{
    position: relative;
    margin: 0;
    Width: 100%;
    height: 161px;
    overflow: hidden;
    background:#EFEFF3;
    color:#000000;

    }

    #contents {

    position:absolute;
    top:162px;
    left:200px;
    right:75px;
    background:#EFEFF3;
    color:#000000
    }




    #rightframe {

    position: absolute;
    width:190px;
    top:162px;
    right:10px;
    background:#EFEFF3;
    color:#000000
    }



    #menu{
    top: 120;
    left: 0px;
    right: 200px;
    background:#EFEFF3;
    color:#000000;
    }


    EDIT:


    Basically I want to be able to do this (except 10px of that green coloration on the bottom, and with out
    the extra scroll bar that shows up in ie)

    http://toucanets.freehosting.net/main2.html

    but not have the text bleed into green space (rather I want the gray to continue, just leaving 10px at the bottom) as with when the css is used on this page for example:

    http://toucanets.freehosting.net/haltest.html


    and here's that css:


    body{
    margin: 0px;
    padding: 0;
    border: 0;
    overflow: auto;
    height: 900px;
    max-height: 100%;
    background:#99FFCC;
    margin-right:10px;


    }

    #header{

    position: relative;
    height: 161px;
    overflow: hidden;
    background:#EFEFF3;
    color:#000000;
    margin-top:10px;
    margin-right:0;
    margin-left:10px;

    }

    #contents {
    position:absolute;
    top:162px;
    left:200px;
    right:75px;
    height:100%;
    margin-top:0;
    margin-right:0;
    margin-left:0;
    margin-bottom:10px;
    background:#EFEFF3;
    color:#000000;
    }




    #rightframe {
    position:absolute;
    height:100%;
    top:162px;
    right:10px;
    margin-top:0;
    margin-right:10px;
    margin-left:0;
    margin-bottom:10px;
    background:#EFEFF3;
    color:#000000;
    }





    #menu{
    top: 120px;
    left: 10px;
    right: 200px;
    background:#EFEFF3;
    color:#000000;
    margin-top:0;
    margin-right:0;
    margin-left:10px;
    margin-bottom:10px;
    height:100%;
    }
    Last edited by asurademon; 10-28-2008 at 02:48 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Never use absolute positions to make the basic layout. Check http://www.bonrouge.com/3c-hf-fluid.php for a good 3 column layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So using a position other than absolute will fix the issue of how far down the page the background color of each element goes? I guess I'll mess around with the positions I'm using a bit and see.

    Anyhow got rid of the scroll bar problem:
    http://toucanets.freehosting.net/main3.html

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I guess I'll mess around with the positions I'm using a bit and see.
    Have you check that tutorial in my above post?

    PS: table are very bad for layout.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    will do when I'm more awake. Thanks for the links.


  •  

    Posting Permissions

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