Sie haben eine Website, aber die Div-Boxen sind nicht richtig ausgerichtet. Dies kann aus verschiedenen Gründen passieren, insbesondere wenn Sie die Positionsprobleme bei Divs von einer Website zur anderen berücksichtigen. Ebenso können sich Boxelemente aus verschiedenen Gründen überlappen, von Positionierungsfehlern über Überlaufprobleme bis hin zu einfachen Float-Problemen. In den meisten Fällen kann das Problem durch eine schnelle und einfache Änderung des Stylesheets Ihrer Website behoben werden.

1

Fügen Sie einen Rand hinzu, wenn die Felder derzeit keine Ränder haben und sich nur geringfügig überlappen. Sie können einen Rand nur auf einer Seite festlegen, z. B. links, wenn Sie nur das Randelement verwenden möchten, um das andere Boxelement wegzuschieben. Wenn beispielsweise div A und div B nebeneinander platziert werden und div B auf der linken Seite überlappt, können Sie Ihr Stylesheet so ändern, dass ein linker Seitenrand für div A wie folgt hinzugefügt wird:

a {Breite: 100px; Rand links: 10px; }

2

Durchsuchen Sie Ihr Stylesheet nach Positionierungswerten, die Überlappungen verursachen können, und ändern Sie diese. Wenn Sie die div-Elemente Ihrer Website mithilfe der absoluten Positionierung anordnen, ist dies ein Alleskönner - jedes Element kann ein beliebiges anderes Element auf der Seite überlappen. Wenn Sie also div A als 100 Pixel breit und 15 Pixel von oben und links auf der Seite festgelegt haben, muss div B mindestens 115 Pixel auf der linken Seite sein, damit sich div A nicht überlappt oben oder unten und von rechts oder links.

3.

Legen Sie ein Div mit einer bestimmten Breite fest und blenden Sie den Überlauf aus. Dadurch wird verhindert, dass das div eine festgelegte Größe überschreitet, und der Inhalt wird sozusagen überschwemmt. Wenn beispielsweise div A keine festgelegte Breite hat und Sie ein großes Bild einfügen, wird das div automatisch erweitert, um das Bild aufzunehmen. Wenn Sie die Breite einstellen, wird das Bild immer noch über die Ränder des Divs hinaus angezeigt, das Div wird jedoch nicht erweitert. Wenn Sie den Überlauf ausblenden, wird das Bild nur innerhalb der Grenzen von div angezeigt und das Element wird nicht erweitert. Wenn Sie beispielsweise festlegen, dass div A 200 Pixel breit ist und nicht überläuft, verwenden Sie diesen Style-Code:

a {Breite: 200px; Überlauf versteckt; }

4

Verwenden Sie die Option "Float", um Div-Boxen automatisch nebeneinander zu stapeln. Beispielsweise möchten Sie, dass div A als Seitenleiste fungiert, und div B, um Ihren Inhalt zu speichern. Sie können beide Divs nach links verschieben, sodass sie horizontal ausgerichtet werden. Floated div-Elemente überlappen sich nicht. Ein Beispiel für zwei Floated-Elemente sieht in etwa so aus:

a {Breite: 150px; Schwimmer: links; }

b {Breite: 400px; Schwimmer: links; }

Tipps

• Wenn Sie Firefox verwenden, können Sie mit der rechten Maustaste auf eine Box klicken und "Element prüfen" auswählen. Dadurch erhalten Sie einen visuellen Überblick über jedes Element, mit dem Sie häufig ein besonders schwieriges Problem identifizieren können.
• Sie können den Überlauf so einstellen, dass er nur auf der X- oder Y-Achse mit "Überlauf-x" oder "Überlauf-y" ausgeblendet wird.