HTML | Aufzählungszeichen mit Bild

Dienstag, April 17, 2012

Hallo ihr Süßen,

euch sind die normalen Aufzählungszeichen mit einem Punkt zu langweilig? Dann habe ich für euch die optimale Lösung ein Bild als Aufzählungszeichen (siehe rechts) einzufügen.

Bevor wir mit dem HTML-Code anfangen, benötigt ihr ein Icon (eine Menge Auswahl bieten folgende Plattformen IconArchive und FindIcons).
Wenn euch ein Icon für die Aufzählung zusagt, dann speichert ihr dieses auf euren Computer und lädt es z.B. bei Google Picasa oder Photobucket hoch (es gibt auch andere Upload-Verzeichnisse).

Ihr öffnet im Dashboard Design -> HTML bearbeiten. Im HTML-Code sucht ihr nach dem Stichwort ".post {...}". Genau nach diesem CSS-Code fügt ihr bitte folgenden Code ein:

.post ul li {list-style-image: url(bild.gif);}

Definitionen
ul:                           ul steht für eine unsortierte Liste
li:                            Das ist der Listeneintrag in eurer Aufzählung
list-style-image:    Damit wird definiert, dass anstatt einem Punkt ein Bild als Aufzählungszeichen eingefügt wird.
url(bild.gif):           Hier müsst ihr den Pfad eures Icons eintragen. Dazu bild.gif durch euren Bilderpfad überschreiben.

Nun müsst ihr auf Vorlage speichern drücken und wenn alles richtig ist erscheinen all eure Aufzählungen nun mit einem Bild.

Lasst euch bitte nicht irritieren, wenn das Bild im Editor nicht herangezogen wird, da es dort so aussieht:

Ich hoffe, es war soweit verständlich. Fragen werde ich euch gerne in den Kommentaren beantworten.

Eure Geri ♥

You Might Also Like

3 Kommentare

  1. Oh ich finde dein Design super schön *___* Klasse arbeit <33 Wünsch dir noch ne tolle rest Woche ♥ Hast übrigens eine Leserin mehr.

    Liebe Grüße

    Tina

    ♥ www.TinaLaVogue.de

    AntwortenLöschen
  2. hööö wie hast du das gemacht ??

    lg

    schau doch mal auf meinen blog

    www.fabulousglitter.blogspot.com

    AntwortenLöschen
    Antworten
    1. Hi, danke für dein Kommentar.
      Wer lesen kann, ist klar im Vorteil ;-)
      Es steht in meinem Post alles drin, was du für dieses HTML Tutorial wissen musst. Wenn es unverständlich ist, dann sage mir bitte konkret, was an meinem Tutorial nicht zu verstehen ist.
      Aber leider kann ich mit deinem Kommentar nichts anfangen.

      Löschen


Vielen Dank für deinen lieben Kommentar ♥ Ich freue mich über jeden Einzelnen!

Kommentare mit Verlinkungen, Blog-Links oder ähnliches ohne Bezug zum Blogpost, sowie beleidigende Kommentare sind nicht gestattet und werden unverzüglich gelöscht!

Anregungen, Kritik oder Linkempfehlungen könnt ihr mir gerne per Kontaktformular hinterlassen!

Werbung

Community

blogwolke.de - Das Blog-Verzeichnis TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste bloglist.de Deine moderierte Blogliste Blogverzeichnis - Blog Verzeichnis bloggerei.de All Women Sites Ebuzzing - Top Blog - Beauty beautywunder.de Follow

Like us on Facebook

Google Friend Connect