div height menu is wrong

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
mebots
Forum Members
Forum Members
Posts: 44
Joined: Sun May 23, 2010 10:22 pm

div height menu is wrong

Post by mebots »

Hello,

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 '&copy;' . $startCopyRight . ' Promeb Automatisering, Alle rechten voorbehouden';
} else {
// it wasnt, print startyear and this year delimited with a dash
    echo '&copy;' . $startCopyRight . '-' . date('Y') . ' Promeb Automatisering, Alle rechten voorbehouden';
}
?></div>
</div>
<__body>
</__html>
User avatar
M@rtijn
Power Poster
Power Poster
Posts: 706
Joined: Sat Nov 14, 2009 4:54 pm
Location: the Netherlands

Re: div height menu is wrong

Post by M@rtijn »

I guess you could use the faux columns technique

Information:
http://www.alistapart.com/articles/fauxcolumns/
http://pepijnkoning.nl/valse-kolommen-i ... x-columns/ (In dutch, easy to read)

Hope this helps
mebots
Forum Members
Forum Members
Posts: 44
Joined: Sun May 23, 2010 10:22 pm

Re: div height menu is wrong

Post by mebots »

Thanx, this is what I needed.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: div height menu is wrong

Post by Dr.CSS »

I find it's easiest to use an image for this, using the repeat-y call with a 1px slice of what you want...
Post Reply

Return to “Layout and Design (CSS & HTML)”