Archief - stretch een relative div over de hele lengte

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
:

::SaBeR::

Legacy Member
Hai,

Zoals je HIER kan zien staat er links van het menu een lijn schaduw. Deze lijn zou zich over de gehele lengte moeten uitstrekken, maar doet dit niet. De lijn staat als achtergrondafbeelding in de div 'menuwrapper'. Ik kan de div wel rekken met pixelwaardes, maar dat is niet echt optimaal natuurlijk, aangezien hij dan de lengte van de langste pagina moet hebben of een andere ID op elke pagina.
De body staat op 100%, de wrapper waar de div instaat ook, en de div zelf ook. Ik veronderstel dat ik iets fout doe met de positions, maar ik heb geen idee wat.

Alvast heel erg bedankt

Michael

CSS:
Code: 
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  margin: 0px;
  height:100%;
}

p {
  line-height: 1.5em;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:14px;
}

h1 {
	color: #39b54a;
	font-size:24px;
	font-family:"Times New Roman", Times, serif;
	font-style: normal;
	font-weight: lighter;
}

h2 {
	color: #000000;
	font-size:24px;
	font-family:"Times New Roman", Times, serif;
	font-style: normal;
	font-weight: lighter;
}

h3 {
	color: #000000;
	font-size:14px;
	font-family:"Times New Roman", Times, serif;
	font-style: oblique;
	font-weight: bold;
	vertical-align:top;
}

table {
	color: #000000;
	font-size:14px;
	font-family: Georgia, "Times New Roman", Times, serif;	font-style: normal;
	font-weight: lighter;
	vertical-align: top;
}

td {
	padding: 5px;
	vertical-align: top;

}

ul.menu, ul.menu ul {
  list-style-type:none;
  margin-left: 20px;
  padding-left: 0;
  width: 15em;
}

ul.menu a {
  display: block;
  text-decoration: none;	
}

ul.menu li {
  margin-top: 1px;
}

ul.menu li a {
  color: #464646;	
  padding: 0.25em;
  border-width: 2px;
  border-bottom-style: solid;
  border-color: #f9f9f9;
}

ul.menu li a:hover {
  font-weight: bold;
}

ul.menu li ul li a {
  color: #2d2d2d;
  font-size: 0.7em;
  padding-left: 20px;
  border-bottom: 0px;
}

ul.menu li ul li a:hover {
  padding-left: 15px;
}

.ortho a:hover {
  padding-left: 15px;
  border-left: 5px #39b54a solid;
}
		
		.esthm a:hover {
		  padding-left: 15px;
		  border-left: 5px #6cccf8 solid;
		}
		
		.esthv a:hover {
		  padding-left: 15px;
		  border-left: 5px #f699f5 solid;
		}

.onco a:hover {
  padding-left: 15px;
  border-left: 5px #b80000 solid;
}

.preproth a:hover {
  padding-left: 15px;
  border-left: 5px #4d97ff solid;
}

.wrapper{
	margin: 0 auto;
	width: 1000px;
	height: 100%;
}

.menuwrapper {
	position:relative;
	width: 200px;
	height: 100%;
	float:left;
	padding-top: 165px;
	background-color:#ffffff;
	background-image:url(images/shadowline.jpg);
	background-repeat:repeat-y;
	z-index:0
	}

.contentwrapper {
	position:relative;
	display:inline;
	margin-top: 0px;
	width: 800px;
	height: 100%;
	float:left;
	background-image:url(images/bg.jpg);
	background-repeat: no-repeat;
	background-position:top;
	background-color: #f5f5f5;
	z-index:1;
	border-top: 5px #ededed solid;;
}


				.contentwrapper-ortho {
					position:relative;
					display:inline;
					margin-top: 0px;
					width: 800px;
					height: 100%;
					float:left;
					background-image:url(images/ortho-bg.jpg);
					background-repeat: no-repeat;
					background-position:top;
					background-color: #f5f5f5;
					z-index:1;
					border-top: 5px #39b54a solid;
				}
				
				.contentwrapperesth	 {
					position:relative;
					display:inline;
					margin-top: 0px;
					width: 800px;
					height: 100%;
					float:left;
					background-image:url(images/esth-bg.jpg);
					background-repeat: no-repeat;
					background-position:top;
					background-color: #f5f5f5;
					z-index:1;
					border-top: 5px #ffe300 solid;
				}
				
				.contentwrapperonco {
					position:relative;
					display:inline;
					margin-top: 0px;
					width: 800px;
					height: 100%;
					float:left;
					background-image:url(images/onco-bg.jpg);
					background-repeat: no-repeat;
					background-position:top;
					border-top: 5px #4d97ff solid;
					z-index:1;
				}
				
				.contentwrapperpreproth {
					position:relative;
					display:inline;
					margin-top: 0px;
					width: 800px;
					height: 100%;
					float:left;
					background-image:url(images/preproth-bg.jpg);
					background-repeat: no-repeat;
					background-position:top;
					border-top: 5px #b80000 solid;
					z-index:1;
				}

.textwrapper {
	margin-top: 350px;
	margin-left: 40px;
	margin-right: 65px;
}

.disclaimer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	text-align: right;
	padding-top: 8px;
	background-color: #ffffff;
}

.pagename {
	margin-top: 130px;
	margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #cccccc;
	clear: none;
	font-weight: lighter;
	position: absolute;
	top: 515px;
	z-index: 1;
}


.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
c

coldvinc

Legacy Member
het pobleem is dat je schaduw zich in de div bevind van het menu, en deze div is maar zo lang is het menu omdat er geen hoogte aan meegegeven is.

Je kan proberen om de schaduw aan de wrapper mee te geven.
:

::SaBeR::

Legacy Member
Kan ik de div van het menu niet zo lang als de bovenliggende div maken?
A

Accordis

Legacy Member
Dat kan, maar werkt dan niet in alle browsers. Het beste is om een div rond de hele content te maken (bv. "wrapper") en deze achtergrond te geven, dit werkt altijd :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan