PDA

View Full Version : Vertical expanding menu



belsidaam
12-03-2006, 10:30 PM
Hey everybody
I have posted already in other threads about a typical page setup. One problem I have with my site is: it is not fluid (Thanks mwinter. I hope in the end you like it more;) ). So, I embarked on the very dangerous quest of getting things to resize with the user's wishes.

This is the "fix" page: http://www.christopheolinger.com/

And this is what I got after playing with CSS and gathering code from some sites:
http://www.christopheolinger.com/index2.php

The good thing is: Things expand horizontally. Only IE is not adapted yet because I cannot figure out the min-width hack in order to prevent things jumping. This is for another time.
My problem now is the vertical expansion of the left menu. I have 2 images. One which should not resize and the second one which should fill down until the footer. I know already that this is a difficult task. The div containing the small spacer image should expand with the content of the page.
My question is: How do I achieve this?

The current css is here: http://www.christopheolinger.com/mainstyle2.css

If somebody would help me, I promise that I will write a nice tutorial for othher noobs like me.

Thanks in advance

Christophe

Here is the code:
Page:



<!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>
<link rel="SHORTCUT ICON" href="pics/favicon.ico" />
<title>Homepage of Christophe Olinger</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mainstyle2.css" />
</head>

<body>

<!--MAINBOX-->
<div id="mainbox">

<!--HEADER-->
<div id="headerdiv">
<div id="left"><img id="headerleft" src="/pics/headerleft.png" alt="www.christopheolinger.com" /></div>
<div id="middle"><img id="headerlinker" src="/pics/headerlinker.png" /></div>
<div id="right"><img id="headerright" src="/pics/headerright.png" alt="" /></div>
</div>
<!--HEADER END-->

<!--LEFTMENU-->
<div id="leftmenudiv">
<img id="leftmenutop" src="/pics/leftmenutop.png" alt="Navigation" />
<div id="leftmenulinkerdiv"><img id="leftmenulinker" src="/pics/leftmenulinker.png" /></div>
</div>
<!--LEFTMENU END-->

<!--PAGE CONTENT-->
<div id="pagecontent">

<h1>This is the page of Christophe Olinger alias belsidaam</h1>
<h2>Dummy text</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nec augue a mauris dignissim molestie. Phasellus at felis eget mi suscipit suscipit. Fusce luctus ligula vitae purus. Sed faucibus tincidunt magna. Nulla accumsan lobortis orci. Integer convallis. Donec erat ipsum, rutrum ac, aliquam sed, porttitor sit amet, metus. Phasellus nonummy adipiscing magna. Maecenas lorem eros, feugiat nec, pretium in, dapibus in, nunc. Nunc at leo ut felis pharetra egestas. Suspendisse potenti. Duis libero.</p>
</div>
<!--PAGE CONTENT END-->

<div id="clearfooter"></div><!-- to clear footer -->

<!--END MAINBOX FOOTER FOLLOWS-->
</div>
<!--FOOTER-->
<div id="footerdiv">
<div id="footerleftdiv"><img id="footerleft" src="/pics/footerleft.png" alt="" /></div>
<div id="footerlinkerdiv"><img id="footerlinker" src="/pics/footerlinker.png" /></div>
<div id="footerrightdiv"><img id="footerright" src="/pics/footerright.png" alt="" /></div>
</div>
<!--FOOTER END-->
</body>
</html>

The CSS

html, body {height:100%} /*To set evrything to 100%. IE needs body firefox needs html*/
body {
background-color:#E0EBEF;
padding:0;
margin:0;
color: #000000; /*try to always set a foreground color*/
}
* {padding:0; margin:0} /*to have all browsers act the same*/

/*MAINBOX*/

#mainbox{
height:100%; /* this makes our mainbox 100%; all percentages are referred to the body,htrml 100%*/
min-height:100%; /*IE will expand element with contetn. other browsers not. this is why we need the min-height*/
margin-left:230px;/*for left column*/
margin-right:0px;/*for right column*/
background:#FFFFFF;
margin-bottom:-41px; /*for footer*/
color: #000000;
min-width:600px;
}
html>body #mainbox{height:auto;} /*for mozilla as IE treats height as min-height anyway we have set height and min-height to 100% this would not expand for browsers that know both. so we have to add a hack to make height auto IE does not recognize >*/


/*HEADER*/

#headerdiv{
height:119px;
color: #000;
text-align:center;
position:relative;
margin:0 0 0 -231px; /*the negative margin makes the footer expand the little 1px difference is important*/
min-width:600px;
}
/* mac hide \*/
* html #headerdiv{height:119px;he\ight:119px}/* height needed for ie to force layout*/
/* end hide*/


#left {
float:left
}
#middle {
width:34%;
height:119px;
float:left;
background-repeat:repeat-x;
background-image:url(pics/headerlinker.png);
}
#right {
float:right;
margin-left:325px;
margin-top:-119px;
postition:relative;
}
#headerright {
margin-left:-95px;
}

#leftmenudiv {
position:relative;/*ie needs this to show float */
width:230px;/* same as the left margin on #outer*/
float:left;
margin-left:-229px;/*must be 1px less than width otherwise won't push footer down outer has pos this has neg*/
padding-top:0px;/*needed to make room for header*/
left:-2px;/* push column into position because we want them to overlap physically to expand content*/

/*THIS IS THE PROBLEM*/

min-height: 100%;
height: auto;
background:pink; /*just to test ;-)*/

}

#leftmenutopdiv {
}
#leftmenulinkerdiv {
margin-left:-229px;
width:230px;
position:relative;
float:right;
height:100%;
background-image:url(/pics/leftmenulinker.png);
}

#leftmenudiv p {padding-left:2px;padding-right:2px} /*avoid broken box model in IE*/


/*FOOTER*/

#footerdiv {
min-width:828px;
width:100%;
clear:both;
height:22px;
color: #000000;
text-align:center;
position:relative;
margin-top:1px
}
* html #footerdiv {/*only ie gets this style*/
\height:22px;/* for ie5 */
he\ight:20px;/* for ie6 */
}
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #pagecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */


#footerleftdiv {
float:left
}
#footerlinkerdiv {
width:41%;
float:left;
background-repeat:repeat-x;
background-image:url(pics/footerlinker.png);
}

#footerrightdiv {
float:right;
margin-left:100px;
margin-top:-24px;
postition:relative;
}
#footerright {
margin-left:-95px;
}
/*PAGE CONTENT*/
#pagecontent {padding-bottom:20px;min-width:600px; position:relative;}

belsidaam
12-04-2006, 10:58 AM
Fxxck, the page is down. Have to change hosting

belsidaam
12-05-2006, 12:38 AM
Ok site is up again and I actually got the self expanding setup working. Horizontal and vertical plus auto expanding image for the left navigation.
Actually most of the code I found on DD. So thanks everybody.