• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 4 posts ] 
Author Message
 Post subject: div height menu is wrong
PostPosted: Sun Jan 02, 2011 10:38 am 
Offline
Forum Members
Forum Members

Joined: Sun May 23, 2010 10:22 pm
Posts: 44
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:
@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:
<!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>


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: div height menu is wrong
PostPosted: Sun Jan 02, 2011 11:52 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Sat Nov 14, 2009 4:54 pm
Posts: 706
Location: the Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: div height menu is wrong
PostPosted: Sun Jan 02, 2011 7:28 pm 
Offline
Forum Members
Forum Members

Joined: Sun May 23, 2010 10:22 pm
Posts: 44
Thanx, this is what I needed.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: div height menu is wrong
PostPosted: Thu Jan 06, 2011 9:51 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12646
Location: Arizona
I find it's easiest to use an image for this, using the repeat-y call with a 1px slice of what you want...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 4 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
A2 Hosting