nicht angemeldet
automatisch an Textlänge anpassender Kasten
Hallo,
erstmal muss ich sagen, dass dieses Forum wirklich ganz toll ist und das ich mich bei den Betreibern dafür bedanke.
Nun zu meinem Problem: Ich möchte einen Kasten erstellen, der aus einem Oberteil und einem Unterteil besteht. In diesen Kasten möchte ich Test einfügen, der am Ende umgebrochen wird. Der Kasten soll nun genau so hoch sein wie der Text lang ist, also so, dass er den Text umschließt, dazu soll vom Unterteil des Kastens immer genau soviel genommen werden, wie nötig ist um den Text einzuschließen und zwar von unten nach oben, denn andersherum würde das ja keinen Sinn machen. Also wenn der Text angenommen 300 Pixel hoch ist, dann kommt oben das Oberteil drauf und unten soll dann nahtlos das Unterteil angesetzt werden und zwar so, dass die Kanten außerhalb des Textes liegen, also in diesem Fall dann vielleicht 310 Pixel aus dem Unterteil Bild von unten. Und dies alles soll automatisch geschehen, da ich mehrere Kästen produzieren möchte und nicht jedesmal alles manuell machen möchte. Wenn möglich sollte das alles mit Hilfe von CSS realisiert werden. Ich habe nur leider keine richtige Idee wie. Evtl. kann man das alles auch noch schöner realisieren als ich hier beschrieben hab, dass war nur meine erste Idee und ich dachte mir, dass müsste eigentlich möglich sein.
Vielen Dank im Vorraus
PS: hier noch mal alles als Bild:
http://www.paulheidicker.de/hp_kasten1.jpg
http://www.paulheidicker.de/hp_kasten_oberteil.jpg
http://www.paulheidicker.de/hp_kasten_unterteil.jpg
-
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-
Kasten aus Oberteil und Unterteil
2 Kaesten?
In diesen Kasten möchte ich Fliesstext einfügen
Der Kasten soll nun genau so hoch sein wie der Text lang istOder so lang wie er hoch ist?!
usw usw.
Also ganz bestimmt kann man das BESCHREIBEN schöner realisieren.
FAKT: automatisch an Textlänge anpassender Kasten, was ja das Thema war:
---------------------------------------
<div style="border:1px solid red">
Text in einem sich automatisch an die Textlänge anpassenden Kasten,
was ja das Thema ist.
</div>Wie wäre es mit Quadratkasten? Also ehrlich, ich hab gar nicht verstanden was du willst.
MHO
Best regards
Christian-
Hallo Christian
<div style="border:1px solid red">
Text in einem sich automatisch an die Textlänge anpassenden Kasten,
was ja das Thema ist.
</div>Wie wäre es mit Quadratkasten? Also ehrlich, ich hab gar nicht verstanden was du willst.
Vielleicht hättest du dir mal die angegebenen Bilder ansehen sollen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
Hallo Caro
Ein Lösungsansatz wäre, die Grafik in drei Teile zu zerlegen.
Das würde ich nicht empfehlen, die zwei Teile reichen doch aus.
Der Obere Teil wie gehabt, der untere Teil
auch. Zur Sicherheit würde ich den Textbereich noch ein ganzes Stück höher ausführen.
Bei Grafik, die als .gif oder .png gespeichert ist, vergrößert sich die Datei dadurch nicht wesentlich.… der Mittelteil besteht aus einer einzigen Pixelzeile, die aus dem Teil des unteren Bildes entnommen ist, das den Text umfasst.
Dann muss dieses kleine Bildchen extra vom Server angefordert werden.
Code:
…
<img src="hp_kasten_oberteil.jpg" alt="">
…
<img src="hp_kasten_unterteil.jpg" alt="">
Diese Grafiken sind doch keinen Seiteninhalt sondern lediglich Design. Sie sollten deshalb im HTML überhaupt nicht auftauchen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
Ach, ich vergaß: versuch mal, die Grafik als .gif abzuspeichern. Damit lässt sich der Speicherbedarf (bei 32 Farben) etwa um den Faktor 20 reduzieren.
Gruß, Caro