HTML/CSS Textausrichtung von <li>-Element bei eigener Bullet-Grafik (erledigt!)

[Duderich]

Servus!

Arbeite grade mal wieder an ner Homepage und hab das erste mal eine eigene Bullet-Grafik erstellt.

Jetzt ist das Problem das die Grafik höher ist als der Text.
Dieser Text wird nun leider am unteren Rand der Grafik ausgerichtet, ich möchte ihn jedoch mittig haben.

Weiß jemand, wie ich die Position des Textes beeinflussen kann? Habe leider bisher nichts gefunden. Dachte mit line-height geht vielleicht was, hat sich aber nichts verändert...

Danke schon mal!

Gruß Dude

 

[theHacker]

li {
  position: relative;
  top: -2px;
}

müsste funktionieren, um den Text nach oben zu verschieben. Kann aber sein, dass mans cleverer machen kann.

 

[Duderich]

Da hat er mir jetzt Grafik und Text nach oben geschoben..

 

[QuArK007]

ich weiß nicht, ob ich da richtig bin, aber hast dus mal mit "line-height:10px;
" probiert? Damit gibst du der Zeile eine Höhe.. wenn die genauso groß ist, wie das Bild hoch ist, dann müsste der Text auch vertikal zentriert sein.

 

[Duderich]

Wie oben geschrieben, mit line-height hab ichs schon probiert.. Aber danke!

 

[QuArK007]

Sry hab ich net gelesen! dann gib uns doch mal bitte ein Beispiel Code oder lad die Seite eben mal schnell hoch!

Wenn du die Box richtig definierst, dann funktioniert Line-height auch. Mit dem Code kommen wir hier sicher schneller voran!

 

[Duderich]

Da gibts nicht viel Code, sehr schlicht..

Die Liste ist in einem Content Div:

#content
{
width:760px;
padding:0 0 20px 20px;
margin:0px;
float:left;
}

Und hier das CSS zum <ul> und <li>:

ul
{
margin:0 0 10px 0;
padding:0 0 0 30px;
list-style-image:url("images/dot.jpg");
list-style-position:outside;
}

li
{
font-family:Arial, Verdana, Helvetica, sans-serif; 
font-size:12px;
color:#000;
text-decoration:none;
margin:0px;
padding:0px;
}

 

[QuArK007]

mhm ok, das scheint nicht so einfach zu sein wie gedacht! Aber ich hab nen Work-Around:

ul { margin:0 0 10px 0; padding:0 0 0 30px;}
li
{
display: block;
background-image:url("images/dot.jpg");
background-repeat: no-repeat;
background-position: left;
width: 200px;
height: 71px;
text-indent:72px;
background-color: #FF0000;
font-family:Arial, Verdana, Helvetica, sans-serif; 
font-size:12px;
color:#000;
text-decoration:none;
line-height:71px;
}

Dann hast du das BIld halt einmal als HIntergrund und der Text wird eingerückt! Vielleicht reicht dir das ja!

 

[Duderich]

Ich schaus mir nachher mal an, bin grad an andrer Stelle beschäftigt.. aber danke dir schon mal!

 

[strolch00]

*edit 2 Absoluter Schmarrn hab grad nochmal nachgeschaut und ich hatte mich da vertan.

 

[checkerishier]

ul {position:relative;
margin:4px 0 10px 0;
padding:0 0 0 30px;
list-style-image:url (images/dot.jpg);
list-style-positionutside; }

Klappt das?

 

[Duderich]

Klappt das?

Nope!

@ QuArK007 deins hat soweit gepasst, musste natürlich noch die ein oder andere Zahl anpassen, aber ansonsten wunderbar! Danke dir nochmals.

 

[theHacker]

Da ich das grade selber brauche, buddel ich den Thread mal aus.

Dann hast du das BIld halt einmal als HIntergrund und der Text wird eingerückt! Vielleicht reicht dir das ja!

Funktioniert soweit ganz gut, allerdings nur, solange das <li>-Element nur eine Zeile Text enthält. Hast du eine zweite Zeile, passiert dir das hier:

ICON ******
*******

und der Text fließt außenrum.

Will man das nicht, muss man statt text-indent padding verwenden.