Je hebt een website, maar de div-dozen staan ​​niet goed in elkaar. Dit kan om verschillende redenen gebeuren, vooral als u de positieproblemen met div's van de ene website naar de andere bekijkt. Evenzo kunnen boxelementen om een ​​paar redenen overlappen, variërend van positioneringsfouten tot overloopproblemen en eenvoudige floatproblemen. In de meeste gevallen zal een snelle en eenvoudige wijziging van de stylesheet van uw website het probleem oplossen.

1.

Voeg een marge toe als de vakken momenteel geen marges hebben en slechts een klein deel overlappen. U kunt aan één kant een marge instellen, zoals aan de linkerkant, als u alleen het marge-element wilt gebruiken om het andere kaderelement weg te duwen. Als div A en div B bijvoorbeeld naast elkaar worden geplaatst en div B aan de linkerkant overlapt, kunt u uw stylesheet aanpassen om een ​​linkerkantmarge toe te voegen aan div A als volgt:

een {width: 100px; marge links: 10 px; }

2.

Zoek in uw stylesheet naar positioneringswaarden die overlap kunnen veroorzaken en deze kunnen wijzigen. Als u absolute positionering gebruikt om de div-elementen van uw website te rangschikken, dan is dit een 'free-for-all'-element dat elk ander element op de pagina kan overlappen. Dus als u div A-set heeft als 100 pixels breed en 15 pixels van de bovenkant en linkerkant van de pagina, moet div B ten minste 115 pixels naar links zijn om div A niet te overlappen. U kunt de positie van de boven of onder en van rechts of links.

3.

Stel een div in met een specifieke breedte en verberg de overloop. Dit voorkomt dat de div een opgegeven grootte overschrijdt en voorkomt dat content morst als het ware. Als div A bijvoorbeeld geen ingestelde breedte heeft en u een grote afbeelding erin plaatst, wordt de div automatisch uitgebreid om plaats te bieden aan de afbeelding. Als u de breedte instelt, wordt de afbeelding nog steeds weergegeven buiten de randen van de div, maar de div wordt niet groter. Als u de overloop verbergt, wordt de afbeelding alleen binnen de grenzen van de div weergegeven en wordt het element niet uitgevouwen. Als u bijvoorbeeld wilt dat div A 200 pixels breed is en niet overloopt, gebruikt u deze stijlcode:

een {width: 200px; overloop verborgen; }

4.

Gebruik de optie "zweven" om vakken automatisch naast elkaar te stapelen. U wilt bijvoorbeeld dat div A fungeert als een zijbalk en div B om uw inhoud te houden - u kunt beide divs naar links zweven, waardoor ze horizontaal worden uitgelijnd. Drijvende div-elementen overlappen elkaar niet. Een voorbeeld van twee drijvende elementen ziet er ongeveer zo uit:

een {width: 150px; zweven: links; }

b {width: 400px; zweven: links; }

Tips

• Als u Firefox gebruikt, kunt u met de rechtermuisknop op een vak klikken en 'Inspect Element' kiezen. Dit geeft u een visuele schets van elk element dat u vaak kan helpen om een ​​bijzonder lastig probleem op te sporen.
• U kunt overflow instellen om alleen op de x- of y-as te verbergen met "overflow-x" of "overflow-y."