Wie man Überlappende CSS DIV Tropfen Panels

CSS können Sie überlappen div-Tags, so können Sie ein Bild aus einzelnen Bildern erstellen. Dies bedeutet, dass Sie Bilder in kleinere Dateien geschnitten, um weniger Serverlast, die Ihre Seiten schneller geladen werden in den Browser des Benutzers macht produzieren. Die CSS-Klassen bieten Ihnen eine Möglichkeit, Menüs, visuelle Anweisungen und Website-Header aus Ihren Bildern zu erstellen.

Rechten Maustaste auf die HTML Datei, die Sie bearbeiten möchten, die Ihre divs enthält. Klicken Sie auf "Öffnen mit" und anschließend auf den HTML-Editor Programm, das Sie verwenden möchten.

Erstellen Sie die CSS-Klassen. In diesem Beispiel werden zwei überlappende divs verwendet und jede div ein Bild enthält. Die folgende CSS-Code stellt die div überlappenden Eigenschaften:

script type = "text / css"

div.leftimage {float: left;}

div.rightimage {float: right;}

div.leftimage_width {width: 200px;}

div.rightimage_width {width: 300px;}

div.overlap {position: relative; links: 20px}

/ Script

Richten Sie die divs überlappen. Der folgende HTML-Code erstellt zwei div-Tags, die Sie für den überlappenden Paneele:

div class = "leftimage leftimage_width overlapimg src =" firstimage.gif "/ div

div class = "rightimage rightimage_width img src =" secondimage.gif "/ div

Ersetzen Sie die Bilder mit Ihren eigenen Panel-Bilder.

Speichern Sie die Datei und öffnen Sie die HTML-Seite in Ihrem Web-Browser. Überprüfen Sie die überlappenden divs. Wenn Sie das Bild nach links oder rechts verschieben möchten, müssen Sie die CSS-Klasse-Einstellungen. Normalerweise dauert es ein paar Tests, bevor Sie die richtigen Einstellungen für Ihren pixel div-Tags herausfinden.