[Yoshi.BZ]

Ich hab vor den Links ein Aufzählungssymbol (2 Pfeile).
Sobald mein Text für die Beschreibung zum Link länger ist und über 2 Zeilen geht, verschiebt sich auch das Symbol in die Mitte. Ich will aber das Symbol mittig vor der ersten Zeile haben.
Was kann ich tun.

Hier ist die Seite: http://www.pixilla.d...illa/links2.php

Hier der CSS Code:

#links ul { 
	list-style-type: none; 
	padding: 0;
	margin: 0;
}

#links li { 
	list-style-type: none; 
	padding: 0;
	margin: 0;
	background-image: url(../images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0%;
	padding-left: 1em;
}

[Witi]

...background-position: 0% 0%;...

[axx]

Du hast auf die vertikale ausrichtung verzichtet. Eine prozentuale Angabe ist hier nicht erwünscht, deshalb probiere mal Folgendes:

#links li {
	background-position: 0% 0.5em;
}

[Witi]

Warum nicht erwünscht? Ist doch alles (Schlüsselwörter, Längen- und Prozentangaben) standardisiert und wenn ich mich nicht irre interpretiert das auch jeder Browser.

[axx]

Zitat (Witi: 21.07.2006, 08:40)

Warum nicht erwünscht? Ist doch alles (Schlüsselwörter, Längen- und Prozentangaben) standardisiert und wenn ich mich nicht irre interpretiert das auch jeder Browser.

Ich war ein bischen langsam mit der Antwort. 'Nicht erwünscht' bezog sich auf die Situation, die Yoshi.BZ beschrieben hat, also nicht von Yoshi.BZ gewünscht.

0% trifft es nicht richtig, zu sehr nach oben verschoben. 50% ist die Ausgangssituation. Deshalb mein Vorschlag mit der Längenangabe.

[Witi]

achso ok

[Yoshi.BZ]

Ha .. so funktioniert das. Danke

[Yoshi.BZ]

Wo wir grad dabei sind.
In der unteren Liste hab ich die Links per Komma getrennt.
Gibt es nen CSS Code für Komma oder soll ich es wie jetzt mit ner Grafik machen?

Seite ist hier:
http://www.pixilla.d...illa/links2.php

CSS Code:

#gallery ul { 
	list-style-type: none; 
	padding: 0;
	margin: 0;
}

#gallery li { 
	list-style-type: none; 
	padding: 0;
	margin: 0;
	display: inline;
	background-image: url(../images/komma.gif);
	background-repeat: no-repeat;
	background-position: 100% 0.8em;
	padding-right: 0.5em;
}

[Witi]

Warum überhaupt ein Bild und kein einfaches Komma?

[Yoshi.BZ]

Zitat (Witi: 21.07.2006, 20:35)

Warum überhaupt ein Bild und kein einfaches Komma?

Wenn dann muss ich das Komma im CSS definieren, aber dafür weiß ich nicht die Bezeichnung.
z.B. square = Quadrat. Wenn ich das Komma als Zeichen ins CSS eingebe, passiert nichts.

Ich könnte natürlich auch das Komma auf die Webseite selbst schreiben, z.B. hinter den Link.
Aber was ist, wenn ich die horizontale Auflistung mal in vertikal ändere? Dann brauch ich ja das Komma ne mehr und ich müßte es überall von Hand wieder weg machen. Deshalb will ich es ins CSS eingeben.

2. Öffnet mal die Seite mit dem IE. Kann es sein das der gar ne alle Kommas anzeigt? Bei mir schluckt der einige.

Dieser Beitrag wurde von Yoshi.BZ bearbeitet: 22. Juli 2006 - 06:24

[axx]

Sehr korrekte Einstellung. Das Komma ist ein Designelement und gehört ins CSS. Guten Browsern gibt man das mit:

#gallery li:after{content:",";}

Leider kann der IE damit nichts anfangen, IE7 beta3 eingeschlossen.

Eine Alternative kann ein Hintergrundbild sein, aber da hast du wieder mit anderen Problemen zu kämpfen. Warum einige Kommas schlicht nicht angezeigt werden, weiß ich nicht.
Dazu kommt, dass beim Vergrößern der Bildschirmanzeige in IE7 beta die Hintergrundbilder nicht mitskalieren.

Ich habe leider keine gute Lösung, die der IE verarbeiten kann. Zu meiner Schande muss ich gestehen, dass ich in den meisten Fällen das Komma ins markup schreiben würde. Die Alternative wäre, dass IE-Nutzern dieses Designelement vorenthalten wird.