Archief - CSS: vert.center met float

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

Avalanched

Legacy Member
men 2 bloken willen niet verticaal centeren
dit is het voorbeeld
HTML BESTAND
HTML: 
<html>
<head>
<title>test</title>
<link href="xxxy.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="block-1">&nbsp;
  </div>
  <div id="block-2">&nbsp;
  </div>
</div>
</body>
</html>

CSS bestand
Code: 
body 
{
	background-color:#000000;
	text-align:center;
}
#container
{
	text-align:center;
}
#header 
{
	height: 100px;
}
#block-1
{
	background-color:#FFFFFF;
	float:left;
	text-align:left;
	height: 500px;
	width:500px;
}

#block-2
{
	float:left;
	margin-left: 5px;
	background-color:#FFFFFF;
	height: 200px;
	width: 200px;
}
S

Smoerf

Legacy Member
Code: 
#container{
	height:700px; /* of whatever het ook mag zijn van hoogte */
	position:absolute;
	top:50%;
	margin-top:-350px; /* de helft van je hoogte */
}
A

Avalanched

Legacy Member
ok leuk ma als ik dan men page resize om te testen op 800 600
dan blijft alles natuurlijk staan
enige vorm tot dynamiek ?
R

Radiance

Legacy Member
Nee hoor, dan kijk jij verkeerd, dit zet uw kaders altijd vertikaal gecentreerd, onafhankelijk van venstergrootte.
o

orez

Legacy Member
Avalanched zei:
ok leuk ma als ik dan men page resize om te testen op 800 600
dan blijft alles natuurlijk staan
enige vorm tot dynamiek ?
Klik om te vergroten...

50% = dynamisch... er wordt hier geen vaste waarde meegegeven hé ... enkel natuurlijk de hoogte van je object, maar dit kan niet anders hé ;)
A

Avalanched

Legacy Member
ik heb het ding ook horizontaal toegepast en dan blijft het staan :/
d

denk

Legacy Member
probeer eens deze EXACTE code
#welk_id_dan_ook {
position:absolute;
left:50%;
top:50%;
margin-left:-400px;
margin-top:-300px;
width:800px;
height:600px;
}

Dit zorgt ervoor dat je pagina ALTIJD gecentreerd staat, zowel horizontaal als verticaal, zelfs al verklein je je venster.
Hoop dat dit iets geholpen heeft :)
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