Archief - sitehoogte automatisch aanpassen

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.
s

sarnath

Legacy Member
Ik zit met het volgende probleem, als de content van mijn site hoger wordt dan gaat enkel deze div mee omlaag terwijl ik mijn volledige site dan omlaat wil krijgen, iemand enig idee hoe ik dit kan fixen?

HTML: 
<!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" xml:lang="nl" lang="nl">  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />

<link rel="StyleSheet" href="stijl.css" type="text/css" title="layout" />

</head>

<body>
<div class="total">
	<div class="menu">
		<a href="index.html">HOME</a>
	</div>

	<div class="sitecontent">
		<div class="header">&nbsp;</div>
		<div class="sitecontent_text">
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
			tekst<br />
		</div>
	</div>

	<div class="promo">
		promo
	</div>
</div>
</body>
</html>

HTML: 
a:link{color:#FFFFFF;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:visited{color:#FFFFFF;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:hover{color:#C0C0C0;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:active{color:#FFFFFF;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}

body{
	color:#C0C0C0;
	font-family:Verdana;
}

.total{
	border:1px black solid;
	width:1024px;
	height:768px;
	margin-left:auto;
	margin-right:auto;
}

.menu{
	width:145px;;
	height:763px;
	background-image:url("menu_bg.jpg");
	float:left;
	color:#FFFFFF;
	font-weight:bold;
	padding-left:5px;
	padding-top:5px;
}

.sitecontent{
	width:674px;
	height:768px;
	background-color:yellow;
	float:left;
}

.sitecontent_text{
	width:669px;
	height:613px;
	min-height:613px;
	background-color:green;
	padding-left:5px;
	padding-top:5px;
}

*>.sitecontent_text{
	height:auto;
}
.promo{
	width:200px;
	height:768px;
	background-color:green;
	float:left;
}

.header{
	width:768px;
	height:150px;
	background-image:url("logo.jpg");
}
s

sarnath

Legacy Member
adrianhates zei:
bedoel je nu dat uw menu ook moet meegaan?
Klik om te vergroten...
inderdaad, alsook de rechterkant, dus indien de middelste content de hoogte overstijgt, moet al de rest meeschuiven in plaats van te blijven staan.
X

Xavez

Legacy Member
maak eens een mock-up van wat je wil? Ik begrijp er helemaal niets van :).
s

sarnath

Legacy Member
hier is een algemenere voorstelling van wat ik bedoel:

HTML: 
<!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" xml:lang="nl" lang="nl">  
<head>
<style type="text/css">
div.spacer {
clear: both;
}
.total{
	width:1024px;
	border:3px red solid;
	height:768px;
}
*>.total{
	height:auto;
}
.menu{
	background-color:yellow;
	height:100%;
	width:150px;
	float:left;
}

.content{
	background-color:green;
	height:100%;
	width:724px;
	float:left;
}
*>.content{
	height:auto;
}

.promo{
	background-color:blue;
	height:100%;
	width:150px;
	float:left;
}
</style>
</head>

<body>
<div class="total">
	<div class="spacer"><!-- No Content --></div>
	<div class="menu">
		<a href="index.html">HOME</a>
	</div>

	<div class="content">
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
	</div>

	<div class="promo">
		promo
	</div>
	<div class="spacer"><!-- No Content --></div>
</div>
</body>
</html>

De site heeft dus standaard een resolutie van 1024*768, nu kan het dus zijn dat de content div zoveel content heeft dat de hoogte meer zal zijn dan 768px, dus moet deze in hoogte meeschuiven.
Dat is op zich geen probleem, wat wel een probleem is dat de linkse en rechts div "menu" en "promo" niet geheel opvullen, maar enkel waar er tekst staat, terwijl deze ook moeten meeschuiven.

zo is wel alles gevuld en zo zou het moeten zijn, maar dan tot onder de tekst, dus dat de volledige site meeschuift naar onder tot aan de tekst en niet zoals in bovenstaand voorbeeld enkel het middelste gedeelte.

HTML: 
<!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" xml:lang="nl" lang="nl">  
<head>
<style type="text/css">
div.spacer {
clear: both;
}
.total{
	width:1024px;
	border:3px red solid;
	height:768px;
}

.menu{
	background-color:yellow;
	height:100%;
	width:150px;
	float:left;
}

.content{
	background-color:green;
	height:100%;
	width:724px;
	float:left;
}

.promo{
	background-color:blue;
	height:100%;
	width:150px;
	float:left;
}
</style>
</head>

<body>
<div class="total">
	<div class="spacer"><!-- No Content --></div>
	<div class="menu">
		<a href="index.html">HOME</a>
	</div>

	<div class="content">
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
		text<br />
	</div>

	<div class="promo">
		promo
	</div>
	<div class="spacer"><!-- No Content --></div>
</div>
</body>
</html>
s

sarnath

Legacy Member
hmz min of meer, maar als ik dan een voorbeeldje maak zie je dat de text van het menu links en de tekst van de main rechts niet langs elkaar staan, maar telkens onder elkaar worden uitgelijnd.

HTML: 
<html>
<head>
<style type="text/css">

body {
text-align: center; /*voor IE*/
}

#container{
width: 1024px;
text-align: left; /*voor IE */
background: #bbff02 url(2faux.gif);
overflow: hidden;
margin: 0 auto;
}

#header{
	background-image:url("logo.jpg");
	height:150px;
}

#left {
width:200px;
color:#000;
}
#main {
margin-left:200px;
color:#000;
background-color:#C0C0C0;
padding-left:5px;
}
</style>
<body>

<div id="container">
<div id="header">
&nbsp;
</div>
<div id="left">
test
</div>
<div id="main">
Deze kolom bevat de hoofdinhoud
</div>
</div>

</body>
</html>

(ook best effe die gif downloaden van bovengegeven link)
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