PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
W

[divs] mijn rechter menu

Door Ward op 07-05-2005 17:18 gewijzigd op 07-05-2005 17:23
1.203 views
Hoi,

dit is mijn eerste site waar ik divs in gebruik en ik snap er niet zo veel van zou iemand me even kunnen uitleggen waarom mijn rechter menu geen 100% wilt zijn?

NU:
-------------
| |
-------------
| | | |
|-|
| |
|-|
-------------
| |
-------------

Moet worden:
-------------
| |
-------------
| | | |
|-| | |
| | | |
|-| | |
-------------
| |
-------------


Index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST SITE!</title>
<link rel="stylesheet" href="styles/v1.css" />
<script type="text/javascript">

</script>
</head>
<body>
	<div id="backpanel">
		<div id="banner"></div>
		<div id="menu_left">
			<div class="leftmenu">

				<div class="header"><h2><span class="span1">  + menu1 </span></h2></div>
				<div class="fill">

							BLAAT BLAAT menu1

				 </div>

				<div class="header"><h2><span class="span1">  + menu2 </span></h2></div>
				<div class="fill">

							BLAAT BLAAT menu2

				 </div>

				<div class="header"><h2><span class="span1">  + menu3 </span></h2></div>
				<div class="fill">

							BLAAT BLAAT menu3

				 </div>
 
			</div>
		</div>

		<div id="fill">
			<div id="content">
				<?php include("content.php"); ?>
			</div>
		</div>

		<div id="menu_right">
			<div class="rightmenu">

				<div class="header"><h2><span class="span1">  + menu4 </span></h2></div>
				<div class="fill">

							BLAAT BLAAT menu4

				</div>			
			</div>
		</div>
		<div id="footer"></div>
	</div>	
</body>
</html>



v1.css



/***********************************************************************************************/
/* IDs */
/***********************************************************************************************/
#banner , #backpanel , #footer 
{
	display:block;
	width:900px;
}

#backpanel
{	
	position:absolute;
	left:50%;
	top:50px;
	
	height:100%;
	
	margin-left:-400px;

	background-image:url(../images/v1/fill.jpg);
	background-repeat:repeat-y;
}

#banner
{
	height:150px;
	float:center;
	
	background-image:url(../images/v1/header.png);
	background-color:#000000;
	background-repeat:no-repeat;
}

#menu_left
{
	display:block;
	width:190px;
	height:auto;
	float:left;
	background-color:#000000;
}

#menu_right
{
	display:block;
	width:190px;
	height:auto;
	float:right;
	background-color:#000000;
}

#content
{
	display:block;
	width:480px;

	margin-left:20px;
	margin-right:0px;
	margin-top:10px;
	margin-bottom:0px;

	font-family: verdana;
	font-size: 10px;
	color: #FFFFFF;

	height:auto;
	float:center;
	background-color:#000000;
}

#fill
{	
	display:block;
	width:520px;
	height:auto;
	
	float:left;
	background-color:#000000;
}

#footer
{	
	height:25px;
	float:left;

	background-image:url(../images/v1/footer.png);
	background-color:#000000;
	background-repeat:no-repeat;
}

/***********************************************************************************************/
/* Styles */
/***********************************************************************************************/
body
{
	background-color:black;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	width:100%;
	height:100%;
}

span.navb
{
	margin-left:20px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	
	padding:0px 0px 0px 0px;

	border-left:0px;
	border-top:0px;
	border-right:0px;
}
h1,h2
{
	display:block;

	margin-left:10px;
	margin-right:10px;
	margin-top:0px;
	margin-bottom:0px;
	
	padding:0px 0px 0px 0px;

	border-left:0px;
	border-top:0px;
	border-right:0px;
	
}

h1 span.span1 , h1 span.span2 ,h1 span.span3
{
	display:block;
	height:16px;
	
	font-family:verdana;
	font-size:10px;
	font-weight:500;
	color:#FFFFFF;
}

h1 span.span1
{

}

h1 span.span2
{

}

h1 span.span3
{

}

h2 span.span1 , h2 span.span2 ,h2 span.span3
{
	display:block;
	height:16px;
	
	font-family:verdana;
	font-size:16px;
	font-weight:900;
	color:#FFFFFF;
}

h2 span.span1
{

}

h2 span.span2
{

}

h2 span.span3
{

}


/***********************************************************************************************/
/* CLASSES */
/***********************************************************************************************/

div.leftmenu
{
	display:block;
	width:190px;
	float:left;
}

div.rightmenu
{
	display:block;
	width:190px;
	float:right;
}

div.leftmenu div.header
{
	height:25px;
	width:190px;
	background-image:url(../images/v1/menu_header.png);
	background-color:#000000;
	background-repeat:no-repeat;
}

div.rightmenu div.header
{
	height:25px;
	width:190px;
	background-image:url(../images/v1/menu_header.png);
	background-color:#000000;
	background-repeat:no-repeat;

}
div.leftmenu div.fill
{
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;

	width:180px;
	height:auto;

	font-family:verdana;
	font-size:10px;
	font-weight:500;
	color:#FFFFFF;

	background-image:url(../images/v1/menu_fill.png);
	background-color:#000000;
	background-repeat:repeat-y;
}

div.rightmenu div.fill
{
	margin-left:10px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:-10px;

	width:180px;
	height:auto;

	font-family:verdana;
	font-size:10px;
	font-weight:500;
	color:#FFFFFF;

	background-image:url(../images/v1/menu_fill.png);
	background-color:#000000;
	background-repeat:repeat-y;
}

a.navlink
{  
	color:#FFFFFF;
}

a.navlink:active
{
	text-decoration: none;
}

a.navlink:hover
{
	text-decoration: none;
}

input.invisible
{  
	margin-left:20px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;

	background-color: #000000;
	border-style: inset;
	border-top: 1px solid #000000;
 	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	color: #FFFFFF;
	font-family: verdana;
	font-size: 10px;
}

/* error.php */
div.error
{	
	display:block;
	width:480px;

	margin-left:20px;
	margin-right:20px;
	margin-top:0px;
	margin-bottom:0px;

	font-family: Lucida Console;
	font-size: -4;
	color: #FFFFFF;

	height:auto;
	float:left;
	background-color:#000000;
}

*/ news.php */

div.mainbox
{
	font-family: verdana;
	font-size: 10px;
	color: #FFFFFF;

	height:auto;
	float:center;
	background-color:#000000;
}

div.mainbox,div.header
{
	font-family:verdana;
	font-size:10px;
	font-weight:500;
	color:#FFFFFF;

	height:25px;
	width:480px;
	background-image:url(../images/v1/main_header.png);
	background-color:#000000;
	background-repeat:no-repeat;
}

div.mainbox,div.fill
{
	width:480px;
	height:auto;

	font-family:verdana;
	font-size:10px;
	font-weight:500;
	color:#FFFFFF;

	background-image:url(../images/v1/main_fill.png);
	background-color:#000000;
	background-repeat:repeat-y;
}

div.mainbox,div.footer
{
	font-family:verdana;
	font-size:10px;
	font-weight:500;
	color:#FFFFFF;

	height:25px;
	width:480px;
	background-image:url(../images/v1/main_footer.png);
	background-color:#000000;
	background-repeat:no-repeat;
}


Edit: Sry voor de slordige tekeningetjes bovenaan en de wat slordige layout van deze post
? Onbekende gebruiker
07-05-2005 18:27
Ik denk dat je te maken hebt met IE probleem

Zet boven aan in je css

html, body {
height: 100%;
}

IE denkt namelijk dat een pagina niet 100% hoog is
W Ward
07-05-2005 18:31
Dit is geen IE probleem want het is juist hetzelfde in FF

html, body {
height: 100%;
}

bovenaan mijn css zetten lost het probleem niet op. :'(
? Onbekende gebruiker
07-05-2005 18:44
#menu_right
{
display:block;
width:190px;
height:auto;
float:right;
background-color:#000000;
}

Moet je dan wel height: 100% van maken.
Over het hoofd gezien
W Ward
07-05-2005 19:00
alright! dat is het! :)

kdenk dak een uurtje teveel achter de pc zit :p

bedankt Webmakerij!

Reageren

Inloggen om te reageren