[CSS] Div schaalt mee met window

[Arcane Apex]

Ik probeer een div op de volgende manier te centreren, echter zorgt deze manier ervoor dat de div meeschaalt als men de window kleiner maakt. Wat niet de bedoeling is.
Wat ik zou willen bereiken is de huidige centreer-methode aan te houden(dus percentages te gebruiken ipv pixels), maar dan het meeschalen van de div proberen te voorkomen waneer men een window aanpast qua grootte.

Ik weet dat er andere manieren zijn om zaken te centreren, maar na zoveel manieren te hebben geprobeerd was er altijd wel iets mis qua cross-browser compatibility of ontstonden er problemen wanneer men de window schaalde. (Wanneer centreren in Firefox werkte, faalde het bijv in IE, of wanneer het in beide werkte, maar men de window kleiner maakte, dan werd de content weer onbereikbaar buiten de window zonder dat men ernaartoe kon scrollen. Of wanneer door 1 of andere gelukkige toevallige hack centreren voor alle browsers werkte zonder fouten wanneer men de window kleiner maakte, dan werkte het weer niet op mobiele browsers etc, zo was er altijd wel wat.)

code:

#div 
{
position:relative; 
top: 10px;
left: 3%;
width: 94%;
height: 80px;
background-color: red;
}

[Xander]

Uh, tja, natuurlijk schaalt je div mee met de browser als je een breedte in procenten geeft... Je geeft de breedte namelijk op als 94% van het formaat van je browserwindow. (jaja, strict gezien klopt wat ik zeg niet helemaal...)

Als je je div een absolute grootte (in px / pt / em / whatever) kun je je methode van centreren niet meer gebruiken...

Wat is er mis met

Cascading Stylesheet:

#div
{
top: 10px;
width: 800px;
height: 80px;
margin: 0 auto;
background-color: red;
}

?

Ik kan eerlijk gezegd geen moderne browser verzinnen die daar moeite mee heeft? IE pakt het alleen niet in quirksmode, maar zo lang je hem netjes een doctype meegeeft...

[Mad Marty]

Arcane Apex schreef op woensdag 20 februari 2008 @ 15:42:
Wat ik zou willen bereiken is de huidige centreer-methode aan te houden(dus percentages te gebruiken ipv pixels), maar dan het meeschalen van de div proberen te voorkomen waneer men een window aanpast qua grootte.

Ehm, 94% van, pak 'm beet, 800 is kleiner dan 94% van 600

[reddevil]

Arcane Apex schreef op woensdag 20 februari 2008 @ 15:42:
Ik probeer een div op de volgende manier te centreren, echter zorgt deze manier ervoor dat de div meeschaalt als men de window kleiner maakt. Wat niet de bedoeling is.
Wat ik zou willen bereiken is de huidige centreer-methode aan te houden(dus percentages te gebruiken ipv pixels), maar dan het meeschalen van de div proberen te voorkomen waneer men een window aanpast qua grootte.

De percentages zijn per definitie gebaseerd op window size, dus je zal wel over moeten.

[Arcane Apex]

Ik weet het, echter die margin 0 auto werkt bij mij alleen in firefox of ie, ben niet zeker. Wat ik bedoel is dat ik deze manier van centreren wilde gebruiken, maar dat dat percentage alleen sloeg op de volledige schermresolutie en niet de proporties van de window.
Na zoveel centreer oplossingen te hebben geprobeerd wilde ik iets dat werkte voor alles. Ik hoopte dat als iemand een manier zou kennen om dat percentage op de schermresolutie te laten slaan ipv de windowgrootte v/d browser dat dat dan eventueel die manier zou zijn.

[Xander]

Arcane Apex schreef op woensdag 20 februari 2008 @ 16:02:
Ik weet het, echter die margin 0 auto werkt bij mij alleen in firefox of ie, ben niet zeker.

Dan doe je iets verkeerd. Heb je misschien een URL naar een testcase met die margin: 0 auto; ?

Wat ik bedoel is dat ik deze manier van centreren wilde gebruiken, maar dat dat percentage alleen sloeg op de volledige schermresolutie en niet de proporties van de window.
Na zoveel centreer oplossingen te hebben geprobeerd wilde ik iets dat werkte voor alles. Ik hoopte dat als iemand een manier zou kennen om dat percentage op de schermresolutie te laten slaan ipv de windowgrootte v/d browser dat dat dan eventueel die manier zou zijn.

Nee, dat gaat niet werken...

Enkele ranzige javascript oplossingen uitgesloten

[ Voor 3% gewijzigd door Xander op 20-02-2008 16:04 ]

[Arcane Apex]

Ok bedankt mensen. Dan zal ik toch op de 1 of andere manier 0 auto werkend proberen te krijgen of niet voor een gecentreerde website moeten gaan.

[Xander]

Arcane Apex schreef op woensdag 20 februari 2008 @ 17:31:
Ok bedankt mensen. Dan zal ik toch op de 1 of andere manier 0 auto werkend proberen te krijgen

Dat zou gewoon moeten werken, ook in IE...

http://xander.heynsbergen.com/ext/centerdiv.html

Die werkt zonder problemen in FF2, IE6, IE7. Als dat bij jou niet werkt doe je toch iets fout.

[reddevil]

Arcane Apex schreef op woensdag 20 februari 2008 @ 17:31:
Ok bedankt mensen. Dan zal ik toch op de 1 of andere manier 0 auto werkend proberen te krijgen of niet voor een gecentreerde website moeten gaan.

Voor centreren van de site moet je gewoon (voor IE) je body op "text-align: center;" zetten en je overkoepelende div op "text-align: left;" en "margin: 0px auto;". Werkt in IE, FF, Safari, etc.

[CHeff]

reddevil schreef op donderdag 21 februari 2008 @ 08:56:
[...]


Voor centreren van de site moet je gewoon (voor IE) je body op "text-align: center;" zetten en je overkoepelende div op "text-align: left;" en "margin: 0px auto;". Werkt in IE, FF, Safari, etc.

Text-align in de body is niet nodig. Als je kijkt naar het voorbeeld Xander is de margin: 0 auto; op de div wat hem centreert in FF en IE.

Op basis van schermresolutie zit er idd niks anders op dan Javascript te gebruiken of wat je ook kunt doen is één vaste breedte hanteren van bijvoorbeeld 800px.

[Xander]

CHeff schreef op donderdag 21 februari 2008 @ 10:36:
[...]

Text-align in de body is niet nodig. Als je kijkt naar het voorbeeld Xander is de margin: 0 auto; op de div wat hem centreert in FF en IE.

Hm, misschien dat die text-align er wel voor zorgt dat het werkt in IE5.0 en ouder... Die doet niets met die margin: 0 auto; namelijk.

Niet dat ik daar persoonlijk mee zou kunnen zitten, maar goed...

[Verwijderd]

Xander schreef op donderdag 21 februari 2008 @ 12:56:
[...]


Hm, misschien dat die text-align er wel voor zorgt dat het werkt in IE5.0 en ouder... Die doet niets met die margin: 0 auto; namelijk.

Niet dat ik daar persoonlijk mee zou kunnen zitten, maar goed...

Naar IE 5 en IE 5.5 hoef je echt niet meer te kijken hoor. Die 0.01% die dat nog gebruikt heeft dan maar pech lijkt me