Listenpunkte: Bild und Text auf gleicher Höhe

Seite 12

1 elena

Hallo,
ich möchte gerne den Text bei den Listenpunkten in etwa auf gleicher Höhe haben. So "hängt" er zu tief. Aber leider kriege ich das nicht so richtig hin.

http://www.s160060504.online.de/reiseberichte/marokko/reiseziele.php

Ich habe es mit einer neuen .middle versucht:
{padding: 12px 0 0 55px;
height:45px;
background: (url../../images/reisen/marokko/allgemein/lesezeichen_tagine.jpg) no-repeat;}

bzw. dann:
<ul style="list-style-type:none;" class="reiseblick">
<li class="middle"><a href....>

Da ich aber viele solcher Seiten habe, müßte ich jedesmal neue Klassen bilden, was die css-Datei unheimlich groß machen würde.

Wer könnte mir hier weiterhelfen??

elena

2 Käptn Blaubär

Vielleicht ich:

style="vertical-align:top"

als Attribut der Listenpunkt-Grafik wäre einen Versuch wert.

3 Jörg Kruse

Hallo elena,

die Höhe von Texten definierst du mittels line-height; danach kannst du diese mittels vertical-align hinsichtlich der Höhe der Bilder zentrieren

.reiseblick li {
line-height:45px;
vertical-align:middle;
}

4 Rudy

versuchs mal mit line-height für das li in der Höhe der list-images. Im Übrigen würde ich dringend dazu raten, die inline-styles und die ausgelagerten Styles nicht so durcheinander zu würfeln. Ein Inline-Style ist nur im ersten Moment eine anscheinend gute Idee, weil er das externe CSS kleiner hält. Bedenke aber, dass eine CSS-Datei nur einmal geladen wird, der HTML-Code mit den Inline-Styles aber jedesmal wenn die Seite aufgerufen wird. Eine Id oder Klasse für das ul wesentlich besser und ungemein leichter zu debuggen, als ein Mix aus inline und ausgelagerten Geschichten.

5 elena

Leider klappt die Chose noch nicht wie gewünscht.
ich habe die Seite "reiseziele.php" einmal kopiert und "reiseziele1.php" genannt:

http://www.s160060504.online.de/reiseberichte/marokko/reiseziele1.php

Die untere Liste mit den Ornamenten als Grafik basiert auf <ul class="reiseblick_rechts1"............</ul>

und entsprechend

.reiseblick_rechts1 li
{
line-height:45px;
vertical-align:middle;
}

Ich habe bei line-height herumprobiert, ebenso bei vertical-align mit top und bottom, hat aber nicht den gewünschten Effekt gebracht (Text soll mittig mit Grafiken sein).

Das Problemchen ist dann wohl doch ein Problem und schwerer zu lösen als ich dachte.

elena

6 Jörg Kruse

Hallo elena,

als erstes würde ich die <br/>s aus den Listen rausschmeißen und die Abstände zwischen den Listenelementen üer margin herstellen

Mit Opera funktioniert das eigentlich recht gut - aber mit Firefox scheint es Probleme zu geben. Ich glaube Zentrierung mit einer Bullet-GRafik war schon immer etwas problematisch

Alternativ würde ich den Listenpunkten ein Hintergrundbild verpassen sowie ein linkes padding in der Breite dieses Bildes:

.reiseblick li {
padding:0 0 0 45px;
margin:0 0 30px;
background-image: url(../../images/reisen/marokko/allgemein/lesezeichen_tagine.jpg);
background-repeat:no-repeat;
line-height:45px;
vertical-align:middle;
}

Der letzte margin Wert sorgt hierbei für den Abstand zwischen den Listenpunkten

Und das HTML ohne <br/>s und ohne Bullet-GRafik:

<ul class="reiseblick">
                        <li><a href="reisebericht_marokko_teil1.php" target="_top"> Die K&uuml;ste bis Essaouira </a></li>
                            <li><a href="reisebericht_marokko_teil2.php" target="_parent">Nach S&uuml;den bis Tafraoute</a></li>
<!-- und so weiter -->
</ul>

Das sollte in allen Browsern gleichermaßen funktionieren

7 elena (Gast)

Danke erst einmal für die rasche Antwort!
Was mache ich aber, wenn ich auf meinen Seiten bis jetzt 17 ausführliche Reiseberichte (in der Endfassung) und folglich mindestens 25 verschiedene Listenpunktgrafiken habe?? ( Für Neueseeland sind andere, für Australien etc.) Oben ist ja in .reiseblick li die Hintergrundgrafik angegeben. Ich müßte dann für alle Fälle jeweils neue "reiseblick li" bilden, also z.B. "reiseblick_afrika li" etc.

Ich habe auch weiter herumprobiert und diesen Entwurf gemacht:

http://www.s160060504.online.de/reiseberichte/marokko/reiseziele2.php

Ich habe die Seite "reiseziele.php" (ursprünglich) kopiert in "reiseziele2.php" Demzufolge hat der obere Teil ".reiseblick", der untere ".reiseblick_rechts2" bei den ul-Angaben. Die li-Angaben haben die Grafik drin und die class "middle".
Das scheint so zu klappen. Ob auch im IE6 weiß ich nicht, da ich den nicht habe.
Der Nachteil: hier schreibe ich wieder direkt alles sozusagen in den Code, was man ja eigentlich nicht sollte.

elena

8 Jörg Kruse

Du kannst das ja so aufspalten:

<ul class="middle" id="reiseblick">

<ul class="middle" id="reiseblick_afrika">

".middle li" definiert dann die globalen Eigenschaften

"#reiseblick li", "#reiseblick_afrika li" definieren die individuellen Eigenschaften wie z.B. das Hintergrundbild

9 elena

Danke Jörg für Deine Antwort.
Ich werde mich am Wochenende nochmals mit der Sache intensiv beschäftigen und vor allem meine css-Datei "aufräumen" und sinnvoller gestalten, sonst hat man keinen Durchblick mehr. Und dann werde ich Deinen Vorschlag umzusetzen versuchen!

elena

10 elena

Hallo Jörg, leider muß ich mich in obiger Sache noch mal melden, selbst wenn ich mich jetzt bis auf die Knochen blamiere, aber ich kriege das nicht zusammen.

Die besagte Seite sieht so aus:

http://www.s160060504.online.de/reiseberichte/marokko/reiseziele.php

Nachteil: Hier stehen die Angaben direkt im Code.

Jetzt habe ich Deinen Vorschlag aufgegriffen und .middle-neu , .middle-neu li und #reiseblick_marokko1 li gebildet. Es geht jetzt nur um den oberen Teil der Seite!
Und hier mein "Werk" - total mißlungen.

http://www.s160060504.online.de/reiseberichte/marokko/reiseziele-versuch.php

Aber wie man sieht, habe ich da einiges durcheinander gebracht???
Für Deine nochmalige Hilfe wäre ich sehr dankbar. Sorry.

elena

Seite 12

nach oben weiter >