Du bist nicht angemeldet. [Anmelden]
Optionen
Thema bewerten
Automatisch breiter werdender Kopfteil - #1517180 - 03.07.2008, 12:19:51
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Hallöchen,

tut mir Leid, ich wusste nicht, wie ich den Thread sonst hätte nennen sollen.

Ich habe eine Frage bezüglich dieser Grafik:

[img]http://i29.tinypic.com/2mfktj5.jpg[/img]

Wie man sieht befindet sich nun im oberen Bereich ein Text (= Neuste Kommentare). Egal wie lange der Text ist, der blaue Hintergrund wird immer genauso lang sein wie der Text. Auch wenn sich in dem Text ein Leerzeichen befindet.

Meine Frage: Wie realisiert man das am besten? Div-Layer? Tabelle? Ich hab mir den Quelltext angesehen, jedoch muss ich zu meiner Scham eingestehen, dass ich nicht ganz schlau daraus werde bzw. nicht hinter den Trick an der Sache komme..

Beispielseite: http://www.outoftheline.de/
Beispiel-CSS-Datei: http://www.outoftheline.de/wp-content/themes/outoftheline_v4/style.css

Wäre toll, wenn mir jemand weiterhelfen könnte.


Gruß, Kat glücklich

[zum Seitenanfang]  
Re: Automatisch breiter werdender Kopfteil [Re: KnuddelWelli] - #1517246 - 03.07.2008, 13:33:28
theblackdevil909851
​United States of America

Registriert: 05.08.2004
Beiträge: 6.388
Das kannst du mit Containern machen, ja. Der sich anpassende Hintergrund ist einfach ein gestylter <hX> -Tag. Ich habe dir das mal in eine einzelne .html selber gecodet. Die habe ich dir per Mail geschickt.
_________________________
Das Lesen ist eine Tugend!

[zum Seitenanfang]  
Re: Automatisch breiter werdender Kopfteil [Re: KnuddelWelli] - #1517328 - 03.07.2008, 14:39:37
BerlinerPaul
Forum​wusle​r​

Registriert: 15.11.2005
Beiträge: 566
als beispiel:

Code:
&lt;p style="margin:0px"&gt;&lt;span style="background-color:blue"&gt;Überschrift&lt;/span&gt;&lt;/p&gt;
&lt;p style="background-color:blue;margin:0px"&gt;text&lt;/p&gt;


Bearbeitet von BerlinerPaul (03.07.2008, 14:41:14)

[zum Seitenanfang]  
Re: Automatisch breiter werdender Kopfteil [Re: BerlinerPaul] - #1517383 - 03.07.2008, 15:25:58
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Ich hab mich nun ein bisschen mit BerlinerPaul zusammen gesetzt und siehe da... wieso kompliziert, wenns auch einfach geht!?

Habs nun so gelöst:

Code:
&lt;h1 class="title"&gt;&lt;span&gt;Überschrift&lt;/span&gt;&lt;/h1&gt;&lt;p class="parag"&gt;Text...&lt;/p&gt;
Das ist der Grundcode.



Das (von mir angepasste) CSS dazu:

Code:
&lt;style type="text/css"&gt;&lt;!--
td, font {
	font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Arial, sans-serif;
	font-size:8pt;
	}

.title {
	margin-bottom: 0px;
	text-align:left;
	}

.title span {
	background-color: #404040;
	color:#eee;
	font-size:10pt;
	padding:5px;
	}

.parag {
	margin-top: 0px;
	background-color: #404040;
	color:#eee;
	font-size:8pt;
	padding:5px;
	text-align:justify;
	}

.title, .parag {
	width:300px;
	margin-left:auto;
	margin-right:auto; 
	}

--&gt;&lt;/style&gt;

In diesem Sinne nochmals danke an euch beide! glücklich


Gruß, Kat

[zum Seitenanfang]  
Re: Automatisch breiter werdender Kopfteil [Re: KnuddelWelli] - #1517432 - 03.07.2008, 16:03:20
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Und wieso floatest du nicht einfach den h-tag?!
Wuerde dir dieses blox-inline verschachtelungs-gedoens ersparen und dein markup wuerde sauberer wirken.

[zum Seitenanfang]