SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast Insane_Edna's Avatar
    Join Date
    Oct 2003
    Location
    Alberta, Canada
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with CSS

    I am having a problem with my CSS, what I am trying to achieve is a black box that stretches the height of the browser, and on top a grey box that also stretches the length of the browser. When I use pixels to set the height it works, but with percentages it doesn't. I want to use percentages so that when the browser is resized the boxes (which will be filled with content later) will remain a constant size. Any help you can give would be appreciated. Here is my 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>
    <title>Taber Citizens On Patrol</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <style type="text/css">

    body
    {
    background-color: #003366;
    }

    .shadow
    {
    position: absolute;
    top: 5%;
    right: 5%;
    bottom: 0%;
    left: 19.5%;
    width: 76%;
    height: 95%;
    background-color: black;
    }

    .front
    {
    position: absolute;
    top: 7%;
    right: 5%;
    bottom: 0%;
    left: 21.5%;
    width: 75%;
    height: 93%;
    background-color: #999999;
    }

    ul#mainnav
    {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #999999;
    position: absolute;
    top: 7%;
    left: 0;
    width: 20%;
    }

    ul#mainnav li a:link, ul#mainnav li a:visited
    {
    text-decoration: none;
    display: block;
    width: 88%;
    padding: 6px 6%;
    background-color: #5C6F90;
    font: bold 10pt/1.5 arial, sans-serif;
    color: #fff;
    }

    ul#mainnav li
    {
    border-top: 1px solid #003366;
    }

    ul#mainnav li a:hover
    {
    background-color: #000044;
    color: #CCCCCC;
    }

    ul#mainnav ul.subnav
    {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    ul#mainnav ul.subnav li
    {
    border-top: 0 none;
    padding-left: 1.5em;
    }

    ul#mainnav ul.subnav li a:link, ul#mainnav ul.subnav li a:visited
    {
    padding: 1px;
    font: bold 0.7em/1.5 verdana, sans-serif;
    color: #5C6F90;
    background-color: transparent;
    }

    ul#mainnav ul.subnav li a:hover
    {
    color: #43616B;
    background-color: transparent;
    text-decoration: underline;
    }

    </style>

    </head>
    <body>

    <div class="shadow"> </div>
    <div class="front"> </div>


    <ul id="mainnav">
    <li><a href="link1.html">Link 1</a></li>
    <li><a href="link2.html">Link 2</a></li>
    <li><a href="link3.html">Link 3</a></li>
    <ul class="subnav">
    <li><a href="sublink1.html">Sub Link 1</a></li>
    <li><a href="sublink2">Sub Link 2</a></li>
    </ul>
    </li>
    <li><a href="link4.html">Link 4</a></li>
    <li><a href="link5.html">Link 5</a></li>
    <li><a href="Contact.html">Contact Us</a></li>
    <li><a href="link6.html">Link 6</a></li>
    <li><a href="link7.html">Link 7</a></li>
    </ul>

    </body>
    </html>


    I hope I have explained my problem well enough for everyone to understand. Thanks for your help, in advance.

  2. #2
    SitePoint Enthusiast mcgrathin's Avatar
    Join Date
    Oct 2003
    Location
    india
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u just give .5% increase to the front class,it may work.just try

  3. #3
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem you are having is that height: 100% (or any percentage) sets the height of the element as a percentage of it's parent.

    The "shadow" and "front" divs are set to ~95% height but that is 95% of there parent, the body element. Since the body element just contains a ul it isn't very height. Try setting the height of the body element too (to something like 95%).

  4. #4
    SitePoint Enthusiast Insane_Edna's Avatar
    Join Date
    Oct 2003
    Location
    Alberta, Canada
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting the body to 95% worked great. Thanks for all your help.


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
  •