nicht angemeldet
Grafischer Container soll sich Inhalt anpassen
Hallo und guten Abend,
über nachfolgenden Code erzeuge ich einen grafischen Container, der mir einen "Einbuchtungs"-Effekt anzeigt,
d.h. die Textbox wirkt in den Hintergrund "eingestanzt", als Technik habe eine der "rounded corners"-Techniken
verwendet:
<html>
<head>
<style type="text/css">
body
{
background: url(Seite_Hintergrund.png);
}
#Einbuchtung_Eck_links_oben,
#Einbuchtung_Eck_rechts_oben,
#Einbuchtung_Eck_links_unten,
#Einbuchtung_Eck_rechts_unten
{
background-color: transparent;
background-repeat: no-repeat;
}
#Einbuchtung_Eck_links_oben
{
background-image: url(Einbuchtung_Eck_links_oben.png);
background-position: 0% 0%;
}
#Einbuchtung_Eck_rechts_oben
{
background-image: url(Einbuchtung_Eck_rechts_oben.png);
background-position: 100% 0%;
}
#Einbuchtung_Eck_links_unten
{
background-image: url(Einbuchtung_Eck_links_unten.png);
background-position: 0% 100%;
}
#Einbuchtung_Eck_rechts_unten
{
background-image: url(Einbuchtung_Eck_rechts_unten.png);
background-position: 100% 100%;
}
#Einbuchtung_Rahmen_oben,
#Einbuchtung_Rahmen_unten
{
background-color: transparent;
background-repeat: repeat-x;
}
#Einbuchtung_Rahmen_oben
{
background-image: url(Einbuchtung_Rahmen_oben.png);
background-position: 0% 0%;
}
#Einbuchtung_Rahmen_unten
{
background-image: url(Einbuchtung_Rahmen_unten.png);
background-position: 50% 100%;
}
#Einbuchtung_Rahmen_rechts
{
background-image: url(Einbuchtung_Rahmen_rechts.png);
background-position: 100% 0%;
background-repeat: repeat-y;
}
#Einbuchtung_Rahmen_links
{
background-image: url(Einbuchtung_Rahmen_links.png);
background-position: 0% 100%;
background-repeat: repeat-y;
}
#Inhalt
{
padding: 8px;
}
</style>
</head>
<body>
<div id="Einbuchtung_Rahmen_links">
<div id="Einbuchtung_Rahmen_rechts">
<div id="Einbuchtung_Rahmen_unten">
<div id="Einbuchtung_Eck_links_unten">
<div id="Einbuchtung_Eck_rechts_unten">
<div id="Einbuchtung_Rahmen_oben">
<div id="Einbuchtung_Eck_links_oben">
<div id="Einbuchtung_Eck_rechts_oben">
<div id="Inhalt">
... Text ... Text ... Text ...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Mein Problem ist nun, dass ich den css-Code so anpassen muss, dass sich die Textbox nicht automatisch über die komplette
Bildschirmbreite erstreckt, sondern nur so breit ist, wie der Inhalt zuzüglich padding braucht.
Ich kann leider nicht mit festen Breitenangaben arbeiten, da ich mehrere Textboxen haben werde, deren Inhalte variieren
und so unterschiedlich breit sind.
Wie muss ich den css-Code umändern/ergänzen, damit sich die Breite der Textbox(en) dem jeweiligen Inhalt anpasst ?
Wie könnte man den css-Code schlanker gestalten ?
Gibt es eine bessere Variante über css als meine verwendete ?
Welche Verbesserungsvorschläge habt ihr ?
Vielen Dank :-)
Gruß
Enrico
-
Wie muss ich den css-Code umändern/ergänzen, damit sich die Breite der Textbox(en) dem jeweiligen Inhalt anpasst ?
Tja, CSS berechnet von aussen nach innen, also von Parent zu Child, nicht umgekehrt.
mfg Beat
-
Hallo Beat,
das heisst, dass es hier keine Lösung geben wird, da ich nicht von innen nach aussen gehen kann ?
Gruß
Enrico-
Hi,
das heisst, dass es hier keine Lösung geben wird, da ich nicht von innen nach aussen gehen kann ?
Blockelemente nehmen (per Default) immer die komplette verfuegbare Breite ein - aber es gibt ja auch noch inline ...
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hallo ChrisB,
ich habe hierbei ja nur zwei Möglichkeiten, Deinen Tip mit "display: inline;" sinnvoll einzusetzen:
Entweder beim innersten Element, das wäre das Element "Inhalt", oder beim äusserster, das wäre
das Element "Einbuchtung_Rahmen_links".Nachdem ich - lt. Beat - von außen nach innen gehen muß, scheidet die erste Variante aus.
Ich habe beide ausprobiert:
Bei Ergänzung von "display: inline;" beim äussersten Element wird mir der linke Rahmen nicht
mehr angezeigt, bei der Ergänzung im innersten Element wird das padding ignoriert, die
Breite der Box bleibt aber wie gehabt auf voller Bildschirmbreite.Gruß
Enrico-
Hi,
ich habe hierbei ja nur zwei Möglichkeiten, Deinen Tip mit "display: inline;" sinnvoll einzusetzen:
Entweder beim innersten Element, das wäre das Element "Inhalt", oder beim äusserster, das wäre
das Element "Einbuchtung_Rahmen_links".Nein, wenn du willst, dass sich das ganze bei Aufbau mit mehreren ineinander verschachtelten Divs der Breite des Inhaltes anpasst, dann musst du allen ihre block-Eigenschaft nehmen.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Hallo ChrisB,
ok, diesen Ansatz hatte ich vorher auch schon mal ausprobiert, hierbei aber das innerste Element
übersehen, so dass es nicht geklappt hat (jetzt logisch).Gut, das funktioniert schon mal fast super, das einzige, was ich jetzt wieder "reaktivieren" muss,
ist das "padding", das jetzt ignoriert wird.Wie bekomme ich das noch hin ?
Danke und Gruß
Enrico
-
-
-
-
-