Ersetzen Liste Bullets mit Bildern Mit CSS, Tech für Luddites
von Elizabeth Kricfalusi, Tech für Luddites
Dies ist, was eine Standardliste mit Aufzählungszeichen sieht aus wie auf einer Webseite:
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen
- Liste Punkt 2
- Liste Artikel 3
Der HTML-Code, um diese Liste zu erstellen, sieht wie folgt aus. Das
- steht für „ungeordnete Liste“ und die
- steht für „Listenelement.“ (Wenn Sie Zahlen verwenden statt Kugeln wollen, würden Sie verwenden
- , oder „geordnete Liste“.)
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen
- Liste Punkt 2
- Liste Artikel 3
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen
- Liste Punkt 2
- Liste Artikel 3
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen
- Liste Punkt 2
- Liste Artikel 3
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen
- Liste Punkt 2
- Liste Artikel 3
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen auch.
- Liste Punkt 2
- Liste Artikel 3
- Tag, so dass Sie weitere Attribute verwenden können, um die Positionierung genau so, wie Sie es wollen anzupassen.
So würde die CSS jetzt sein:
li.leaf background: url ( '/ images / leaf_icon.jpg') no-repeat top left;
>und die HTML wäre:
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen
- Liste Punkt 2
- Liste Artikel 3
Die Liste wird dann wie folgt aussehen:
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen auch.
- Liste Punkt 2
- Liste Artikel 3
Nun, natürlich, müssen wir noch ein wenig mehr Arbeit zu tun. Die Kugel Bild wird auf dem Boden abgeschnitten, so dass wir einen Listenelement-Höhenwert festlegen müssen, die mindestens so groß wie die Höhe des Bildes ist. Wir müssen auch Raum zwischen dem Bild und dem Text, die wir padding-left gesetzt werden. Ich verwende auch einige padding-top den Text besser vertikal auszurichten.
Ich kann Ihnen genaue Werte nicht geben, weil es auf einer Reihe von Variablen ab, einschließlich der Größe der Kugel abhängen, wie viel Abstand Sie wollen, Schriftgröße, und so weiter. Aber hier ist die Veränderung, die ich an die CSS und die resultierende Ausgabe gemacht haben.
li.leaf background: url ( '/ images / leaf_icon.jpg') no-repeat top left;
Höhe: 54px;
padding-left: 44px;
padding-top: 3px;
>- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen auch.
- Liste Punkt 2
- Liste Artikel 3
Für kleinere Kugel Images
Die oben genannte Arbeiten sehr gut, wenn Ihr Bild größer als eine Standard-Kugel. Wenn es kleiner, könnten Sie am Ende mit etwas, das wie folgt aussieht:
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen auch.
- Liste Punkt 2
- Liste Artikel 3
Sie können sehen, dass der Text von einer Kugel in die nächste Zeile ausgeführt wird. Nun könnte man das Problem beheben, indem eine größere Höhenwert wieder spezifizieren, aber das wird für eine so kleine Kugel seltsam aussehen, z.B.
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen auch.
- Liste Punkt 2
- Liste Artikel 3
In diesem Fall sollten Sie eine Anzeige Attribut hinzufügen und die Top-Positionierung im Hintergrundbild (ersetzen „top“ mit einer tatsächlichen Dimension) einzustellen. So wird die CSS nun so aussehen:
li.red_square background: url ( '/ images / rot-Quadrat-4 × 4.jpg') no-repeat links 9px;
padding-left: 12px;
Bildschirmsperre;
>Und der Ausgang sein wird:
- Ich schreibe eine lange Liste Punkt 1 so können Sie sehen, was passiert, wenn der Text über mehrere Zeilen umbrochen auch.
- Liste Punkt 2
- Liste Artikel 3
Auch mit den Werten spielen, bis es so, wie Sie es wollen aussieht. Und beachten Sie, dass Sie auch als auch größere Kugel Bilder neu positionieren können, wenn man den Weg nicht wie es mit dem Text auszurichten.
Anmerkung: Dank für die Leser Sibley, den die Spitze zu benötigen einen gemeinsamen „display: block“ -Attribut für kleinere Kugeln.
Mischen Kugeltypen in der gleichen Liste
Schließlich wird durch Klassen der Anwendung - Tags statt der
- Tag können Sie Aufzählungstypen und Bilder innerhalb der gleichen Liste mischen.
- Listenpunkt: Scheiben Kugel
- Listenpunkt: square Kugel
- Listenpunkt: untere griechische Kugel
- Listenpunkt: Blatt Bild Kugel
- Listenpunkt: rotes Quadrat Bild Kugel
- Listenpunkt: Scheiben Kugel
- Listenpunkt: square Kugel
- Listenpunkt: untere griechische Kugel
- Listenpunkt: Blatt Bild Kugel
- Listenpunkt: rotes Quadrat Bild Kugel
Also mit diesem HTML:
Diese verwandelt sich in (mit den entsprechenden Veränderungen an den einzelnen CSS-Klassendefinitionen):
Sie ändern den Stil durch die Definition ändert für
- in Ihrem CSS-Stylesheet.
ul list-style-type: lower-griechisch;
>ul.lower_greek list-style-type: lower-griechisch;
>Dann würden Sie diese Klasse in der hinzufügen
- in der HTML-Tag wie folgt:
Hier ist, was die Liste jetzt aussieht.
Nun, um die Kugel zu einem Bild zu ändern, können Sie ein Attribut namens list-style-Bild auf Ihre CSS-Definition hinzufügen. Für dieses Beispiel verwende ich ein Bild Blatt, das 24 x 38 Pixel ist. Der CSS-Code wäre jetzt:
ul.leaf list-style-image: url ( '/ images / leaf_icon.jpg');
>und die HTML wäre:
Dies ist, was die Liste wie auf der Webseite aussieht:
Jetzt können Sie das Problem mit diesem Ansatz ist, dass die Kugel nicht sehr schön in Bezug auf den Text positioniert ist. Das ist, weil, wenn Sie das list-style-image-Attribut auf dem hinzufügen
- Tag, verwendet es die gleiche Positionierung und den Abstand zwischen der Kugel und dem Text, unabhängig von der Größe des Bildes. Also das könnte gut funktionieren, wenn Ihr Bild etwa die gleiche Größe wie eine Standard-Kugel ist aber nicht so gut, wenn es viel größer oder kleiner ist.
Eine weitere Option ist die Standard-Kugel zusammen mit der beseitigen
- markieren und dann ein Hintergrundbild in der hinzufügen