✔ Problem: Überschriften mittels text-indent einrücken

[LuvShining]

Hallöchen,

mal wieder ein CSS-Problem, aber sicherlich nicht unlösbar ;-)

Hier die Ansicht meines Problems: http://www.wa-online.de/screen.jpg

*rot markierter Bereich fehlerhaft, soll eingerückt werden!

--- [ html ] ---
<a class="nachrsmall" style="text-indent: -5px;" href="#"> <img src="images/pfeile.jpg" border="0"> Keine deutschen Sponsoren für Berliner Live8-Konzert</a><br>
<a class="nachrsmall" style="text-indent: -5px;" href="#"> <img src="images/pfeile.jpg" border="0"> Michael Jackson droht neuer Ärger mit der Justiz</a><br>
<a class="nachrsmall" style="text-indent: -5px;" href="#"> <img src="images/pfeile.jpg" border="0"> Sophia Loren wird Ehrenbürgerin ihres Heimatortes</a><br>
<a class="nachrsmall" style="text-indent: -5px;" href="#"> <img src="images/pfeile.jpg" border="0"> Prinz William feiert Universitätsdiplom</a><br>
usw.
--- [ / html ] ---

Ich möchte die eingehenden News (nur die Überschriften) anzeigen lassen. Vor jeder neuen Überschrift sind Pfeile zu sehen. Sollte die Überschrift länger als eine Zeile sein, soll der Text um 5px eingerückt werden. Problem nur, wenn ich (siehe oben) so vorgehe und mit einfachen Breaks nach jeder Überschrift arbeite, werden alle nachgehenden Überschriften inkl. der Pfeile um 5px eingerückt. Die Pfeile sollen aber immer bündig stehen.

Hat jemand von euch eine Lösung, ausser hier mit Spalten und Zeilen innerhalb einer Tabelle zu arbeiten?

Für eure Hilfe bedanke ich mich schon einmal

Viele Grüße
Nadine

 

[Sven Mintel]

Packe die Links jeweils in irgendein Blockelement(bei Überschriften bietet sich h1-h6 an ), und weise Selbigen die Einrückung zu.

 

[Gumbo]

Mein Vorschlag: Packe alles in eine ungeordnete Liste:

<ul id="foobar">
	<li><a href="#">Keine deutschen Sponsoren für Berliner Live8-Konzert</a></li>
	<li><a href="#">Michael Jackson droht neuer Ärger mit der Justiz</a></li>
	<li><a href="#">Sophia Loren wird Ehrenbürgerin ihres Heimatortes</a></li>
	<li><a href="#">Prinz William feiert Universitätsdiplom</a></li>
</ul>

Anschließend lässt sich diese hervorragend formatieren:

#foobar {
	list-style:		none;
	width:			10em;
}
#foobar li {
	padding-left:		12px;
	background:		url(http://www.wa-online.de/images/pfeil.jpg) no-repeat 0 .4em;
}

 

[hpvw]

In der Tat bietet sich hier ein Block-Element an, eine Überschrift oder auch eine Auszeichnung als Liste, denn es ist ja eine Auflistung der aktuellen News.
Du kannst das Bild als nicht wiederholendes Hintergrundbild per CSS einfügen und dem Block-Element einen entsprechenden linken padding geben.

Gruß hpvw

EDIT: Da war wohl mal wieder einer schneller, Gumbo hat das Beispiel zu dem, was ich hier beschrieben habe.

 

[Gumbo]

In der Tat bietet sich hier ein Block-Element an, eine Überschrift oder auch eine Auszeichnung als Liste, denn es ist ja eine Auflistung der aktuellen News.
Du kannst das Bild als nicht wiederholendes Hintergrundbild per CSS einfügen und dem Block-Element einen entsprechenden linken padding geben.

Zwei Dumme – ein Gedanke.

 

[LuvShining]

Peinlich aber wahr: Es klingt gut und plausibel, aber so richtig scheine ich es doch nicht verstanden zu haben, denn mein Ergebnis ist nun dieses:
So sieht falsche Interpretation aus... wa-online.de/screen.jpg

:-(

 

[hpvw]

Dich stört der große Abstand links?
Ungetestet:

#foobar {
	margin:0;
	padding:0;
	list-style:		none;
	width:			10em;
}
#foobar li {
	margin:0;
	padding:0 0 0 12px;
	background:		url(http://www.wa-online.de/images/pfeil.jpg) no-repeat 0 .4em;
}

Gruß hpvw

 

[LuvShining]

Aaaaaahhhh, ja ... es hat doch noch "klick" gemacht. So scheint es mir zu funktionieren. Ich habe es mal angepasst, nach dieser enorm guten Vorlage ;-)


Vielen herzlichen Dank für eure Hilfe!!

Grüße, Nadine

 

[hpvw]

Noch als Erklärung:
Listen und Listenelemente haben (in den verschiedenen Browsern unterschiedliche) Standardvorgaben für die Abstände. Diese müssen in diesem Fall "wegformatiert" werden.

Gruß hpvw

 

[Maik]

Aaaaaahhhh, ja ... es hat doch noch "klick" gemacht. So scheint es mir zu funktionieren. Ich habe es mal angepasst, nach dieser enorm guten Vorlage ;-)


Vielen herzlichen Dank für eure Hilfe!!

Grüße, Nadine

Bitte markiere deine beantworteten Fragen als "erledigt"!

Vielen Dank