[HTML/Mozilla] Centreren wordt compleet genegeerd.

[gvanh]

Hallo!

Nu kom ik hetzelfde probleem voor de zoveelste keer tegen bij het bouwen van een pagina. Word er nu een beetje moe van ... dus ik hoop dat iemand mij kan vertellen wat ik fout doe, of wat een handiger manier is om WEL te bereiken wat ik wil.

code:

<div style='border:2px solid navy; text-align:center;' align='center'>
<div style='border:2px solid red; text-align:center; width:750px; float:center;' align='center'>
Inhoud
</div>
</div>

Het idee van bovenstaande code is, dat ik een DIV van 750px breed in het midden van mijn venster krijg. In internet explorer werkt dit dan ook naar behoren. Zodra ik deze code echter in Mozilla/Firefox laadt, wordt de DIV van 750px ALTIJD links uitgelijnd. En dat terwijl ik ongeveer alle mogelijke opties heb meegegeven om aan te duiden dat ik de boel gecentreerd wil hebben.

Iemand die wellicht ziet wat ik fout doe? Overigens zijn er in mijn testdocumentje geen externe stylesheets geladen, daaraan kan het dus niet liggen.

Alvast veel dank voor de koning die mij vertelt wat ik fout doe!

[André]

Dit komt toch redelijk vaak voorbij hoor:

code:

<div style='position:absolute; border:2px solid red; text-align:center; width:750px; margin: 0 50% 0 50%; left: -375px'>
Inhoud
</div>

[Verwijderd]

Cascading Stylesheet:

div{
 margin: 0 auto;
 width:200px
}

[Verwijderd]

ter aanvulling: text-align is alleen bedoelt om tekst (lees: inline boxes) te centreren.
De juiste manier is om de linker en rechtermarge op auto te zetten (met de boodschap, regel het zelf maar), IE negeert deze constructie compleet, maar heeft wel de feature (lees: bug) dat ie text-align toepast op block boxes.

Ergo
iha: margin-left: auto; margin-right: auto;
Voor IE: text-align center;
wat ook kan is de optie van André: left: 50%; en margin-left zo zetten dat het ie de helft van de breedte terug opschuift.

Het laatste heeft echter als nadeel dat als je browserwindow smaller wordt dan het object er dingen aan de linker (en rechter) kant weg gaan vallen. Bij de eerste 2 opties blijft de boel dan tegen de linkerkant staan (en verdwijnt rechts achter een scrollbar)

[Verwijderd]

Bestaat er eigenlijk wel een "float:center;" in CSS. Volgens de references die ik vind, kan dit alleen de values left, right en none krijgen.

Ik doe het zelf altijd op de manier zoals Anne hierboven doet.

[Rowanov]

Verwijderd schreef op maandag 02 mei 2005 @ 10:32:
Bestaat er eigenlijk wel een "float:center;" in CSS. Volgens de references die ik vind, kan dit alleen de values left, right en none krijgen.

Ik doe het zelf altijd op de manier zoals Anne hierboven doet.

Het staat niet in de reference, dus het is er niet. Dat is ook de reden dat je bovenstaande truuks moet toepassen

[Verwijderd]

Het laatste heeft echter als nadeel dat als je browserwindow smaller wordt dan het object er dingen aan de linker (en rechter) kant weg gaan vallen. Bij de eerste 2 opties blijft de boel dan tegen de linkerkant staan (en verdwijnt rechts achter een scrollbar)

Gewoon een min-width toevoegen.

En nee, 'float:center' bestaat niet. (Het lijkt me ook nogal onmogelijk om te definieren hoe dat zou werken eerlijk gezegd.)

[gvanh]

Heel duidelijk verhaal. Dat float:center niet bestaat, wist ik inderdaad. Ging me er alleen om, om te laten zien dat ik ongeveer "alles" geprobeerd had om Firefox duidelijk te maken dat hij moest gaan uitlijnen, maar dat alles werd genegeerd.

Ik ga het eens proberen met deze constructie.

Hartelijk dank voor de hulp!

[semicon]

of probeer is in de CSS in je BODY width:100%; te zetten, ik heb wel es zoiets gehad :x

[Pelle]

Dit is best basic.
Misschien een keer iets opzoeken zelf, ipv steeds topics starten zonder zelf anderen te helpen?