Vreemde ruimtes onder en boven DIV.

Pagina: 1
Acties:

  • intGod
  • Registratie: Maart 2003
  • Niet online

intGod

Ars non postulat causam

Topicstarter
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é
  • Registratie: Maart 2002
  • Laatst online: 26-05 00:33

André

Analytics dude

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:
1
2
3
4
* {
  -moz-box-sizing     :   border-box; 
  box-sizing          :   border-box;
}

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


  • kleautviool
  • Registratie: Mei 2003
  • Laatst online: 21-05 19:24
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:
1
2
3
4
5
6
7
8
9
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
  • Registratie: Juli 2001
  • Laatst online: 30-03 19:56

klokop

swiekie swoeng

Oplossing voor beide problemen:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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).

"Passing silhouettes of strange illuminated mannequins"