Caro Eckstein: automatisch an Textlänge anpassender Kasten

Beitrag lesen

Hi!
Ein Lösungsansatz wäre, die Grafik in drei Teile zu zerlegen. Der Obere Teil wie gehabt, der untere Teil umfasst analog auch nur die Unterkante und Rundung des Kastens und der Mittelteil besteht aus einer einzigen Pixelzeile, die aus dem Teil des unteren Bildes entnommen ist, das den Text umfasst. Dieser Liegt als Hintergrundbild hinter dem Text.

Code:

<html>
<head>
<title> </title>

<style type="text/css">
.inhaltsbox{
width:397px;
background-image:url(hp_kasten_mittelteil.jpg);
margin:0;
}
.inhaltstext{margin:0 1em;}
</style>

</head>

<body>

<div>
<img src="hp_kasten_oberteil.jpg" alt="">
<div class="inhaltsbox">
<p class="inhaltstext">Text</p>
</div>
<img src="hp_kasten_unterteil.jpg" alt="">
</div>

</body>
</html>

Beispiel:
http://www.caroeckstein.de/incoming/test/test.html