CSS: Padding vor und nach Zeilenumbruch

27.12.2010, 21:40

Hej,

ist ja schon wieder reichlich Zeit nach meinem letzten Post, hoffe ihr hattet alle schöne Weihnachten und besinnliche Feiertage

Mich beschäftigt momentan eine Frage: Auf einem Bild soll der Titel eines Beitrags angezeigt werden, als Hintergrund eine Grafik, darüber der Titel der Kategorie und je ein paar Pixel Abstand zwischen den Reihen des Titels. War bisher kein Problem, so schaut's aus:

Das gefällt mir aber momentan nicht, da vor und nach dem Zeilenumbruch der Abstand fehlt. Es sollte so aussehen:

Hab gemerkt, dass das Problem mittels

Code:

display: block;

gelöst werden kann, allerdings wird dann der Hintergrund durchgängig angezeigt und ich kann nach jeder Zeile kein Margin-Abstand setzen. Habe bisher auch schon probiert, den Hintergrund des Titels durch einen mit abschließenden Abstand zu ersetzen, allerdings wird dann der Hintergrund in der Horizontalen durchgezogen, was auch nicht mein Ziel ist.

Hat jemand von euch eine Idee? Vielen Dank schon einmal, hier ist der Quellcode:

Code:

<div class="panel">
	<a href="#"><img src="bild1.jpg" alt="" border="0"></a>
	<div class="outer">
		<a href="#" class="featured-cat">Leben</a>
		<a href="#" class="featured-title"><span>Ein langer Titel, der nicht so schön aussieht.</span></a>
	</div>
</div>

Der dazugehörige CSS-Code:

Code:

#featured .panel .outer {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 280px;
	max-width: 350px;
	min-height: 130px;
	padding: 0 20px 20px 0;
}
	
	#featured .panel .outer .featured-cat {
		background-color: #2995c0;
		padding: 0 10px;
		font: normal normal 11px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
	}
		
		
	#featured .panel .outer .featured-title {
		font: normal normal 24px Georgia, "Times New Roman", Times, serif;
		color: #fff;
		text-decoration: none;
		float: left;
		margin: -3px 0;
	}
		
		#featured .panel .outer .featured-title span {
			background: url(images/title.png) repeat;
			padding: 5px 10px;
			line-height: 40px;
			margin: 0 0 2px;
			display: block;
		}

Liebe Grüße,

phyton

ChrisB · 27.12.2010, 21:45

Zitat:

Zitat von phyton

Das gefällt mir aber momentan nicht, da vor und nach dem Zeilenumbruch der Abstand fehlt. [...]
Hab gemerkt, dass das Problem mittels display: block; gelöst werden kann, allerdings wird dann der Hintergrund durchgängig angezeigt und ich kann nach jeder Zeile kein Margin-Abstand setzen.

In beiden Fällen: Works as designed.
Das, was du haben willst, sieht CSS bisher nicht vor.

Am einfachsten erreichst die gewünschte Optik, wenn du den Text selber aufteilst - für jede "Zeile" an Text ein eigenes Element, und die dann entsprechend formatieren.

27.12.2010, 22:40

Und da gibt es keinen Workaround oder so?
Der Titel ist nämlich dynamisch, da kann ich nicht so einfach Zeilenumbrüche machen.

ChrisB · 27.12.2010, 22:52

Zitat:

Zitat von phyton

Und da gibt es keinen Workaround oder so?

Doch - ich nannte dir bereits einen.

Zitat:

Der Titel ist nämlich dynamisch, da kann ich nicht so einfach Zeilenumbrüche machen.

Dann machst du sie halt nicht einfach, sondern etwas komplizierter

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Zeilenumbruch in Textarea vordefinieren? - Vor Ausgabe einfügen?	UdoDirk	PHP Tipps 2010	2	22.07.2010 15:33
[Erledigt] PHP - mail() - html Mail wird konstant als plain text verschickt. Warum?	Kori	PHP Tipps 2010	2	28.02.2010 20:40
[Erledigt] Zeilenumbruch unterdrücken bei Code aus MySQL-DB	webproger	HTML, Usability und Barrierefreiheit	4	03.09.2009 17:31
Padding IE Table workaround oder css-hack?	Circushund	HTML, Usability und Barrierefreiheit	10	16.05.2009 19:17
[Erledigt] Zeilenumbruch im Input type text???	Squall	PHP Tipps 2009	12	16.04.2009 15:59
[Erledigt] bild als link mit mouseover ohne zeilenumbruch	SteiniKeule	HTML, Usability und Barrierefreiheit	12	30.10.2008 21:12
Textarea mit Zeilenumbruch	HSFighter	HTML, Usability und Barrierefreiheit	8	22.10.2007 14:04
Textarea mit Zeilenumbruch	Andi00	HTML, Usability und Barrierefreiheit	2	19.10.2007 20:44
Padding Problem IE -> FF	PsychoEagle	HTML, Usability und Barrierefreiheit	3	23.07.2007 16:38
Zeilenumbruch in H1 überschriften durch CSS unterbinden	PsychoEagle	HTML, Usability und Barrierefreiheit	7	10.03.2006 12:20
Flash: Keine Speicherung in DB mit Zeilenumbruch in Textfeld	cytrobic	HTML, Usability und Barrierefreiheit	1	03.02.2006 16:38
Wordpress Template		HTML, Usability und Barrierefreiheit	8	22.08.2005 11:21
CSS - Nervige Interpretation von Padding in IE und FF	center	HTML, Usability und Barrierefreiheit	2	14.04.2005 15:35

27.12.2010, 21:40
phyton Gast Beiträge: n/a	CSS: Padding vor und nach Zeilenumbruch Hej, ist ja schon wieder reichlich Zeit nach meinem letzten Post, hoffe ihr hattet alle schöne Weihnachten und besinnliche Feiertage Mich beschäftigt momentan eine Frage: Auf einem Bild soll der Titel eines Beitrags angezeigt werden, als Hintergrund eine Grafik, darüber der Titel der Kategorie und je ein paar Pixel Abstand zwischen den Reihen des Titels. War bisher kein Problem, so schaut's aus: Das gefällt mir aber momentan nicht, da vor und nach dem Zeilenumbruch der Abstand fehlt. Es sollte so aussehen: Hab gemerkt, dass das Problem mittels Code: display: block; gelöst werden kann, allerdings wird dann der Hintergrund durchgängig angezeigt und ich kann nach jeder Zeile kein Margin-Abstand setzen. Habe bisher auch schon probiert, den Hintergrund des Titels durch einen mit abschließenden Abstand zu ersetzen, allerdings wird dann der Hintergrund in der Horizontalen durchgezogen, was auch nicht mein Ziel ist. Hat jemand von euch eine Idee? Vielen Dank schon einmal, hier ist der Quellcode: Code: <div class="panel"> <a href="#"><img src="bild1.jpg" alt="" border="0"></a> <div class="outer"> <a href="#" class="featured-cat">Leben</a> <a href="#" class="featured-title"><span>Ein langer Titel, der nicht so schön aussieht.</span></a> </div> </div> Der dazugehörige CSS-Code: Code: #featured .panel .outer { position: absolute; right: 0; bottom: 0; min-width: 280px; max-width: 350px; min-height: 130px; padding: 0 20px 20px 0; } #featured .panel .outer .featured-cat { background-color: #2995c0; padding: 0 10px; font: normal normal 11px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #fff; text-transform: uppercase; text-decoration: none; } #featured .panel .outer .featured-title { font: normal normal 24px Georgia, "Times New Roman", Times, serif; color: #fff; text-decoration: none; float: left; margin: -3px 0; } #featured .panel .outer .featured-title span { background: url(images/title.png) repeat; padding: 5px 10px; line-height: 40px; margin: 0 0 2px; display: block; } Liebe Grüße, phyton


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

27.12.2010, 22:40
phyton Gast Beiträge: n/a	Und da gibt es keinen Workaround oder so? Der Titel ist nämlich dynamisch, da kann ich nicht so einfach Zeilenumbrüche machen.