Have a problem, I want to have on the left side a menu bar with a background color as long as page height is, but it is also calculating the header with it.
How to fix it.
Thanks Martijn
Here the result: http://www.promeb.nl/uren
Here the code
uren.css
Code: Select all
@charset "utf-8";
/* CSS Document */
/*
PRO Blauw => #062441
MEB Rood => #E32225
Automatisering Zwart => #231F20
Adres Grijs => #636466
*/
html, body {
margin:0; /* zero out margin */
padding:0; /* zero out padding */
height:100%; /* gives layout 100% height */
overflow:inherit; /* triggers 100% height in Opera 9.5 */
background-image: url('images/pattern.gif');
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
color: #231F20;
}
#wrapper {
position: relative; /* needed for footer positioning */
margin:0 auto; /* centers #wrapper */
height: auto!important; /* real browsers */
height: 100%; /* IE6 treats height as min-height */
min-height:100%; /* gives layout 100% height */
width:980px; /* centered div must be given a width */
background-image: url('images/center.png');/*
background-repeat: no-repeat;
background-position: left bottom; */
}
#header_left {
position: relative;
float: left;
width: 270px;
height: 100px;
background-image: url(images/header_left.jpg);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #636466;
left: 10px;
}
#header_right {
position: relative;
float: right;
width: 700px;
height: 100px;
background-image: url(images/header_right.jpg);
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #636466;
left: -10px;
}
#menu {
clear:both;
position: absolute;
top: 100px;
left: 10px;
width: 200px;
background-color: #F00;
height: 100%;
}
#main {
position: relative;
float: right;
left: -10px;
width: 725px;
border: 1px dotted #636466;
margin: 10px;
}
#footer {
clear: both;
position: absolute;
height:15px;
left: 10px;
width: 960px;
bottom: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #636466;
text-align: center;
font-size: 9px;
font-weight: bold;
padding-top: 4px;
overflow:hidden;
}
index.php
Code: Select all
<!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>Untitled Document</title>
<link href="uren.css" rel="stylesheet" type="text/css" />
</head>
</__body>
<div id="wrapper">
<div id="header_left"></div>
<div id="header_right"></div>
<div id="menu"></div>
<div id="footer"><?php
//set start to date your site was published
$startCopyRight = '2010';
// check if start year is this year
if(date('Y') == $startCopyRight) {
// it was, just print this year
echo '©' . $startCopyRight . ' Promeb Automatisering, Alle rechten voorbehouden';
} else {
// it wasnt, print startyear and this year delimited with a dash
echo '©' . $startCopyRight . '-' . date('Y') . ' Promeb Automatisering, Alle rechten voorbehouden';
}
?></div>
</div>
<__body>
</__html>