Archief - CSS: verticale & horizontale alignment

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

meRVy

Legacy Member
Nadat mij hard werd aangeraden om alleen css te hanteren om dingen te plaatsen in plaats van tabellen heb ik een kleine poging gewaagd.
de 'under construction pagina' !

bedoeling was om dat logo en die tekst altijd in het midden te tonen gelijk welke resolutie. Dit wil nu maar niet lukken, (alleen horizontaal wordt hij gecentered)
het zou ook de bedoeling moeten zijn om de tekst in verticaal te centeren, maar als ik er een vertical-align:middle tussensteek verandert er niks.

Als ik de xhtml doctype verwijder lukt het wel, maar dat verwijderen is nu niet de bedoeling :)

site: kph.sohosted.com

iemand die mij die mij kkan helpen? (en mij verhinderen toch tabellen te gebruiken voor de rest van de site :p)
n

netlash

Legacy Member
Snel al helpen bij horizontale centrering. Verticale zoek ik straks eens op.

Volledige site in container steken :

<body>
<div id="container">
site
</div>
</body>

#container {
margin: 0 auto 0 auto;
text-align: center;
}
n

netlash

Legacy Member
Site in een box plaatsen, zowel horizontaal als verticaal gecentreerd, is iets moeilijker.

<div id="horizon2">
<div id="content2">
<div id="horizon">
<div id="content">
siteje
</div>
</div>
</div>
</div>

#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
#horizon2 {
text-align: center;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
#content2 {
margin-left: -372px;
position: absolute;
top: -231px;
left: 50%;
width: 744px;
height: 462px;
}
#content {
background-color: #c9d9b8;
margin-left: -372px;
position: absolute;
top: -205px;
left: 50%;
width: 744px;
height: 410px;
}
m

meRVy

Legacy Member
bedankt :)

nog ff vraagje, die box, die is nu iets van 700 op 400, maar als ik dat nu kleiner wil (bvb 400 op 100), hoe weet ik dan welke waarden ik moet nemen voor voor top en margin-left?

#content {
margin-left: -372px;
top: -203px;
}

(voorbeeld van de box die ik aangepast heb, maar de rest niet, hier)
n

netlash

Legacy Member
Ok, ik had het véél te moeilijk gemaakt.
(kopiëren uit ouder werk zonder na te kijken... no-no)


#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
#content {
background-color: #c9d9b8;
margin-left: -200px;
position: absolute;
top: -100px;
left: 50%;
width: 400px;
height: 200px;
}

<div id="horizon">
<div id="content">
<p>Lorem eumsandre magna commy nos erciduipsum augiam aliquat, sit num do
esenis nullaor erilissecte venis acilit wis nulla feu feuguerit niam,
quam vel ullam irit, coreet velesendreet adip eliscinis num quipit
wisisisl dolenisim dunt wis nis do core tating eummy num veniamcor amet
la facil iure exerit nim dolessi.</p>
</div>
</div>

De box is hier 400px breed en 200px hoog. De #content geef je, naast de breedte en hoogte, volgende getallen mee :

margin-left: - (breedte/2)px;
top: - (hoogte/2)px;
o

orez

Legacy Member
alles in 1 grote div steken

container div{
position: absolute;
top: 50%;
left: 50%;
width: breedte van je container;
height: hoogte van je container;
margin-left: -helft breedte van container;
margin-top: -helft hoogte van container;
}

da zou moeten werken ;)

Btw tis inderdaad een NEGATIEVE margin, dus de min moet er staan!
m

meRVy

Legacy Member
zolang site gevalideerd wordt, BertG, ben ik gelukkig :)
@ ru`orez, zal ik dan ook eens proberen, merci!
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