Hi!
Ich versuche gerade folgendes zu realisieren:
Die Textbox soll 4 Grafiken für die Ecken haben (1,2,3,4). Die Kanten sind Grafiken die in x bzw. y Richtung nahtlos sind (1_1,1_2,1_3,1_4). Der Inhalt der Textbox ist einfach eine Farbe z.B. 0xFFFFFF. Ich möchte nun, dass meine Textbox eine fixe Breite die durch einen Wert einstellbar ist hat, und sich die Höhe ändert, je nachdem, wie viel Text in der Box ist. Ich habe mehrere Lösungswege versucht (mit einer Tabelle, mit Divs) aber keine Lösung führt zu dem gewünschten Ergebnis da entweder die Größen der Box nicht dynamisch sein können oder es in manchen Browsern falsch dargestellt wird.
Wichtig ist auch noch, dass die Definition einer solchen Box im HTML-file nicht zu riesig sein sollte, damit man nicht die Übersicht verliert. Aber da könnte man eventuell mit einem php Skript Abhilfe schaffen.
Hat von euch jemand einen Lösungsvorschlag?
Danke für eure Hilfe!
Ich meine, eine ordentliche Lösung gibt es dafür erst in einem
Arbeitsentwurf für ein CSS3-Modul.
Ansonsten findet man zu dem Problem oft was unter den
Stichwörtern ‘abgerundete Ecken’ (‘rounded corners’) zusammen
mit dem Stichwort CSS. Da gibt es über die Jahre mittlerweile
zahlreiche Variationen des Dramas, die alle mehr oder weniger
unterhaltsam sind (nicht alle sind wirklich in der Praxis brauchbar,
weil sie Dinge voraussetzen, die bei realen Betrachtern nicht
zutreffen müssen ;o)
Auf meiner Seite gibt es dazu auch eine Diskussion:
hoffmann.bplaced.net/hilfe.php?m … =cssrahmen
(bezieht sich mehr auf CSS2 und Rahmen um das komplette
Dokument).
Dann hängt die Schwierigkeit natürlich auch davon ab, ob die
Kanten in variabler Richtung strukturiert sind oder nur senkrecht
dazu - das klappt dann bei beliebiger Größe die Anpassung an die
Ecken bestenfalls für diskrete Werte oder per Skalierung, was
wohl auch erst in CSS3 angedacht wird.
Dank elsner habe ich es jetzt hinbekommen. Sollte jemand daran Interesse haben, kann ich wenn elsner einverstanden ist die .html und .css files hier posten.
Danke nochmal für die Hilfe!
[quote=“PHPMaster”]Dank elsner habe ich es jetzt hinbekommen. Sollte jemand daran Interesse haben, kann ich wenn elsner einverstanden ist die .html und .css files hier posten.
Danke nochmal für die Hilfe![/quote]
Gern geschehen “PHPMaster”. Natürlich darfst du den Code auch hier posten.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="design.css" type="text/css">
<title>Dynamischer Bilderrahmen</title>
</head>
<body>
<div id="alles">
<div id="ecke1">
<div id="ecke2">
<div id="kante1_1">
</div>
</div>
</div>
<div id="kante1_4">
<div id="kante1_2">
<div id="textbox">
Inhalt
</div>
</div>
</div>
<div id="ecke4">
<div id="ecke3">
<div id="kante1_3">
</div>
</div>
</div>
</div>
</body>
</html>
design.css
#kante1_1, #kante1_3, #textbox {margin:0 20px;
}
#kante1_1, #kante1_3 {line-height:20px;
}
#alles {width:800px;
}
#ecke1 {background:url(grafiken/corner.jpg) no-repeat top left;
}
#ecke2 {background:url(grafiken/corner.jpg) no-repeat top right;
}
#ecke3 {background:url(grafiken/corner.jpg) no-repeat bottom right;
}
#ecke4 {background:url(grafiken/corner.jpg) no-repeat bottom left;
}
#kante1_1, #kante1_3 {background:url(grafiken/edge1.jpg) repeat-x center;
}
#kante1_2 {background:url(grafiken/edge2.jpg) repeat-y right;
}
#kante1_4 {background:url(grafiken/edge2.jpg) repeat-y left;
}
#textbox {background-color:#ffffff;
}
Ja, das ist so die übliche Lösung mit einer Kaskade verschachtelter
divs, die keine besonderen Anforderungen an den browser stellt.
Offenbar hier für Randbilder ohne weitere problematische Struktur.
Diese Anhäufung von inhaltlich nutzlosen divs ist wohl auch
einer der Gründe, warum man da in CSS3 deutlich elegantere
Lösungen einführt, ohne den Quelltext so verunstalten zu müssen.
Gibt auch einige elegantere Methoden, die mit weniger divs
auskommen, dafür aber höhere Anforderungen an den browser
hinsichtlich CSS stellen (z.B. mit :before und :after)
