[localex]

Hallo zusammen,

ich möchte in einer Aufzählungsliste vor den einzelnen Listeneinträgen eigene list-style-images als Aufzählungslisten verwenden.

Dazu habe ich 3x3 px große Quadrate gezeichnet.

Im HTML-Editor und im Browser werden die Quadrate nicht vertikal mittig zum nachfolgenden Text gezeigt, sondern sie befinden sich am unteren Ende der Textzeile.

Mit der Bitte um Lösungsvorschläge … VIELEN DANK!

Eine Empfehlung hier im Forum war die Einbindung der Grafik als background-image mit top-Position in em.

SCHÖNES WOCHENENDE!

[heiko_rs]

Zitat von localex

background-image mit top-Position in em

Genau so. list-style ist aufgrund der indifferenten Behandlung durch die verschiedenen Browser nicht wirklich praxistauglich.

[localex]

Zitat von heiko_rs

Genau so. list-style ist aufgrund der indifferenten Behandlung durch die verschiedenen Browser nicht wirklich praxistauglich.

Vielen Dank für die Hilfe!

Kannst du mir bitte dazu die CSS Schreibweise sagen?
Ich verstehe "background-image mit top-Position in em" nicht.

Ich definiere also für LI einer UL ein background-image.

Als background-position wähle ich für das background-image: top oder oben, Abstand nach oben in em?

Vielen Dank für die Antwort!

[heiko_rs]

Eine Deklaration für "background" reicht bereits background: Hintergrundbilder: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

[localex]

Guten Tag!

Vielen Dank für die Antwort.

Also wähle ich als background-position entweder: to /oben ODER Abstand nach oben in em?

Vielen Dank & schönen Tag!


Ein CSS-Rookie ...

[heiko_rs]

Hier mal ein Beispiel, das das Prinzip verdeutlichen sollte:

background: url(/grafiken/punkt.png) no-repeat 0 .4em;

[localex]

Zitat von heiko_rs

Hier mal ein Beispiel, das das Prinzip verdeutlichen sollte:

background: url(/grafiken/punkt.png) no-repeat 0 .4em;

Sorry, aber ich verstehe es nicht ...

[heiko_rs]

Probiere es doch mal aus und gib diese Regel li. Dazu noch list-style: none;. Was genau die einzelnen Werte bedeuten, wird auf dem oben geposteten Link erklärt.

[localex]

Zitat von heiko_rs

Probiere es doch mal aus und gib diese Regel li. Dazu noch list-style: none;. Was genau die einzelnen Werte bedeuten, wird auf dem oben geposteten Link erklärt.

Vielen Dank für die Antwort.

Ich habe es nun (temporär, unklar, ob richtig) so gelöst:

.inhaltsbereich li {
background-image: url(square.gif);
background-repeat: no-repeat;
padding-left: 10px;
background-position: 0.1em;
}

?

[heiko_rs]

Mein Beispiel fasst alles zusammen. Und gib für position 2 Werte an (der erste gilt für horiz., der zweite für vert.).