Fix voor je logo:
Verander dit:
#divHeaderTop {
width: 80%;
margin: auto;
height: 60px;
}
naar het volgende:
#divHeaderTop {
overflow: auto;
width: 80%;
margin: auto;
}
Als je trouwens met margins werkt zoals in jouw voorbeeld, ga dan niet 2x margin binnen dezelfde div definieren. Dit leidt vaak tot verwarring en ongewenst gedrag. Beste is vaak om er een div extra omheen te zetten waarmee je ook kunt positioneren door middel van paddings en/of margins.
Thread starter
matt10
(@matt10)
Bedankt voor je reply.
Ik heb het toegevoegd. Voor chrome en IE9 werkt het prima!
Alleen niet in firefox. Ik snap de logica ook niet.
Verder vind ik het vreemd dat als ik de #divprimary1 een margin geef van 50px, dat vervolgens de div erboven ook 50 in grootte toe lijkt te nemen?!
Kun je er nog iets meer over vertellen?
Nou ja, in principe zeg je met margin: 50px auto; hetzelfde als margin: 50px auto 50px auto;
Hij vult namelijk zelf de waardes in wanneer je waardes weg laat. Officieel moet je dus 4 waarden definieren, margin-top: 50px, margin-right: auto, margin-bottom: 50px, margin-left: auto; en kan dus ook geschreven als margin: 50px auto 50px auto; en verkort als margin: 50px auto;
Jij gebruikt echter 50px auto wat dus neerkomt op BOVEN + ONDER 50px en RECHTS EN LINKS automatische bepaling.
De auto is eigenlijk een centreer methode gezien een div standaard de eigenschap relative heeft en een display block. Door er links en rechts een auto marge aan te geven druk je iets in het midden.
Thread starter
matt10
(@matt10)
Bedankt voor je bericht.
Toch denk ik dat er nog iets anders speelt. Ik begrijp wat je bedoeld met de margins voor alle 4 de waarden.
Ik heb de div #divPrimary1 die ik een waarde geef:
#divPrimary1 {
margin: 50px auto;
width: 80%;
}
Zoals verwacht komt er een margin van 50px boven en onder deze div.
Directe link:
http://www.netwerksupport.nu/wat-is-netwerkcoaching/
Alleen wordt de witruimte onder #divHeaderTop ook groter terwijl die niet zou mogen veranderen.
Misschien kun je de waardes van 50px naar 100px veranderen en zie je duidelijker wat er gebeurd?
Ik heb het probleem in lege pagina nagebouwd met slechts 3 divs en daar is het allemaal geen probleem :S
Weet je nog iets?
Snap niet zo goed wat je bedoelt want de ruimte komt overeen met de margin die je hem hebt gegeven.
Ik heb even een klein voorbeeldje gemaakt betreffende je structuur. Uitgegaan van max 500px breed maar je snapt het idee. Kun je hier misschien iets mee?
http://jsfiddle.net/ruurd/ug59mbu3/1/
Thread starter
matt10
(@matt10)
hoi Ruurd,
Fijn dat je zoveel mee wilt kijken.
Ik heb je opzet bekeken en begrijp wat er staat. Ik kreeg daardoor het idee dat mijn probleem alleen bij firefox speelt.
Ik heb een afbeelding gemaakt waar je kunt zien hoe ik het zie:
http://www.netwerksupport.nu/margin1.jpg
Ik heb daar #primary-menu de volgende css meegegeven:
`
#primary-menu{
width:80%;
margin:auto;
margin-bottom:50px;
}
`
Klopt het dat je daar nu ook 50px boven de rode menu balk ziet staan?
tnx!
Thread starter
matt10
(@matt10)
Waarschijnlijk is het een bug.
Het lijkt hier iets mee te maken te hebben:
http://stackoverflow.com/questions/13070630/firefox-body-margin-bug
:S
Is je probleem inmiddels verholpen?
Thread starter
matt10
(@matt10)
hoi ruurd,
Ja ik kan weer vooruit. Het was denk ik een bug. Bedankt voor je berichtjes.
Graag gedaan zet je het topic op [resolved]?
