Archief - HTML: problemen met divs

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

babbelut

Legacy Member
Ik zou het volgende willen:


bovenaan de pagina een fixed div.
daaronder een div die de rest van de pagina in beslag neemt.


dus wanneer deze div te klein is voor de tekst die erin staat, moet de div een scroll krijgen en niet de pagina.
wanneer er te weinig tekst staat om de hele pagina op te vullen, moet de div toch de rest vullen.
deze twee divs zouden 600px breedt moeten zijn en gecentreerd.

sorry, ik probeerde al alles...
k

kRa

Legacy Member
overflow: scroll;

toevoegen bij die div die scroll moeten hebben
b

babbelut

Legacy Member
oL|Pulse zei:
overflow: scroll;

toevoegen bij die div die scroll moeten hebben
Klik om te vergroten...

ja, dan scrollt hij, maar als je je bovenste div fixed zet, hoe stel je die daaronder dan in dat hij NOOIT groter wordt dan t einde van je browser? en dan hij die overflowscroll toont? lukt me dus niet
D

Deefees

Legacy Member
En je zal je tweede div toch een vaste hoogte moeten geven, hem automatisch laten aanpassen met de beschikbare hoogte is praktisch onmogelijk met html/css dacht ik.

Of mss met height: ..%
al lang ni meer gebruikt hier :unsure:
mss nie helemaal strict dat.
k

kRa

Legacy Member
edit: nevermind (blijkt ni te werke :p)

kunde u beide divs ook ni in ne container zette ofzo
b

babbelut

Legacy Member
jwel, maar als ge vb ene hoogte op 150px, en je laat de andere hoogte weg, zal deze net zo groot zijn als de tekst die erin komt. als je er procenten invult (neem nu 100%) dan maakt hij deze de grootte van uw overgebleven ruimte + nog eens 150px naar onder extra...
D

Deefees

Legacy Member
Wel ja, als je 100% gebruikt neemt hij de max hoogte, maar negeert hij de grootte van de anderen. Hij zal die niet aftrekken.
Wat je mss kan doen is ipv 100%, 90% nemen, maar dan geef je mss naar die met 150px ook een procent, bv 20 - 80. Dat je altijd een zekere verhouding behoud.
En als je een overkoepelende div neemt met hoogte 100%, dan doet hij dat ook? Dus

Code: 
<div id="wrapper">
<div id="top">
</div>
<div id="inhoud">
</div>
</div>

met div wrapper op 100% hoogte, en top op 150px, en inhoud op 100%.
Anee ja da zal tzelfde geven :sop:

Tja, enige daj kan doen is met een ander procent werken, en mss in verhouding met je bovenste dus. Maar da zal dan mss wel fucked up zijn in bepaalde resouties/browsers.
Anders moet je met javascript werken.

Edit: die procenten doen nie veel bij mij. probeer anders een max & min-height in px op je 2e div te zetten. Met een waarde die gemiddeld goed is vr alle resoluties.. meer zal je niet kunnen doen vrees ik.
b

babbelut

Legacy Member
maar procenten da fuckt, want dan klopt mijn logo in de bovenste div voor geen kanten.

wat er moet gebeuren is:

- divs max 800px breedt vb (om in alle browsers en resoluties proper te zijn)
- bovenaan logo, daaronder inhoud
- browser mag NOOIT zelf een scrollbalk geven, da moet de onderste div doen

van mij moet niets, maar hoe krijgde bovenstaande punten er anders in :s
D

Deefees

Legacy Member
Code: 
*{
	margin: 0px;
	padding: 0px;
}

body{
	}

#wrapper{
	max-height: 600px;
	position: relative;
	margin: 0px auto;
	width: 800px;
	}
	
#top{
	height: 150px;
	position: absolute;
	width: 800px;
	}
	
#inhoud{
	top: 150px;
	height: 430px;
	position: absolute;
	width: 800px;
	overflow: scroll;
	}

Je zal zo iets moeten nemen, als er dan mensen met een nog lagere resolutie kijken zal er wel scroll zijn, maar dat komt praktisch niet meer voor.. Je kan mss zelfs nog wat hoger nemen als height van je #inhoud. Maar op deze hoogte scrolt hij bij mij net niet (laptop resolutie: 1280 * 800..)
b

babbelut

Legacy Member
goh, is da echt de meest ideale manier :s
btw.. kan ik met een tabel er voor zorgen dat t zich lekker uitrekt? ;)
T

Tiet

Legacy Member
Ik heb dit opgelost door de onderste div onder de bovenste div te schuiven en dan het eerste element van de onderste div een margin-top van 150px te geven.
Code: 
html {
	background-color: #000;
	height: 100%;
}
body {
	width: 800px; height: 100%;
	margin: 0 auto;
}
#top {
	width: 800px; height: 150px;
	position: absolute;
	z-index: 5;
	background-color: #333;
}
#bottom {
	width: 800px; height: 100%;
	position: absolute;
	z-index: 1;
	background-color: #666;
	overflow: auto;
}
#bottom p {
	margin: 0;
	margin-top: 150px;
}

en de html:

Code: 
<html>
<head><title></title></head>
<body>
<div id="top">
	Hier het logo.
</div>
<div id="bottom">
	<p>
		Hier de inhoud.
	</p>
</div>
</body>
</html>

Online voorbeeld: Klik!

Het enige probleem dat ik (momenteel) zie is dat de scrollbalk niet volledig te zien is.
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