[CSS/HTML/PHP] Centreren met grijze achtergrond

[Bastiaan]

Ik ben nu al heel de middag aan het knutselen om mijn (nieuwe) site te centreren, voor deze inhoud een hele lichtgrijze tint te gebruiken, en als achtergrond links en rechts donkerder grijs te gebruiken. Deze vorm komt o.a. terug op T.net...
Daarnaast wil ik het menu (gecentreerd, bovenin) het liefst laten staan ivm laadtijd, maar dit heeft geen prio.

Waar loopt het nu fout:
In de stylesheet heb onder andere het volgende staan:

code:

body {
background-color: #F0F0F0;
text-align: center;
font-family: verdana;
font-size: 8pt;
color: #000000;
}


#container {
margin: 0 auto;
width: 800px;
text-align: left;
}

Alles staat in het midden. Mooi!
Verder dan dit kom ik niet meer. Minder mooi!

Bijna iedereen die zijn site wil centreren is hier al tevreden mee. Ik niet. Ik wil per se die donkerdere (?) achtergrond aan de zijkanten. Juist daarom is het erg moeilijk zoeken op Tweakers, Google en collegae, want die houden allemaal op bij het centreer-gedeelte. Ik heb voorheen (op de huidige site, al) gewerkt op de brute frame-manier, maar met scrollbalken willen jullie niet weten hoe dat eruit ziet! Deze wil ik gewoon aan de rechterkant hebben, en niet in het midden. Ondertussen heb ik ook al met layers en zelfs de gouwe ouwe tabellen geprobeert. Zeg nou zelf, is dat wanhopig of wat?

Even een voorbeeldje over hoe mijn streven is:



Mocht iemand een zet in de goede richting geven; super!

[marko77]

je kunt toch je body een andere kleur achtergrond geven dan je div, of snap ik het niet?

[Invisible_man]

Zou je wat meer willen vertellen wat je precies wil berijken? Heb na drie keer je topic start door gelezen nog steeds niet in mijn hoofd wat je nou wil.

[Verwijderd]

Dus als ik het goed heb heb je moeite met het centreren van het hele gedoe zodat je aan beide kanten altijd evenveel grijs hebt? Kan wel maar dan moet je iets als dit doen:

code:

    div#container{
        position        : absolute;
        left            : 50%;
        top             : 0px;
        margin-left     : -350px;
        width           : 700px;

    }

[Verwijderd]

ja wat marko77 zegt, en anders geef je je body een plaatje als achtergrond, wat je vervolgens ook centreert

[Freelance]

code:

body 
{
background-color: #F0F0F0;
font-family: verdana;
font-size: 8pt;
color: #000000;
}


#container 
{
position:relative;
margin: 0 auto;
width: 800px;
left:50%;
margin-left:-400px;
text-align: left;
}

zoiets bedoel je?

-edit- Drie mensen voor me..

[ Voor 6% gewijzigd door Freelance op 21-06-2006 16:50 ]

[Rigi]

Idd, donkere body achtergrond. divje erin met lichtere achtergrond, daar weer divje in met de content, klaar. toch?

[JochemvL]

Als ik je goed begrijp moet je gewoon je #container een background-color meegeven en volgens mij ben je dan klaar. Of mis ik iets?

ook wat laat...

[ Voor 7% gewijzigd door JochemvL op 21-06-2006 16:52 ]

[disjfa]

Verwijderd schreef op woensdag 21 juni 2006 @ 16:49:
Dus als ik het goed heb heb je moeite met het centreren van het hele gedoe zodat je aan beide kanten altijd evenveel grijs hebt? Kan wel maar dan moet je iets als dit doen:

code:

    div#container{
        position        : absolute;
        left            : 50%;
        top             : 0px;
        margin-left     : -350px;
        width           : 700px;

    }

Absoluut () niet!

Tenzie je verticaal wilt centreren en nog veel meer resolutie problemen wilt creeeren.

[BasieP]

eens met disjfa, das een ranzige oplossing..

dit is netter:

Cascading Stylesheet:

body {
  background-color: gray;
}

div#container {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  background-color: white;
}

[ Voor 10% gewijzigd door BasieP op 21-06-2006 17:00 ]

[Rowanov]

Wat een bagger code krijgt de TS hier voorgeschoteld, niet normaal meer. (Op Basie P na, die mij zoals gewoonlijk voor was )

Cascading Stylesheet:

body {
  margin: 0;
  padding: 0;
  text-align: center; /* voor IE */
  background-color: #ccc;
}
#container {
  margin: 0 auto;
  width: 800px;
  text-align: left;
  background-color: #fff;
}

HTML:

<body>
  <div id="container">
    ...hier je content, header, etc...
  </div>
</body>

De TS zat dus al een heel eind op de goede weg. Geen positions toepassen, geen negatieve margins en geen andere zut. Gewoon een kleurtje geven en klaar.

[ Voor 9% gewijzigd door Rowanov op 21-06-2006 17:05 ]

[user109731]

Cascading Stylesheet:

html, body { 
  width:100%; height:100%; 
}
body {
  background-color: #bbb;
}

#container {
  background-color:#eee;
  margin: 0 auto;
  width: 800px;
}

Mogelijk nog wel een doctype toevoegen:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">

(helemaal bovenin je html)

[Bastiaan]

Bij geen enkele optie pakt ie voor de achtergrond en div de verschillende achtergrondkleuren.
Getest in Firefox en Safari, overigens...

Edit:
Pagina: http://www.bastiaanhuls.nl/got/layout.htm
CCS: http://www.bastiaanhuls.nl/got/style/style.css

[ Voor 34% gewijzigd door Bastiaan op 21-06-2006 17:10 ]

[user109731]

Je pagina word netjes gecentreerd hier in Firefox...

Het probleem is volgens mij dat je de container geen hoogte geeft, zodat deze net zo hoog is als zn inhoud. De div heeft dus wel de goede achtergrondkleur, maar je ziet 'm niet omdatie even hoog is als je header+menu... (en die zitten ervoor) Probeer eens min-height:1000px; ofzo op je #container

[ Voor 26% gewijzigd door user109731 op 21-06-2006 17:15 ]

[Bastiaan]

Grote prutser schreef op woensdag 21 juni 2006 @ 17:14:
Je pagina word netjes gecentreerd hier in Firefox...

Het probleem is volgens mij dat je de container geen hoogte geeft, zodat deze net zo hoog is als zn inhoud, waardoor je idd dat witte vlak niet ziet. Probeer eens min-height:1000px; ofzo eens

Het centreren is gelukkig het probleem niet, alleen die grijswaarden op de plek waar ze horen

[Rowanov]

Wat Grote Prutser zegt; je container rekt op aan de hand van de inhoud, en zal even hoog zijn als de inhoud. Ram om het uit te proberen eens wat dummy text in je content gedeelte.

[Bastiaan]

't is niet bijster intelligente tekst, maar om de een of andere reden werkt het nu wel ineens

Nog even uit nieuwsgierigheid; is het op de een of andere manier mogelijk van het titel-gedeelte en het tekst-gedeelte 2 aparte frames oid te maken?

[ Voor 47% gewijzigd door Bastiaan op 21-06-2006 17:42 ]

[Rowanov]

Als het duidelijk twee verschillende secties in je site zijn, dan kan je ze bij wijze van onderverdeling in een aparte div zitten.

[Bastiaan]

Ik ga d'r verder wel uitkomen. Ontzettend bedankt iig!

[DEVoTi0N]

Bastiaan schreef op woensdag 21 juni 2006 @ 17:45:
Ik ga d'r verder wel uitkomen. Ontzettend bedankt iig!

offtopic:
PHP tags plaatsen in een htm filetje is trouwens ook niet echt slim: klik. Check lijn 2 en 5.

[ Voor 3% gewijzigd door DEVoTi0N op 21-06-2006 17:54 ]

[Bastiaan]

DEVoTi0N schreef op woensdag 21 juni 2006 @ 17:54:
[...]

offtopic:
PHP tags plaatsen in een htm filetje is trouwens ook niet echt slim: klik. Check lijn 2 en 5.

Later worden deze wel allemaal PHP. Maar omdat ik lang niet alles afheb (ben van scratch begonnen) werk ik even in HTML. Daarnaast kan ik offline het resultaat in HTML beter beoordelen...
Thnx voor je alertheid