biznuge
January 13th, 2007, 08:52 AM
Here Goes. Works in IE and FF. included a new id called "cheatingzlayer" which provides a 100% high left hand bar in the blue color, and added this a first div in the page. main contant div has a z-index set a level above this layer, providing the illusion of a 100% content left hand...
I consider this cheating really, but I couldn't seem to find a way to get that lhm to flow to the bottom of the main content div... :2c:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu page</title>
<style type="text/css">
html, body
{
min-height:100%;
margin:0;
padding:0;
font-family:verdana, arial, helvetica, sans-serif;
font-size:8pt;
height: 100%;
width: 100%;
top: 134px;
}
#cheatingzlayer{
z-index:1;
position:absolute;
width:185px;
height:100%;
background-color: #1958b7;
}
div#wrapper
{
z-index:2;
min-height:100%;
width:100%;
position:relative;
height:auto !important; /* for modern browsers */
height:100%; /* for IE */
top:0;
background-image: url(images/bg.gif);
}
#content
{
margin:0;
padding:0;
width:100%;
height:auto;
padding-bottom:40px;
}
#bottom
{
padding:0;
margin:0;
position: absolute;
bottom: 0;
width: 100%;
background: #9ED105;
height: 20px;
border-top:1px solid #000;
}
#top
{
margin:0;
padding:0;
width: 100%;
height: 134px;
border-bottom:1px solid #1862B8;
background-color: #9ED105;
}
#ddblueblockmenu{
height: 100%;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu li a{
display: block;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
}
* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
width: 169px; /*185px minus all left/right paddings and margins*/
}
#ddblueblockmenu li a:hover {
background-color: #00509F;
border-left-color: ##00509F;
}
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
padding-top: 1px;
padding-right: 0;
padding-bottom: 1px;
width: 180px;
height: 100%;
}
</style>
</head>
<body>
<div id="cheatingzlayer"></div>
<div id="wrapper">
<div id="top"> </div>
<div id="content">
<div id="ddblueblockmenu">
<div class="menutitle">Menu 1</div>
<ul>
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
</ul>
<div class="menutitle">Menu 2</div>
<ul>
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
</ul>
<div class="menutitle">Menu 3</div>
<ul>
<li><a href="#">option 1</a></li>
<li><a href="#">option 2</a></li>
<li><a href="#">option 3</a></li>
</ul>
</div>
</div>
<div id="bottom"> </div>
</div>
</body>
</html>
Hope this helps anyhoo!!! :player: