[css] pagina centreren in browserscherm

[Canard]

ik ben bezig om een website om te schrijven van layout in tabellen naar een layout met div 's en css. Dit is zo goed als klaar maar ik heb nog twee problemen.

De pagina is de volgende layout:
- aan de linkerkant een kolom volledig van boven naar beneden
- aan de rechterkant een onderverdeling in twee stukken: menubalk en daaronder de content

zie hier

Wat ik wil is het volgende:

1. Ik wil dat de drie onderdelen (linkerkant, top, content) onafhankelijk van elkaar werken. Dus als ik zaken toevoeg/verwijder/wijzig in de top, dan mag dat geen invloed hebben op de linkerkant en de content.

2. Ik wil de hele pagina horizontaal gecentreerd in de browser hebben afhankelijk van de breedte van het browserwindow (de pagina is geschikt gemaakt voor 800x600, Mozilla en IE 5.5+)

Ik heb een aantal mogelijke oplossing bekeken maar in mijn situatie werken ze niet en ik snap niet waarom.

Deze heb ik bekeken en getest:
- [rml][ xhtml1.1] centreren table/div[/rml]
- [rml][ HTML/Divs/Layers] site centreren[/rml]
- http://www.glish.com/css/3.asp
- http://annevankesteren.nl/test/templates/center-h-2.php

[CH4OS]

[google=centering css]
Geeft:
http://www.bluerobot.com/web/css/center1.html

Cascading Stylesheet:

body {
    margin:50px 0px; padding:0px;
    text-align:center;
    }
    
#Content {
    width:500px;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
    }

En zo doe ik het ook altijd, werkt in alle browsers (had eerst iets, werkte alleen in IE

Uiteraard kan je de margin van 50px; aanpassen naar wat je wilt Als je auto neemt, wordt het bovenaan de pagina gezet... Maar voor verticale centrering gebruik ik gewoon een table (werkt het snelst en makkelijkst vind ik)

[ Voor 23% gewijzigd door CH4OS op 20-06-2004 11:11 ]

[Liquid]

Wat lukt er precies niet? Het centreren in het midden of dat het linkerkant , top en content na het centreren niet meer op de goede plek staan (dus dat ze allemaal het midden opzoeken)?

Post anders eens de codes die je gebruikt hebt en waarvan het volgens de topics moet werken. Dus de css en html. Of anders zip het even in en gooi het online, dan wil ik er wel even mee spelen.

[Verwijderd]

Als je op de #main div margin: 0 autol en position: relative; gebruikt, dan werkt het volgens mij wel, dat mag je zelf proberen.
Verder vind ik het vervelend dat ik dit moet zeggen, maar je bent één van de vele mensen die er niets van hebben begrepen. Snap je waarom tabellen niet moeten worden gebruikt om de totale opmaak van een website mee te maken? Zo ja, probeer dan eens aan ons uit te leggen waarom je denkt dat het zo is, en probeer dan aan te geven warom het gebruik van alleen div elementen beter is.

Die menu's kun je bijvoorbeeld op verschillende manieren bekijken. Je kunt stellen dat het een verzameling is van een aantal stukjes tekst. En aangezien tekst normaal gesproken in een paragraaf voorkomt, zou je menu1 t/m menu6 in één p element kunnen zetten. Of je zou een ol of ul element kunnen gebruiken. Hetzelfde geldt voor de links: link1 t/m link17.

Je hebt div's in de broncode staan die je puur gebruikt om afbeeldingen mee te plaatsen. Waarom pas je die stijlen niet direct toe op de img elementen? Of beter nog, laar die img elementen weg, en probeer afbeeldingen voor de layout helemaal uit de HTML te halen en als achtergrondafbeelding in de stylesheet te krijgen, en de stylesheet als los bestand te koppelen aan het document.

Tenslotte de <br /> tags. Daarvan mag je er eigenlijk nooit meer dan 1 van na elkaar gebruiken, en je moet ze alléén gebruiken in tekst, om een nieuwe zin op een nieuwe regel te laten beginnen. Het mag niet een markering zijn voor het einde van een alinea of een compleet stuk tekst, daar het je het p element voor. De juise afstand tot andere elementen regel je met padding en margin in de CSS.

Sorry, maar het moest gewoon gezegd worden, omdat je nu helemaal op het verheerde spoor dreigt te raken.

[Canard]

Liquid schreef op 20 juni 2004 @ 11:11:
Post anders eens de codes die je gebruikt hebt en waarvan het volgens de topics moet werken. Dus de css en html. Of anders zip het even in en gooi het online, dan wil ik er wel even mee spelen.

De link naar de pagina staat er al

Verwijderd schreef op 20 juni 2004 @ 11:19:
... een heel verhaal ...

Ok, duidelijk verhaal wat ik opvat als opbouwende kritiek... ik zal nog eens goed naar de code kijken.

Naar mijn mening kun je voor layout zaken beter div's gebruiken ipv tabellen omdat je dan de content en layout informatie kunt scheiden...

Overigens heb ik mijn definitieve pagina wel een aparte stylesheet....

code:

margin: 0 auto;
position: relative;

werkt niet overigens

[ Voor 16% gewijzigd door Canard op 20-06-2004 13:49 ]

[crisp]

Canard schreef op 20 juni 2004 @ 12:01:
[...]

code:

margin: 0px auto;
position: relative;

werkt niet overigens

Cascading Stylesheet:

body {
  text-align: center;
}
#gecentreerdediv {
  position: relative;
  width: 750px;
  margin: 0 auto;
  text-align: left;
}

dit zou zeker moeten werken.

[Canard]

crisp schreef op 20 juni 2004 @ 12:06:
[...]

Cascading Stylesheet:

body {
  text-align: center;
}
#gecentreerdediv {
  position: relative;
  width: 750px;
  margin: 0 auto;
  text-align: left;
}

dit zou zeker moeten werken.

nope ... heeft geen effect

edit:
excuses... werkt dus wel

thanks!

[ Voor 8% gewijzigd door Canard op 20-06-2004 14:41 ]

[Spruit_elf]

probeer anders eens

code:

html {
  text-align: center;
}
body {
  margin: 0 auto;
  text-align: left;
}