gekke margin

[Niellles]

Zoals te zien op http://eco-les.digitaledenktank.org/test/ zit er onder mijn header en boven het begin van mijn menu een gekke witte ruimte.

Ik kan het oplossen door een negatieve margin toe te voegen aan het menu, maar ik wil graag weten waar het probleem vandaan komt.

De elementen moeten dus gewoon aansluiten.

Bedankt.

 

[csshunter]

Hoi Niellles,
Als je in Firedox even Firebug installeert, en dan van boven naar beneden de html-elementen doorwandelt, heb je zo te pakken waar het gat vandaan komt:

​

Wie? Het is de <h1> (lichtgeel geblokt als je over de code muist).
Waarom?
Browsers kunnen bij de tekst-elementen p, li, h1, h2, h3, enz. zelf onder en boven het element een margin en/of een padding toevoegen. Het beste is daarom om altijd deze dingen met de css te resetten/normaliseren:

h1, h2, h3, p, li {
   margin: 0;
   padding: 0;
   }

of naar smaak expliciete waarden aan beide eigenschappen toe te kennen.
Dan zijn alle 8 de waarden opgegeven, en kunnen de browsers geen kant meer op.
In jouw geval is het gat gedicht met:

h1 {
   margin: 0;
   padding: 60px 0 0 30px;
   }

(Hier was het de margin die parten speelde).
O ja, je kunt dus in Firebug real-time eigenschappen van een online-pagina veranderen om uit te testen: zo kom ik aan het tweede screenshot.

Met vriendelijke groet,
CSShunter
____________
PS: Als je de css-eigenschappen van de #container doorschuift naar de body-eigenschappen, kan je de hele #container vergeten.

 

[Niellles]

Enorm bedankt!