Wenn Du mal etwas mehr Selbstinitiative zeigen würdest, könntest Du die Hilfsbereitschaft sicher steigern. Einfach nur rumzumeckern und auf eine fertige Lösung zum Kopieren und Einfügen zu warten stößt bei den meisten zurecht auf taube Ohren.
Nachdem ich gelesen habe, dass Du Text auch über den Bildern von Kopf und Fuß haben willst, habe ich mir nochmal Gedanken gemacht und mit etwas Hilfe eine ganz gute Lösung gefunden. Dein Glück ist, dass ich mich persönlich für dieses Thema interessiere, da ich solche Boxen selber gerne mal einsetzen möchte.
Hier die Herangehensweise:
1. Zuerst brauchst Du eine leere Seite mit Doctype,
head,
title,
body und allem was dazugehört.
2. Dann kannst Du Deinen Inhalt schreiben und mit
html auszeichnen. Der Inhalt, der später in die Box soll, wird mit einem
div gruppiert. Das sieht erstmal so aus:
PHP:
<div class="superbox">
<h1>Superbox</h1>
<p>Hier kann ein beliebiger Text stehen.</p>
<p>Wie viele Absätze, sind egal.</p>
<p>Bilder gingen auch.</p>
<p>Und noch einer</p>
</div>
3. Jetzt formatierst Du das Aussehen Deiner Seite (insbesondere der Box) mithilfe von CSS. Im Idealfall muss der Inhalt (
html-Code) dafür gar nicht mehr verändert werden.
a) Die Box
div.superbox braucht nach Deinen Vorstellungen eine
feste Breite in px sowie ein
Hintergrundbild, das in
y-Richtung wiederholt wird und eine
Hintergrundfarbe sowie eine
Textfarbe, um die Lesbarkeit von Texten zu garantieren.
b) Außerdem möchtest Du, dass ganz oben in der Box ein Hintergrundbild den Text unterlegt. Da die Box bereits ein Hintergrundbild hat, musst Du das Hintergrundbild für oben dem
ersten beliebigen Kindelement von div.superbox zuweisen. Der CSS-Selektor dafür lautet
Code:
div.superbox *:first-child
.
Nach dem Selektieren weist Du diesem das
Hintergrundbild zu, welches
nicht wiederholt wird und
oben positioniert werden soll.
Hier ergibt sich übrigens eine kleine Einschränkung für den Inhalt: Das erste Kindelement der Box darf z.B. kein Bild sein. Bei Nicht-Blockelementen gäbe es noch das Problem, dass sie nicht über die gesamte Breite gehen und das Hintergrundbild abgeschnitten würde. Letzteres ließe sich allerdings mit CSS beheben.
c) Etwas Ähnliches machst Du jetzt noch für das
letzte beliebige Kindelement von div.superbox. Mit etwas Englischkenntnis kannst Du Dir den Selektor selber herleiten. Dass dieses ein ebenfalls
nicht wiederholtes Hintergrundbild braucht, das
unten positioniert wird, kannst Du Dir sicher auch schon denken.
Soweit die Theorie. Nun schauen wir, ob das Ergebnis in einem Browser unseren Erwartungen entspricht.
d) Beim Betrachten (z.B. mit Firefox) sieht es schon ganz gut aus.
Nur dass die Ränder links und rechts nicht von den Kopf- und Fußbildern verdeckt werden, stört. Das liegt daran, dass Du Deinen *.gif-Dateien einen transparenten Hintergrund gegeben hast. Wenn man das noch fix ändert, passts.
Jetzt kommt der meist nervenaufreibendste Teil: Das Beheben von Fehlern im Internet Explorer.
e) Da der IE
:first-child und
:****-child nicht kennt, siehst Du nur Deine Box mit dem einen Hintergrundbild (Rahmen links und rechts). Ernüchterung. Abhilfe schaffen hier sogenannte
Conditional Comments zusammen mit IE-spezifischen
expression(...)-Werten für CSS-Eigenschaften. Damit die funktionieren, muss Javascript eingeschaltet sein. Ein Nutzer des Internet Explorers, der kein Javascript aktiviert hat, sieht auch mit diesem Workaround nur den Rahmen rechts und links. Da die Kombination IE ohne Javascript recht selten vorkommt und vor allem die Nutzbarkeit der Seite in keinster Weise eingeschränkt wird, ist das nicht tragisch.
Der Code für diesen Fix lautet
Code:
<!–-[if IE]>
<style type="text/css">
div.superbox * {
background: expression((this.previousSibling==null)?"[COLOR=Red]hier Wert(e) für [I]background[/I] beim [B]ersten[/B] Kindelement von div.superbox eintragen[/COLOR]":((this.nextSibling==null)?"[COLOR=Red]hier Wert(e) für Background beim [B]letzten[/B] Kindelement von div.superbox eintragen[/COLOR]":"none"));
}
</style>
<![endif]-–>
Ich hoffe, ich konnte Dir einen guten Leitfaden geben, anhand dessen Du Dein Ziel erreichen kannst. Noch mehr Code werde ich Dir ohne sichtbaren Einsatz Deinerseits nicht liefern. Wenn Du aber noch konkrete Fragen hast, dann stell sie einfach.
Viel Erfolg und Gruß
Junny
