Problem with CSS

**Insane_Edna** · Oct 22, 2003 20:40

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.

**mcgrathin** · Oct 22, 2003 23:40

u just give .5% increase to the front class,it may work.just try

**BenANFA** · Oct 23, 2003 03:20

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%).

**Insane_Edna** · Oct 23, 2003 10:08

Setting the body to 95% worked great. Thanks for all your help.

User Tag List

Thread: Problem with CSS

Thread Tools

Display

Problem with CSS

Bookmarks

Bookmarks

Posting Permissions