Listenaufzählung - Abstand zwischen Bild und Text?

[johnxy]

Hallo,

ich betreibe einen Wordpress Blog und habe dort ein ziemlich kaputtes Theme. Es existierte keine CSS Klasse für die Listenaufzählung, deswegen habe ich eine erstellt, damit immer ein Punkt angezeigt wird.

.postItem li {
    background: url(http://xxxx.xx/bullet.gif) 0 7px no-repeat;

Nun habe ich noch folgendes Problem: Der Text startet direkt "im" Punkt. D.h. es gibt keinen Abstand. Das ganze mal als Bild:



Hier der Punkt ohne Text:


Wie krieg ich das jetzt hin?
Und optional wäre es noch schön, wenn das ganze eingerückt wäre, also nicht ganz auf der linken Seite. Aber das mit den Text ist erstmal wichtiger.

Gruß

EDIT: Wow.. jetzt hab ich's...

list-style-position: inside

fehlt noch das andere Problem mit den einrücken

Edit2: Ok, doch nicht.

Also, bei <li> balbal </li> funktioniert alles. Wenn das allerdings noch in <ul> drin ist, dann kommt wieder das alte Problem. Meine Klassen in CSS nützen nichts:

.postItem li {
    background: url(http://xxxx.xx/bullet.gif) 0 7px no-repeat;
    list-style-position: inside;
    
}

.postItem ul li {
    background: url(http://xxxx.xx/bullet.gif) 0 7px no-repeat;
    list-style-position: inside;
}

.postItem ul {
    list-style-position: inside;
}

liegt das dadran, dass in den main-styles folgendes deklariert wurde?

ul {
    list-style:none;
}

 

[threadi]

Stell dir vor Du hast ein Element in dem ein Text steht. Dieser Text beginnt ganz Links in dem Element. Dem Element fügst Du dann ein Hintergrundbild hinzu, welches Du auch links positionierst. Logisch, dass das Hintergrundbild dann vom Text überlagert wird. Text kann sich ja nicht nach Hintergrundangaben ausrichten, weil er davon nichts weiß.

Die Lösung wäre für den Text einen Abstand nach Links in mindestens der Breite anzugeben die das Hintergrundbild breit ist. Also:

.postItem ul li {
    background: url(http://xxxx.xx/bullet.gif) 0 7px no-repeat;
    padding-left: 7px;
}

Da Du hier einen Listenpunkt verwendest, könntest Du auch "list-style-image" verwenden. Dadurch wir dem Listenpunkt die Grafik als Listenpunkt übergeben. Nachteil davon ist jedoch, dass dieses im Gegensatz zu einem Hintergrundbild nicht frei positioniert werden kann und zudem in manchen IEs anders positioniert wird. Ein Hintergrundbild zu verwenden, wie Du es gerade schon versuchst, ist an sich das Beste :)

 

[johnxy]

Vielen herzlichen Dank! Es funktioniert!

Zwar hat jetzt <ul><li></li></ul> keinen Sinn mehr, da es den gleichen Effekt wie einfach nur <li></li> hat, aber wenigstes muss ich nicht die 200 Artikel umschreiben wegen den Mist mit den neuen Theme :)

Das Ding bringt mich um, die search.php war auch ein Knaller: hatte man einen Artikel aufgeschlagen (http://xxxx.xx/windows-9-die-zukunft/) und benutzte man dann die suchfunktion, dann suchte der doch tatsächlich über folgenden Link: http://xxxx.xx/windows-9-die-zukunft/?s=suchwort Ich weiß nicht, was die da zusammengebastelt haben, aber es war schrecklich