nicht angemeldet
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