[CSS] DIV container centreren behalve...

[NIMIC]

Ik heb mijn complete pagina relatief gepositioneerd in de <div id=main>.
Nu wil ik deze graag in het midden van het browservenster zetten. Dat kan door middel van de onderstaande CSS code.
Nu is het probleem dat de de <div id=main> links uit het browservenster schuift wanneer het venster te kleiner is dan de div (180px).
Deze is ook niet meer te bereiken door naar links te scrollen.

Weet iemand hoe ik dit kan oplossen?

code:

#main
{
    position: relative;
    margin-left: -390px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-left: 0px;
    width: 780px;
    left: 50%;
}

[Rickets]

Dat kan met iets dergelijks:

Cascading Stylesheet:

body
{
   text-align: center;
}
#main 
{
   margin: 0 auto;
}

Wel in de gaten houden dat de tekst in #main nu gecentreerd wordt, dat moet je dus neutraliseren

[ Voor 37% gewijzigd door Rickets op 12-08-2004 17:45 ]

[Verwijderd]

margin: 0 auto; (voor moz en consorten)
text-align: center voor de omhullende container voor ie

[NIMIC]

Met jullie advies ben ik wel iets verder gekomen. Met de code veranderd naar het onderstaande, werkt het nu wel goed in Konqueror, maar nog niet in Mozilla of Mozilla firefox. Daar heb ik nog hetzelfde probleem.

code:

#main    {
    background-color: fuchsia;
    margin: 0 auto;
    padding-bottom: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-left: 0px;
    width: 780px;
}

body    {
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: silver;
    text-align: center;
}

[bredend]

Als je de site online heb staan mag je wel een linkje posten hoor.
Verder is het erg handig om de webdeveloper toolbar te hebben. Kan je makkelijk CSS editten

[NIMIC]

bredend schreef op 12 augustus 2004 @ 18:02:
Als je de site online heb staan mag je wel een linkje posten hoor.
Verder is het erg handig om de webdeveloper toolbar te hebben. Kan je makkelijk CSS editten

Hij staat nog niet online. Aangezien het nog een test is.

[Verwijderd]

Voorbeeldje.

[klokop]

Je weet dat je het ook zo kan schrijven? Scheelt nogal in typen.

code:

#main    {
    background: fuchsia;
    margin: 0 auto;
    padding: 0;
    width: 780px;
}

body    {
    padding: 0;
    margin: 0;
    background: silver;
    text-align: center;
}

overigens hebben onderstaande methoden het zelfde effect:

code:

    padding: 0px;
    padding: 0;     als 't 'nul' is, kan de 'px' weggelaten worden.
    padding: 0 0;   'top+bottom en left+right
    padding: 0 0 0 0;   'top right bottom left'

[NIMIC]

Hieronder is het voorbeeld te bekijken, dit heeft dus hetzelfde effect als de code van Anne.

link naar het testvoorbeeld

klokop, bedankt voor je tips. Ik wist wel dat ik het zo kon schrijven, bij de uiteindelijke versie zal ik dit wil even opschonen.

[Switch]

Hier staat een goed voorbeeld voor het verticaal zowel horizontaal centreren van een div.

[Verwijderd]

Switch schreef op 12 augustus 2004 @ 19:45:
Hier staat een goed voorbeeld voor het verticaal zowel horizontaal centreren van een div.

En waarmee je precies het probleem hebt wat de topicstarter wil voorkomen

[Verwijderd]

O sorry. Even 'min-width' toevoegen op het BODY element. In nieuwere versies van Mozilla is dit probleem verholpen afaik, of heeft IE er ook last van?