Archief - CSS: hoe krijg ik dit mooi gecentered?

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

[The Cleaner]

Legacy Member
wat ik me al erg lang afvraag:
hoe krijg ik het volgende mooi gecentered volgens de regels? De bedoeling is dat het grijze deel links en rechts mee groeien naarmate de resolutie van de bezoeker van de site hoger is. De 4 gekleurde delen (header, menu's en nieuws) moeten steeds mooi in het midden staan met links en rechts ervan een even breed grijs deel (of geen grijs deel bij resoluties onder 1024*768)
ik heb al uuuuuren liggen zoeken & proberen met css (o.a. via w3schools.com) maar het wilt maar niet lukken. Ik weet dat het vlot zou gaan met tabellen of frames maar volgens de regels van de kunst moet het toch met css mogelijk zijn?
Ik weet dat ik met margin-left:auto en margin-right:auto 'meegroeiende' grijze delen kan krijgen, maar enkel voor de header krijg ik dit werkend, niet wanneer er 3 div's naast elkaar staan zoals op de rest van de site.
Uiteraard moet het werken in IE, FF en Opera (als het hier in lukt zal het in andere browsers ook wel goed zitten vermoed ik...)

de site (of de structuur dan toch) in kwestie moet er zo uitzien:
http://img208.imageshack.us/img208/646/siteob3.jpg
C

Crazed

Legacy Member
Ik zet rond het gedeelte dat gecentreerd moet worden (de gekleurde delen) meestal een div, en centreer deze div. Dat is denk ik de enige manier.
o

omfg

Legacy Member
lees de sticky, er zijn genoeg manieren:
alles in 1 div steken en daarop
Code: 
margin: 0 auto
zetten, ..
s

static07

Legacy Member
Code: 
<body style="text-align:center; width:100%"> 
    <div id="container" style="margin: 0 auto;text-align:left;">
          rest van opmaak
    <div>
</body>
S

Skratz

Legacy Member
normaal, gewoon bij de elementen aan de kant die aan het gedeelte eindigt margin op auto zetten.

ipv domweg alles in een container steken, kunt ge evengoed alles in een tabel steken wat niet de bedoeling is. Hoewel een aantal mens en dat hier wel schijnt te denken.
m

maatje

Legacy Member
Je kan perfect met css positioneren

Code: 
<div id="container">
	<div id="header">
	</div>
	
	<div id="menu_left">
	</div>
	
	<div id="grid">
	</div>
	
	<div id="menu_right">
	</div>
</div>

en dan in css aanpassen

Code: 
#container
{
margin-left:auto;
margin-right:auto;
}

en alle elementen in het container worden dan gecentreerd :)
o

orez

Legacy Member
maatje zei:
Je kan perfect met css positioneren

Code: 
[code]
#container
{
margin-left:auto;
margin-right:auto;
}
en alle elementen in het container worden dan gecentreerd :)
Klik om te vergroten...

gebruik gewoon zoals gezegd: "margin: 0 auto;" meer moet da ni zijn... waarom ze apart gaan definiëren als ge perfect de shorthand tag kunt gebruiken.

static07 zei:
Code: 
<body style="text-align:center; width:100%">
    <div id="container" style="margin: 0 auto;text-align:left;">
          rest van opmaak
    <div>
</body>
Klik om te vergroten...

Je heeft hier meer code mee dan effectief nodig is ook hé ...
text-align: center --> hoeft niet, is trouwens ook niet de manier om elementen te gaan centreren, width: 100% hoeft infeite ook niet, zonder dit doe hij het ook.

waarom geef je infeite een id="container" mee en ga je dan nog eens inline css gaan zetten? Gebruik dan direct de voordelen van je externe css... anders mag je dit in ieder html fileke gaan typen. die text-align: left; heeft ook weer niets te zien met de positioning, en is waste of typepower. Als ge int begint text-align: center niet zet, moet je ni nog es je text-align gaan bepalen van je container div..

(ff ter info... waar jij zet rest van opmaak bedoel je natuurlijk rest van structuur, opmaak == css / structuur == html)

en @ topicstarter, zoals gezegd, deze informatie vind je terug in de sticky, dus gelieve eerst deze te lezen alvorens een thread te starten..
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