Vreemde ruimtes onder en boven DIV.

[intGod]

Op de uri http://www.sentientbeings.nl/jwProducts/products.html heb ik een pagina staan die ik zorgvuldig met div'jes probeer op te bouwen. *zucht*.

Kan iemand mij zeggen

a) Hoe ik die oranje balken boven en onder de content div wegkrijg (enkel zichtbaar in Mozilla).
b) Hoe ik padding kan toevoegen aan de content div zonder de content te verneuken (weer enkel in Mozilla).

Ik dacht dat padding IN je div zat (cfr cellpadding) en margins BUITEN je DIV (cfr cellspacing) maar dat heb ik dus niet goed gelezen. In Mozilla worden zowel Padding als Spacing opgeteld bij de totale breedte van je div. Als dit niet werkt moet ik weer een extra div gaan toevoegen die net iets smaller is en horizontaal gecentreerd staat in de content div. Maar dan kan ik evengoed met tabellen gaan klooien

[André]

intGod schreef op 09 februari 2004 @ 08:18:
Ik dacht dat padding IN je div zat (cfr cellpadding) en margins BUITEN je DIV (cfr cellspacing) maar dat heb ik dus niet goed gelezen. In Mozilla worden zowel Padding als Spacing opgeteld bij de totale breedte van je div. Als dit niet werkt moet ik weer een extra div gaan toevoegen die net iets smaller is en horizontaal gecentreerd staat in de content div. Maar dan kan ik evengoed met tabellen gaan klooien

Dan moet je de box-model even veranderen.

[search=box-model]:

Cascading Stylesheet:

* {
  -moz-box-sizing     :   border-box; 
  box-sizing          :   border-box;
}

[ Voor 9% gewijzigd door André op 09-02-2004 08:24 ]

[kleautviool]

Denk dat het in dit geval om de padding-box gaat ipv de border-box

Waarom heb je trouwens een tabel om je divs heen? Je kunt ook gewoon in css centreren hoor

Cascading Stylesheet:

body {
  text-align: center;
  margin: 0;
}
div#container {
  width: 750px;
  margin: 0 auto;
  text-align: left;
}

[ Voor 60% gewijzigd door kleautviool op 09-02-2004 10:49 ]

[klokop]

Oplossing voor beide problemen:

code:

body {
  font-family:        verdana, arial, helvetica, sans-serif;
  background:         #ffffff;
  margin:             0px;
}

table{
  width: 750px;
 }

div#header {display: none}
div#flavour {display: none}

div#menu {
  height:             24px;
  vertical-align:     bottom;
  align: right;
  color:              #ffffff;
  font-size:          12px;
  }

div#navigation2 {
  height:             20px;
  background:     #E0C886;
  color:               #000000;
  font-size:         10px;
  margin:            0px;
  text-align:        right;
}

div#content {
  background:         #ffffff;
  color:              #000000;
  padding: 10px;
}

(header en flavour ff verborgen)
Padding werkt bij mij (moz. firefox) volgens mij zoals TS het bedoeld
Trouwens, je zet nu alle divs vast op 750px. Volgens mij is het handiger om de buitenste table (of div) op een vast breedte te zetten, en de divs die daarin staan op 100% breedte (of niks, want een div neemt automagisch 100% breedte aan).