 Moderator |
|
Het lijkt mij ook een beetje een kwestie van een gevoel ontwikkelen voor het gebruik van HTML+CSS.
Ik weet niet hoeveel ervaring je hier al mee had voordat je begon met responsive design maar als je wat handigheid hebt met en redeneert via het CSS box model dan kom je hier al best een eind mee.
(o.a.) De marge wordt bij de afmetingen van de (content van de) box opgeteld, dus als een box een marge heeft (en de content al 100% van de beschikbare breedte in beslag neemt) dan wordt de totale breedte van de box groter dan wellicht de bedoeling was zoals bij jouw oorspronkelijke probleem gebeurde.
Daarnaast heeft volgens mij elke moderne browser een developer console met hierin een "element inspector", te vinden onder de functietoets F12. Meestal zit er een icoon met een pijltje linksboven in deze balk met tooltips als "Click an element in the page to inspect". Vervolgens kun je door je pagina heenscrollen en over de verschillende elementen heen zweven. In je console zie je je DOM-structuur en CSS-klasses meespringen. De oorzaak voor jouw probleem had ik dus op deze manier ook redelijk snel gevonden. Er was één box die verdacht veel uitstak  . Vervolgens kun je in je console interactief de CSS wijzigen, om realtime te zien wat het effect van een wijziging is (in plaats van de ouderwetste methode van trial en error waarbij je een CSS-regel aanpast en vervolgens de pagina ververst). Toen ik de margin uit de #main klasse schrapte was het ongewenste gedrag weg.
Door een slimme gebruikmaking van dit soort gereedschap kan ontwikkeling enorm versneld worden en wordt het opsporen van dit soort zaken een stuk eenvoudiger. |
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
