Div an Inhalt anpassen

[iWorm]

Ich versuche den div-container so einzustellen, das dieser sich je nach der Menge des Textes vergrößert. Es sollte also ein einheitliches transparente Fläche werden. Das Ergebnis sieht man oben. Der Hintergrund der wiederholt wird überdeckt die zwei oben und unten.

div.flache {  
	background: url(flaecheoben.png) no-repeat, url(flaechemitte) repeat, url(flaecheunten) no-repeat;  
	background-position: left top, left 75px, left bottom;  
	  
}  
div.text {  
	color: white;  
	padding: 50px;  
} 

<div class="inf"><div class="text">grbgrbrenbreybnresbnesnesnnresnre<br>grbgrbrenbreybnresbnesnesnnresnre<br>...</div></div>

Wie könnte ich das Problem lösen?

Dank im voraus, iWorm

[Der Martin]

Hallo,

Ich versuche den div-container so einzustellen, das dieser sich je nach der Menge des Textes vergrößert.

das tun diese Elemente eigentlich von ganz allein, wenn man ihre Größe nicht festnagelt.

Es sollte also ein einheitliches transparente Fläche werden. Das Ergebnis sieht man oben. Der Hintergrund der wiederholt wird überdeckt die zwei oben und unten.

Hää?

div.flache {

background: url(flaecheoben.png) no-repeat, url(flaechemitte) repeat, url(flaecheunten) no-repeat;
background-position: left top, left 75px, left bottom;

}
div.text {
color: white;
padding: 50px;
}

>   
> `<div class="inf"><div class="text">grbgrbrenbreybnresbnesnesnnresnre<br>grbgrbrenbreybnresbnesnesnnresnre<br>...</div></div>`{:.language-html}  
  
Dein HTML enthält kein div-Element mit der Klasse "flache", und für div.inf sehe ich keine CSS-Angaben.  
  

> Wie könnte ich das Problem lösen?  
  
Keine Ahnung, ich verstehe das Problem noch nicht.  
  
Ciao,  
 Martin  

-- 
"Gestern habe ich die Rede des Parteivorsitzenden gehört. Zwei Stunden lang!" - "Worüber?" - "Hat er nicht gesagt."  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[iWorm]

Ich versuche den div-container so einzustellen, das dieser sich je nach der Menge des Textes vergrößert.

das tun diese Elemente eigentlich von ganz allein, wenn man ihre Größe nicht festnagelt.

Sry, ich meinte die Grafik (das gesamte div optisch gesehen)

Es sollte also ein einheitliches transparente Fläche werden. Das Ergebnis sieht man oben. Der Hintergrund der wiederholt wird überdeckt die zwei oben und unten.

Hää?

Aaalso 3 png's (oben, mitte, unten). Oben und unten bleiben so wie sie sind und sollen den in der mitte "umfassen". Auf dem Bild überdeckt er die beiden . So verständlicher? :D

Dein HTML enthält kein div-Element mit der Klasse "flache", und für div.inf sehe ich keine CSS-Angaben.

Fläche=inf hab vergessen das andere zu ändern.

Wie könnte ich das Problem lösen?

Keine Ahnung, ich verstehe das Problem noch nicht.

Und jetzt? :)

[suit]

Zusammenfassend: du hast also eine Hintergrundgrafik "oben", eine Hintergrundgrafik "unten" und eine die dazwischen gestreckt werden soll und alles ausfüllt.

Du kannst in modernen Browsern mehrere Hintergrundgrafiken angegeben und mittels background-size strecken (oder aber das zwischen drin wiederholen, wenn dir das hilft).

Alternativ kannst du mittels ::before und ::after Pseudoelemente einfügen für das "davor" und "danach" und dem Primärelement eine sich wiederholende Hintergrundgrafik geben. Damit wirst du wahrscheinlich mehr Browser abdecken als mit der zuvor genannten.

Falls das immer noch nicht reicht, kannst du anstatt der Pseudoelemente auch echte Elemente im HTML einfügen - dann ist auch für ganz alte Browser eine Unterstützung gewährleistet.

Und ganzs blauäugig gesehen: vielleicht suchst du ja nur einen speziellen Rahmentyp (wenn das in der Mitte eh "transparent sein soll") - z.B. runde Ecken.

Aber ohne eine Bild von der Sache ist das schwierig zu beurteilen - kannst du hier ggf. etwas malen?

[iWorm]

Genau, nur das der Inhalt schon auf der oberen Hintergrundgrafik anfängt und auch in der unteren aufhört. Eine Zeichnung:

Ne, also ich will es schon mit png-Grafiken machen :D

[ChrisB]

Hi,

Ne, also ich will es schon mit png-Grafiken machen :D

Was *genau* du erreichen willst, ist mir immer noch unklar.

Vorher war irgendwie von Transparenz die Rede - wo die jetzt sein soll, ist mit diesem Bildchen aber wieder unklar.

Wenn du wirklich nur "runde Ecken" und teil-transparenten Hintergrund haben willst - dann benutze doch einfach border-radius und eine rgba-Hintergrundfarbe.

MfG ChrisB

[suit]

Wenn du wirklich nur "runde Ecken" und teil-transparenten Hintergrund haben willst - dann benutze doch einfach border-radius und eine rgba-Hintergrundfarbe.

Seh' ich auch so.

Im vorliegenden Beispiel verstehe ich übrigens nicht, was diese 75-Pixel-Offeset-Linien sollen die mitten durchden Text gehen.

Soll da etwa oben und unten eine statische Farbe sein und zwischendrin ein verlauf oder wie?

Wenn das ein abstrahiertes Beispiel sein soll, ist es ziemlich unverständlich - wenn es 1:1 das original sein soll ist es unlogisch.

[Gunnar Bittersmann]

@@suit:

nuqneH

Alternativ kannst du mittels ::before und ::after Pseudoelemente einfügen für das "davor" und "danach" und dem Primärelement eine sich wiederholende Hintergrundgrafik geben.

Dau müsste der Text AFAIS aber noch in Unterelementen stecken, sonst dürfte es kaum möglich sein, die Pseudoelemente in z-Richtung zwischen den Hintergrund des Primärelement und den Text zu bekommen.

Und ganzs blauäugig gesehen: vielleicht suchst du ja nur einen speziellen Rahmentyp (wenn das in der Mitte eh "transparent sein soll") - z.B. runde Ecken.

Ja, das Gemalte lässt erkennen, dass keinerlei Grafiken nötig sind.

<div id="myBox">  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
</div>

#myBox  
{  
	background: #6095c8;  
	border: 2px solid #4c7095;  
	border-radius: 15px;  
	color: white;  
	padding: 50px;  
	position: relative;  
	width: 200px;  
}  
  
#myBox:before, #myBox:after  
{  
	content: ' ';  
	height: 75px;  
	left: 0;  
	position: absolute;  
	width: 100%;  
}  
  
#myBox:before  
{  
	border-bottom: 2px solid #4c7095;  
	top: 0;  
}  
  
#myBox:after  
{  
	border-top: 2px solid #4c7095;  
	bottom: 0;  
}  
  
#myBox p  
{  
	position: relative;  
	z-index: 1;  
}  
  
#myBox p:first-child  
{  
	margin-top: 0;  
}  
  
#myBox p:last-child  
{  
	margin-bottom: 0;  
}

Für ältere IEs könnte man die Pseudoelemente und Pseudoklassen mit CSS-Expressions nachbilden.

Qapla'

[suit]

Dau müsste der Text AFAIS aber noch in Unterelementen stecken, sonst dürfte es kaum möglich sein, die Pseudoelemente in z-Richtung zwischen den Hintergrund des Primärelement und den Text zu bekommen.

Außenabstand oben und unten,
position: relative;
Pseudo-Elemente per position: absolute; um die Werte der Außenabstände rausverschieben.
????
PROFIT!

[Gunnar Bittersmann]

@@suit:

nuqneH

Außenabstand oben und unten,
position: relative;
Pseudo-Elemente per position: absolute; um die Werte der Außenabstände rausverschieben.
????

Genau das wäre meine Zusammenfassung der 3 Zeilen zuvor. ;-)

Kannst du das mal an einem Beispiel erläutern, wie du das ohne 'p' hinbekommen willst?

Qapla'

[suit]

Genau das wäre meine Zusammenfassung der 3 Zeilen zuvor. ;-)

Ja :)

Kannst du das mal an einem Beispiel erläutern, wie du das ohne 'p' hinbekommen willst?

Für "alle Browser" keine Chance.