Onderkant div wordt niet getoond - Softwareontwikkeling

woensdag 7 januari 2004 16:41

Acties:

Fabian

Topicstarter

Toedeloe, ik ben wat aan't spelen met CSS enzo en heb nu eindelijk de truk gevonden om een pagina gecentreerd te krijgen op een treffelijke manier (met negatieve margins, dus niet gewoon met auto). Maar sedert dat ik die pagina's zo centreer, wordt de whitespace onder mijn container div niet meer getoond. In Opera 7.2 zie je nog de borderonderaan maar er is geen margin onder. In MSIE 6 staat de border er zelfs niet meer op.

Dit is de CSS van de #container:

code:

#container {
    width: 512px;
    border: 6px solid #60806A;
    margin-top: 20px;
    margin-left: -250px;
    background-color: #B3CF9B;
    position: absolute;
    left: 50%;
    margin-bottom: 20px;
}

De pagina staat ook hier. Misschien is dat duidelijker.

[ Voor 6% gewijzigd door F97 op 07-01-2004 17:28 ]

woensdag 7 januari 2004 16:49

Acties:

bredend

Wat gebeurt er als je nog iets onder de container zet? En als je de margin-bottom hoger zet?

ohja: IE rekent de border nooit mee voor de afmetingen van een object.

[ Voor 29% gewijzigd door bredend op 07-01-2004 16:51 ]

woensdag 7 januari 2004 16:50

Acties:

Willem

Bekend probleem.

Het is in ieder geval niet op te lossen met een margin-bottom.

Wat wel kan, maar iets ranzigere oplossing is een element onder de div om ruimte te creeëren. Denk aan een lege div.

Motor (of auto) onderhoud bijhouden

woensdag 7 januari 2004 16:52

Acties:

bredend

Wel vreemd dat de margin-top wel 'telt' en die aan de onderkant niet...

woensdag 7 januari 2004 16:55

Acties:

F97

Fabian

Topicstarter

bredend schreef op 07 januari 2004 @ 16:49:
Wat gebeurt er als je nog iets onder de container zet? En als je de margin-bottom hoger zet?

ohja: IE rekent de border nooit mee voor de afmetingen van een object.

Dat laatste kan opgelost worden met de box hack van tantek dacht ik? Voice-family etcetera? Maar dat doet er nu even niet toe, die stond er eerst in maar heb ik maar weggegooid. (Of is dat enkel voor de breedte? Whatever, doet er nu (denk ik) niet toe).

Margin-bottom doet niets overigens.

willem169 schreef op 07 januari 2004 @ 16:50:
Bekend probleem.
Het is in ieder geval niet op te lossen met een margin-bottom.

Wat wel kan, maar iets ranzigere oplossing is een element onder de div om ruimte te creeëren. Denk aan een lege div.

Jah maar 'k weet niet hoe dan. Op dezelfde manier als die #container dan ofzo? Maar gewoon afmetingen zodat het er uit ziet als een margin? (Nou jah, niet ziet

)

Is er anders nog een oplossing voor dat bekende probleem?

Of andere goeie manieren om een div te centeren in alle browsers? (Behalve de lame text-align: center truuk (in de body) voor Internet Explorer?)

[ Voor 34% gewijzigd door F97 op 07-01-2004 17:30 ]

woensdag 7 januari 2004 18:38

Acties:

F97

Fabian

Topicstarter

OK. Als ik

code:

1	position: relative;

neem, dan doet ie het goed in MSIE en Opera. Maar in Mozilla niet ... Iemand die iets meer weet?

[ Voor 25% gewijzigd door F97 op 07-01-2004 19:10 ]

woensdag 7 januari 2004 19:30

Acties:

Verwijderd

Het lijkt hier wel te werken (moz 1.7a 19-12-2003, beetje oud, dat wel).
padding/margin op <body> werkt gegarandeerd.
IE6 gaat alleen in quirks mode (dus ander box-model) als er iets voor een correcte doctype staat.
Waarom niet op de _correcte_ manier centreren.

woensdag 7 januari 2004 19:48

Acties:

F97

Fabian

Topicstarter

Verwijderd schreef op 07 januari 2004 @ 19:30:
Het lijkt hier wel te werken (moz 1.7a 19-12-2003, beetje oud, dat wel).
padding/margin op <body> werkt gegarandeerd.
IE6 gaat alleen in quirks mode (dus ander box-model) als er iets voor een correcte doctype staat.
Waarom niet op de _correcte_ manier centreren.

Zo zou hij er normaal moeten uitzien in Opera.

En zo ziet hij er hier uit in Mozilla (of heb ik gewoon een hele verkeerde versie, er staat Mozilla 1.5 in de info)

Dit is dus met "relative" en niet "absolute".

Je zei net dat padding/margin op body werkt. Neen. Ik heb het dus weer op "absolute" gezet (zoals het probleem zich origineel voordoet) en krijg iets als op dit prentje.

Dat van die quircks mode heb ik gelezen op Tantek's site. Ik heb dus deze <?xml ...?> die voor het doctype stond, weggelaten.

En wat is de échte juiste manier om te centreren?

Editl: de site zelf is stylesheet als in beginpost maar met position: relative ipv absolute.

[ Voor 8% gewijzigd door F97 op 07-01-2004 19:50 ]

woensdag 7 januari 2004 19:50

Acties:

Verwijderd

http://annevankesteren.nl/test/templates/center-h (houdt wel rekening met IE5). Maar ik denk dat als je het op die manier doet, alle problemen weg zijn.

EDIT: Een comment voor de DOCTYPE -> quirks mode.

Voor de rest heb ik denk ik het een en ander verkeert begrepen, aangezien ik geen zin had om een andere browser op te starten. Ik blijf er wel bij dat je met de standaard (aanbevolen) manier van centreren geen problemen zult hebben.

[ Voor 49% gewijzigd door Verwijderd op 07-01-2004 19:52 ]

woensdag 7 januari 2004 20:14

Acties:

F97

Fabian

Topicstarter

Verwijderd schreef op 07 januari 2004 @ 19:50:
http://annevankesteren.nl/test/templates/center-h (houdt wel rekening met IE5). Maar ik denk dat als je het op die manier doet, alle problemen weg zijn.

EDIT: Een comment voor de DOCTYPE -> quirks mode.

Voor de rest heb ik denk ik het een en ander verkeert begrepen, aangezien ik geen zin had om een andere browser op te starten. Ik blijf er wel bij dat je met de standaard (aanbevolen) manier van centreren geen problemen zult hebben.

Oh. Toch met text-align: center; dan? Hrm

En ik die dacht dat net de manier was die de pro's niet gebruikten

Tss, en ik maar al dat werk doen om die andere manier te gebruiken

Hehe. Thanks voor de post en de link!

woensdag 7 januari 2004 20:21

Acties:

Verwijderd

Dat is dus de IE5.x hack. 'margin:0 auto;' is de manier om het te doen, maar dat wordt alleen ondersteund door goede browsers en door IE6.0 in standards compliant mode.

woensdag 7 januari 2004 20:30

Acties:

F97

Fabian

Topicstarter

Verwijderd schreef op 07 januari 2004 @ 20:21:
Dat is dus de IE5.x hack. 'margin:0 auto;' is de manier om het te doen, maar dat wordt alleen ondersteund door goede browsers en door IE6.0 in standards compliant mode.

Die standards compliant mode. Is dat zonder <?xml ... ?> voor het doctype, of met? Zonder doet ie het hier in ieder geval verkeerd met left- en rightmargin op auto.

woensdag 7 januari 2004 21:44

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Hmm, ik ben niet zo kapot van deze manier van center alignment, IE is de enige die het juiste laat zien.

Huur mij in als freelance SEO consultant!

woensdag 7 januari 2004 23:22

Acties:

F97

Fabian

Topicstarter

CrashOne schreef op 07 januari 2004 @ 21:44:
Hmm, ik ben niet zo kapot van deze manier van center alignment, IE is de enige die het juiste laat zien.

Ja. Maar voor de andere heb je nog margin: 0 auto;.

donderdag 8 januari 2004 02:30

Acties:

BetuweKees

Flipje uit Tiel

kwam een paar dagen geleden deze methode tegen om te centreren op pagina (zowel horzontaal als verticaal); werkt ook prima in ie5. verticale centreren heb je natuurlijk niet nodig; maar horizontale kan via zelfde principe natuurlijk.. wellicht dat je er iets aan hebt..

Through meditation I program my heart to beat breakbeats and hum basslines on exhalation -Blackalicious || *BetuweKees was AFK; op de fiets richting China en verder

donderdag 8 januari 2004 08:39

Acties:

Verwijderd

Die methode is een hack. In deze methode zit ook een hack voor IE5.x+, maar 'margin:0 auto;' is iig de correcte manier, waardoor deze altijd zal blijven werken. Daarnaast heeft die methode nog andere nadelen, zoals geen horizontale scrollbar naar links als het scherm te klein wordt.

IE6 gaat in quirks mode op het moment dat er IETS voor de DOCTCYPE komt, een comment (), een PI (<?...?> etc.

Een PI voor de DOCTYPE zetten is sowieso niet echt aan te raden, omdat je XHTML meestal nog als HTML verstuurt (text/html).

donderdag 8 januari 2004 10:25

Acties:

F97

Fabian

Topicstarter

BetuweKees schreef op 08 januari 2004 @ 02:30:
kwam een paar dagen geleden deze methode tegen om te centreren op pagina (zowel horzontaal als verticaal); werkt ook prima in ie5. verticale centreren heb je natuurlijk niet nodig; maar horizontale kan via zelfde principe natuurlijk.. wellicht dat je er iets aan hebt..

Jah, dat is de methode die ik gebruikt had en die problemen opleverde met mijn margin onderin

Verwijderd schreef op 08 januari 2004 @ 08:39:
...

IE6 gaat in quirks mode op het moment dat er IETS voor de DOCTCYPE komt, een comment (), een PI (<?...?> etc.

Een PI voor de DOCTYPE zetten is sowieso niet echt aan te raden, omdat je XHTML meestal nog als HTML verstuurt (text/html).

Ach

Bedankt voor de uiteenzetting. Wist ik nog niet, wel interessant. Thanks.

Pagina: 1

Reageer