Nieuw lid |
|
Beste mensen,
Ik heb een probleem met de layout van mijn webpagina. Ik krijg het maar niet voor elkaar om een div (id=left_menu2, blauwe lijn) automatisch te laten groeien naar beneden zo groot als het venster is.
Wie kan me helpen, ik heb al vanalles geprobeerd.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>webpage</TITLE>
<STYLE title=currentStyle type=text/css media=screen>
/* basic elements */
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* specific divs */
#container {
width: 100%;
height: 100%;
margin: 0;
border: 1px dotted black;
}
#left_container {
width: 180px;
height: 100%;
float: left;
border: 1px dotted red;
}
#header {
display: block;
width: 180px;
height: 200px;
}
#top_logo {
width: 180px;
height: 60px;
}
#left_menu_container {
width: 180px;
border: 1px dotted green;
}
#left_menu1 {
background: transparent url(./pictures/menuleft.jpg) no-repeat top left;
width: 180px;
height: 260px;
}
#left_menu2 {
background: transparent url(./pictures/backleft.jpg) repeat-y top left;
width: 180px;
border: 1px dotted blue;
}
#right_container {
}
#top_menu {
background: transparent url(./pictures/head.jpg) repeat-x top left;
height: 150px;
}
#right_sub_container {
}
#left_selector_container {
width: 90px;
margin-bottom: 0px;
float: left;
}
#left_selector1 {
background: transparent url(./pictures/menuright8.jpg) no-repeat top left;
width: 90px;
height: 450px;
}
#left_selector2 {
background: transparent url(./pictures/backright.jpg) repeat-y top left;
width: 90px;
margin-bottom: 0px;
}
#content_container {
}
</STYLE>
</HEAD>
<BODY id=css-xyztec>
<DIV id=container>
<DIV id=left_container>
<DIV id=header>
</DIV>
<DIV id=top_logo>
</DIV>
<DIV id=left_menu_container>
<DIV id=left_menu1>leftmenu
</DIV>
<DIV id=left_menu2><p>Best viewed in 1024x768</p>
</DIV>
</DIV>
</DIV>
<DIV id=right_container>
<DIV id=top_menu>
topmenu
</DIV>
<DIV id=right_sub_container>
<DIV id=left_selector_container>
<DIV id=left_selector1>
</DIV>
<DIV id=left_selector2>
</DIV>
</DIV>
<DIV id=content_container>
content_container
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <STYLE title=currentStyle type=text/css media=screen> /* basic elements */ html { margin: 0; padding: 0; height: 100%; } body { margin: 0; padding: 0; height: 100%; width: 100%; } /* specific divs */ #container { width: 100%; height: 100%; margin: 0; border: 1px dotted black; } #left_container { width: 180px; height: 100%; float: left; border: 1px dotted red; } #header { display: block; width: 180px; height: 200px; } #top_logo { width: 180px; height: 60px; } #left_menu_container { width: 180px; border: 1px dotted green; } #left_menu1 { background: transparent url(./pictures/menuleft.jpg) no-repeat top left; width: 180px; height: 260px; } #left_menu2 { background: transparent url(./pictures/backleft.jpg) repeat-y top left; width: 180px; border: 1px dotted blue; } #right_container { } #top_menu { background: transparent url(./pictures/head.jpg) repeat-x top left; height: 150px; } #right_sub_container { } #left_selector_container { width: 90px; margin-bottom: 0px; float: left; } #left_selector1 { background: transparent url(./pictures/menuright8.jpg) no-repeat top left; width: 90px; height: 450px; } #left_selector2 { background: transparent url(./pictures/backright.jpg) repeat-y top left; width: 90px; margin-bottom: 0px; } #content_container { } <DIV id=left_menu_container> <DIV id=left_menu1>leftmenu <DIV id=left_menu2><p>Best viewed in 1024x768 </p> topmenu <DIV id=right_sub_container> <DIV id=left_selector_container> <DIV id=content_container> content_container
|