[CSS]Div altijd in het midden.

[Sanity11]

Ik zit te klooien met een div.
Ik wil graag dat een bepaalde div ten alle tijden in het midden blijft van de browser, ook als het browser scherm kleiner word dan de div zelf.

Nou heb ik op internet de volgende oplossing gevonden:

code:

#container {
width: 600px,
position: relative;
left : 50%;
margin-left: -300px;
}

alleen deze krijg ik niet werkend in IE6.0?!?

Heeft iemand suggesties?

[BtM909]

Iets zegt me dat je helemaal niet hebt gezocht. Begin eerst hier: [search=title:centreren]

[vacuumcleaner]

Of position even op "absolute" zetten dacht ik.

[CrabbyData]

code:

margin: 0 auto;

that's all

[Sebazzz]

CrabbyData schreef op vrijdag 19 oktober 2007 @ 12:56:

code:

margin: 0 auto;

that's all

Niet voor IE6 of 5 geloof ik. Daar is het parent element text-align: center; en dan in de div text-align: left;

[Sanity11]

Ik wil graag dat een bepaalde div ten alle tijden in het midden blijft van de browser, ook als het browser scherm kleiner word dan de div zelf.

Mijn vraag gaat over het bold stukje tekst. . . . . . dat is niet zo makkelijk.

Hoe ik een div gewoon in het midden zet weet ik wel.

[Sanity11]

vacuumcleaner schreef op vrijdag 19 oktober 2007 @ 12:50:
Of position even op "absolute" zetten dacht ik.

Dat is het denk ik! even goed testen allemaal.

[Verwijderd]

In principe gaat dat niet werken, wanneer je browser dan kleiner is dan de in jouw voorbeeld geschetste 600px breedte, dan valt je div nog 'buiten' de browser. Ik zet altijd alles in een overkoepelende layer zonder daarbij extra css-opties.

code:

<div align="center"></div>

Daarbinnen kun je dan vrij werken middels bovenstaande optie van een negatieve leftmargin bijvoorbeeld. Dan blijft het te allen tijde binnen de center-div en blijft je content ook goed gepositioneerd wanneer je browser smaller is dan de 600px breedte.

[Verwijderd]

Of door de desbetreffende div een % width te geven.

[2020Media]

code:

#container {
width: 600px,
margin-right: auto;
margin-left: auto;
}

Sorry, niet helemaal goed gelezen ging allen over dat dikgedrukte stukje tekst.

Mijn excuss.

[ Voor 36% gewijzigd door 2020Media op 19-10-2007 16:49 ]

[KatirZan]

tja, in principe zou je een if kunnen schrijven richting ie6.0/5.0 en een if richting elke andere browser

opzich niet eens een lastige oplossing dat wil dus zeggen dat je een deel ie6.0 en een deel andere browsers krijgt

[Sanity11]

code:

#container {
width: 600px,
position: absolute;
left : 50%;
margin-left: -300px;
}

Nou, dit werkt in ieder geval, alleen nu krijg ik aan de onderkant een scrolbar.
Dat is wel wat jammer, kan je die ook permanent uitschakelen?

[Sanity11]

KatirZan schreef op vrijdag 19 oktober 2007 @ 16:54:
tja, in principe zou je een if kunnen schrijven richting ie6.0/5.0 en een if richting elke andere browser

opzich niet eens een lastige oplossing dat wil dus zeggen dat je een deel ie6.0 en een deel andere browsers krijgt

Dat is natuurlijk ook een oplossing.
Balen dat ie6.0 altijd zo afwijkend werkt!

[Sanity11]

ZypherNL schreef op vrijdag 19 oktober 2007 @ 16:48:

code:

#container {
width: 600px,
margin-right: auto;
margin-left: auto;
}

Sorry, niet helemaal goed gelezen ging allen over dat dikgedrukte stukje tekst.

Mijn excuss.

Geen probleem.
Maar dat wert dus niet, want dan word de div gewoon naar rechts geduwd waanneer je het scherm verkleind.

[BlackWhizz]

code:

#prullenbak {
width: 600px;
height: 300px;
postion: absolute;
top: 50%;
margin-top: -150px;
left: 50px;
margin-left: -300px;
}

Zoiets?