Div an Inhalt anpassen

[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'