Li Bullet und Text auf gleiche Höhe bringen

[hotti]

hi,

siehe Link. Der Text müsste ein kleines Stückchen höher, mit vertical-align bin ich jedoch nicht weiter gekommen. Wie gehts zu machen?

Vielen Dank im Vorab,
Horst Eierstich

[Matthias Apsel]

Om nah hoo pez nyeetz, hotti!

siehe Link. Der Text müsste ein kleines Stückchen höher, mit vertical-align bin ich jedoch nicht weiter gekommen. Wie gehts zu machen?

Ich glaube, eine verticale Ausrichtung des li-Bullets ist nicht vorgesehen. Für moderne Browser könnte ::marker das gewünschte leisten.

Vorschlag: Monde als Hintergrundbild. Da kannst du gleich noch sprites verwenden.

Matthias

[hotti]

hi, danke Euch!!!

Vorschlag: Monde als Hintergrundbild. Da kannst du gleich noch sprites verwenden.

Das verstehe ich nicht, Hintergrund für was?

In der Tabelle habe ich die Monde als Hintergrund, da weiß ich auch, wo ;)

Viele Grüße,
Horst Moonraker

[Matthias Apsel]

Om nah hoo pez nyeetz, hotti!

Vorschlag: Monde als Hintergrundbild. Da kannst du gleich noch sprites verwenden.
Das verstehe ich nicht, Hintergrund für was?

na für die li-Elemente.

Matthias

[hotti]

hi Matthias,

na für die li-Elemente.

Versuch macht kluch und mir gefällts ;)

Danke Allen fürs mitdenken,
die Grafiken werde ich mal überarbeiten ;)

Horst Eierstich

[misterunknown]

Moin,

siehe Link. Der Text müsste ein kleines Stückchen höher, mit vertical-align bin ich jedoch nicht weiter gekommen. Wie gehts zu machen?

Schön sauber meines Wissens nicht. Man kann sich behelfen:

ul { list-style:none; }  
  
ul li {  
    background:url('/astro/[Name].gif');  
    height:50px;  
    padding-left:45px;  
    display: table-cell;  
    vertical-align: middle;  
}

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

ul li {
    background:url('/astro/[Name].gif');
    height:50px;
    padding-left:45px;
    display: table-cell;
    vertical-align: middle;
}[/code]

wenn man auf table-cell verzichtet, kann man die gewünschte Höhe via line-height erreichen.

Matthias

[misterunknown]

Moin,

wenn man auf table-cell verzichtet, kann man die gewünschte Höhe via line-height erreichen.

Stimmt.

Kurzer Test zeigt: height, display und vertical-align kann man mit line-height:32px; ersetzen. Weniger Code und logisch sinnvoller.

Grüße Marco

[Gunnar Bittersmann]

@@hotti:

nuqneH

siehe Link. Der Text müsste ein kleines Stückchen höher, mit vertical-align bin ich jedoch nicht weiter gekommen. Wie gehts zu machen?

Verwende nicht list-style-image, sondern good ol’ background-image. Dazu padding-left: $Bildbreite + $Abstand und line-height: $Bildhöhe und list-style: none (letzteres gleich für das Listenelement, welches gerne ol sein darf, da die Listitems in einer bestimmten (zeitlichen) Reihenfolge sind.

Warum verwendest du so hässliche verpixelte Grafiken? Erstelle vernünftige, SVG bietet sich an. Du kannst auch aus dem Unicode-Vorrat schöpfen:
○   25CB  WHITE CIRCLE
●   25CF  BLACK CIRCLE
◐   25D0  CIRCLE WITH LEFT HALF BLACK
◑   25D1  CIRCLE WITH RIGHT HALF BLACK
☽   263D  FIRST QUARTER MOON
☾   263E  LAST QUARTER MOON
🌑   1F311  NEW MOON SYMBOL
🌓   1F313  FIRST QUARTER MOON SYMBOL
🌕   1F315  FULL MOON SYMBOL
🌗   1F317  LAST QUARTER MOON SYMBOL

Unter „zunehmendem Mond“ verstehe ich die gesamte Zeitspanne zwischen Neumond und Vollmond; unter „abnehmendem Mond“ die zwischen Vollmond und Neumond. Die korrekten Bezeichnungen für Halbmond wären „erstes Viertel“ und „letztes Viertel“.

Qapla'

[hotti]

hi,

[..] Du kannst auch aus dem Unicode-Vorrat schöpfen:

Jow, das wäre ideal:

🌑   1F311  NEW MOON SYMBOL
🌓   1F313  FIRST QUARTER MOON SYMBOL
🌕   1F315  FULL MOON SYMBOL
🌗   1F317  LAST QUARTER MOON SYMBOL

Mein Browser stellt diese Zeichen nicht dar. Kömma da was machen?

Viele Grüße,
Hotti

[Gunnar Bittersmann]

@@hotti:

nuqneH

Jow, das wäre ideal:

🌑   1F311  NEW MOON SYMBOL
🌓   1F313  FIRST QUARTER MOON SYMBOL
🌕   1F315  FULL MOON SYMBOL
🌗   1F317  LAST QUARTER MOON SYMBOL

Mein Browser stellt diese Zeichen nicht dar. Kömma da was machen?

Browser-Update? OS-Update? ;-)

Eigenen Icon-Font erstellen.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, hotti!

Mein Browser stellt diese Zeichen nicht dar. Kömma da was machen?

Einen Zeichensatz via @font-face oder per

@import url(http://fonts.googleapis.com/css?family=Mondsucht);  

oder

<link href='http://fonts.googleapis.com/css?family=Mondsucht' rel='stylesheet' type='text/css'>  

einbinden.

Matthias

[Der Martin]

Hallo,

🌑   1F311  NEW MOON SYMBOL
🌓   1F313  FIRST QUARTER MOON SYMBOL
🌕   1F315  FULL MOON SYMBOL
🌗   1F317  LAST QUARTER MOON SYMBOL
Mein Browser stellt diese Zeichen nicht dar.

meiner auch nicht. Kann er auch nicht, weil auf dem System keine Schrift existiert, die diese Zeichen enthält. Weder DejaVu in einer seiner Varianten, noch Droid, noch Liberation, noch die nachträglich hinzuinstallierten Windows-Fonts Tahoma und Verdana.

Die Zeichentabelle ist bei diesen Codes aus demselben Grund auch machtlos.

Kömma da was machen?

Ja. Grafiken verwenden. ;-)
Denn man muss wohl davon ausgehen, dass viele andere Nutzer diese Zeichen auf ihrem Rechner ebenfalls nicht zur Verfügung haben.

Ciao,
 Martin

[hotti]

hi,

Ja. Grafiken verwenden. ;-)

Also doch: PIXEL ;)

Denn man muss wohl davon ausgehen, dass viele andere Nutzer diese Zeichen auf ihrem Rechner ebenfalls nicht zur Verfügung haben.

Genau! Btw., damit nicht mehr soviele rumrätseln müssen, wie ich so programmiere, habe ich dem ganzen Kram hier mal aufgeschrieben.

Viele Grüße,
Horst Pickel

[Der Martin]

Hi,

Unter „zunehmendem Mond“ verstehe ich die gesamte Zeitspanne zwischen Neumond und Vollmond; unter „abnehmendem Mond“ die zwischen Vollmond und Neumond.

das ist, glaube ich, auch die übliche Auffassung.

Die korrekten Bezeichnungen für Halbmond wären ...

... Halbphase oder Dichotomie, wenn man zu- oder abnehmenden Mond nicht unterscheiden will/muss.

„erstes Viertel“ und „letztes Viertel“.

Korrekt.

Ciao,
 Martin