<ul> und die Position des Bullet

[Robert R.]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

kann ich das irgendwie vernünftig mit CSS steuern, an welcher vertikalen Position das Bullet einer Unordered List erscheint?

Dahinter kommt als <li> nur ein Link, der ein Bild enthält. Das Bullet steht nun immer auf der Sockellinie des Bildes und ich bekomme das da nicht weg. Ich hätte es gerne mittig (middle) angeordnet, aber vertical-align geht ja nur für Tabellen und nicht für Listen?

Spirituelle Grüße Euer Robert

[Gunnar Bittersmann]

@@Robert R.:

aber vertical-align geht ja nur für Tabellen

Nein. Geht auch für Bilder.

LLAP

[Robert R.]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

aber vertical-align geht ja nur für Tabellen

Nein. Geht auch für Bilder.

Was heißt das? Auf welches Element muss ich denn dann das vertical-align anwenden? Das Ganze erschließt sich mir im Moment überhaupt nicht :-(

Spirituelle Grüße Euer Robert

[Matthias Apsel]

Om nah hoo pez nyeetz, Robert R.!

aber vertical-align geht ja nur für Tabellen

Nein. Geht auch für Bilder.

Was heißt das? Auf welches Element muss ich denn dann das vertical-align anwenden?

Auf das inline-Element, was du an den Zeilen des Block-Elementes ausrichten möchtest. Du verschiebst also nicht das Bullet sondern das Bild.

Matthias

[Robert R.]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

aber vertical-align geht ja nur für Tabellen

Nein. Geht auch für Bilder.

Was heißt das? Auf welches Element muss ich denn dann das vertical-align anwenden?

Auf das inline-Element, was du an den Zeilen des Block-Elementes ausrichten möchtest. Du verschiebst also nicht das Bullet sondern das Bild.

Ich habe jetzt mal vorsichtig eingefügt:

	#vertnavi ul img {
		vertical-align: middle;
		border: none;
		margin-top: 3px;
		margin-bottom: 3px;
	}

Das "margin" wirkt sich dabei nun direkt auf das Bild aus und deshalb fallen die beiden (top, bottom) nicht zusammen. Müsste ich also die Margin-Deklaration besser für das <li> machen? Die <li> sollen ja nur einen sichtbaren Abstand halten.

Und weil ich ja dann auch nie genug bekomme, würde ich dieselbe Wirkung gerne für Textzeilen haben, die aufgrund ihrer Länge automatisch umgebrochen wurden. Also, dass das Bullet nit vor der ersten Zeile steht, sondern eben auch mittig.

Nun bin ich aber mit meinem CSS-Latein am Ende!

Spirituelle Grüße Euer Robert

[MrMurphy]

Hallo

Und weil ich ja dann auch nie genug bekomme, würde ich dieselbe Wirkung gerne für Textzeilen haben, die aufgrund ihrer Länge automatisch umgebrochen wurden. Also, dass das Bullet nit vor der ersten Zeile steht, sondern eben auch mittig.

Füge das Bullet als Hintergrundgrafik ein, dann kannst du es vertikal-mittig problemlos ausrichten. Den Pfad zur Grafik musst du natürlich zu einer Grafik von dir anpassen:

      ul {
         padding-left: 0;
      }
      li {
         list-style-type: none;
         background-image: url("../bilder/bullet/bullet_526.gif");
         background-repeat:no-repeat;
         background-position: left center;
         padding-left: 2rem;
      }

Ich habe noch nach einer Lösung gesucht als Grafik ein Font-Icon (wie von Font-Awesome) zu verwenden, aber keine Lösung gefunden.

Gruss

MrMurphy

[Robert R.]

Lieber MrMurphy, liebe Mitdenker, liebe Wissende, liebe Neugierige,

ja!

Und weil ich ja dann auch nie genug bekomme, würde ich dieselbe Wirkung gerne für Textzeilen haben, die aufgrund ihrer Länge automatisch umgebrochen wurden. Also, dass das Bullet nit vor der ersten Zeile steht, sondern eben auch mittig.

Füge das Bullet als Hintergrundgrafik ein, dann kannst du es vertikal-mittig problemlos ausrichten. Den Pfad zur Grafik musst du natürlich zu einer Grafik von dir anpassen:

Liest sich erstmal gut. Danke für den Tipp.

Das sollte doch eigentlich auch mit einem Vordergrund-Symbol funktionieren? Probier ich gleich nochmal aus. Der Gedanke dabei ist, dass Hintergrundgrafiken ggf. nicht mit gedruckt werden, wenn der Client den Hintergrund ausgeschaltet hat.

Eine Grafik für das Bullet hat den zusätzlichen Vorteil, dass ich da noch Information zum List-Item drin unterbringen kann (interner Link|externer Link), "(online|offline)". Den Style kann ich doch als Inline-Style pro <li> angeben, oder?

Jetzt hast Du mich - glaube ich - auf die richtige Idee gebracht :-)

>       ul {
>          padding-left: 0;
>       }
>       li {
>          list-style-type: none;
>          background-image: url("../bilder/bullet/bullet_526.gif");
>          background-repeat:no-repeat;
>          background-position: left center;
>          padding-left: 2rem;
>       }
> 

Ich habe noch nach einer Lösung gesucht als Grafik ein Font-Icon (wie von Font-Awesome) zu verwenden, aber keine Lösung gefunden.

Spirituelle Grüße Euer Robert

[Matthias Apsel]

Om nah hoo pez nyeetz, MrMurphy!

Ich habe noch nach einer Lösung gesucht als Grafik ein Font-Icon (wie von Font-Awesome) zu verwenden, aber keine Lösung gefunden.

li {
    display: table;
}
li::before {
    content: "A";
    display: table-cell;
    vertical-align: middle;
}

Matthias

[MrMurphy]

Hallo,

danke, das funktioniert.

Gruss

MrMurphy

[Matthias Apsel]

Om nah hoo pez nyeetz, Robert R.!

kann ich das irgendwie vernünftig mit CSS steuern, an welcher vertikalen Position das Bullet einer Unordered List erscheint?

line-height, vertical-align

Dahinter kommt als <li> nur ein Link, der ein Bild enthält. Das Bullet steht nun immer auf der Sockellinie des Bildes und ich bekomme das da nicht weg. Ich hätte es gerne mittig (middle) angeordnet, aber vertical-align geht ja nur für Tabellen und nicht für Listen?

vertical-align dient dazu, inline-Elemente innerhalb von block-Elementen bzw. an den Textzeilen des Blockelements* auszurichten.

• Auch wenn die Unterscheidung in Block- und Inline-Elemente nicht mehr richtig ist. Siehe http://wiki.selfhtml.org/wiki/HTML/Kategorien_von_Elementen#HTML_4_und_vorher

Matthias