Rahmen um Content-Box

[werbeklaus]

Hallo ihr,
ich habe eine Homepage (CMS), und bastle gerade an einem schicken design dafür.

Was ich will:
Der Content ist in einer div-box. Um diese Box möchte ich einen Rahmen ziehen, der die Farbe der Box schön in die Hintergrundfarbe übergehen lässt. Dabei sollen Breite und Höhe völlig variabel bleiben. Es müsste also eine weitere Box um die Content-Box gezogen werden, die mittels padding den nötigen Abstand hält, und in dem dann die png-dateien, die ins transparente faden, als Hintergründe definiert sind.

Das Problem:
Ich muss 8 Hintergründe definieren (die 4 ecken und die 4 seiten), das geht nicht mit einem div. Ich brauch also 8 davon, die
a) geschachtelt oder
b) nebeneinander
angeordnet sind.
Die Möglichkeit a) geht nicht, weil sich die Hintergründe dann überschneiden, und die ecken blöd aussehen. Man kann mit halb durchsichtigen Dateien eben leider nichts zudecken. b) wird schwierig, weil ich keine Ahnung habe, wie ich den 4 Seiten klar machen soll, wie groß sie sein sollen - die Content-Box ist ja variabel.

Dabei denke ich jetzt noch an eine 3x3 Tabelle, in der die mittlere als Content-Zelle die drumherum alle aufspannt. Meint ihr das macht sinn? Tabellen und Layout ist ja immer so eine Sache.... Das Problem ist dazu noch, dass die Tabellen durch css-einstellungen im cms schon komplett verunglimpft sind, und ich nicht weiss, wie ich diese ganzen einstellungen rausnehme, damit diese eine tabelle unsichtbar ist.

So, ich hoffe, ich hab mich klar genug artikuliert, und würde mich sehr darüber freuen, wenn es jemanden gibt, der einen Lösungsvorschlag hat. Ich bin mittlerweile nämlich mit alle Möglichkeiten, die mir eingefallen sind durch.

Für Rück- und Verständnisfragen bin ich selbstverständlich offen...
Gruß,
werbeklaus

[Gunnar Bittersmann]

@@werbeklaus:

Der Content ist in einer div-box. Um diese Box möchte ich einen Rahmen ziehen, der die Farbe der Box schön in die Hintergrundfarbe übergehen lässt. Dabei sollen Breite und Höhe völlig variabel bleiben.

Du suchst die 'border-image'-Eigenschaft. ;-)

Oder „runde Ecken“.

Live long and prosper,
Gunnar

[werbeklaus]

Du suchst die 'border-image'-Eigenschaft. ;-)

Wow, genau das suchte ich. Aber mit welchen Browsern komme ich denn mit CSS3 Befehlen überhaupt weiter? Hab noch nie was mit CSS3 zu tun gehabt...

thx,
werbeklaus

[Kai345]

[latex]Mae  govannen![/latex]

Du suchst die 'border-image'-Eigenschaft. ;-)

Wow, genau das suchte ich. Aber mit welchen Browsern komme ich denn mit CSS3 Befehlen überhaupt weiter? Hab noch nie was mit CSS3 zu tun gehabt...

Bisher auf Windows: anscheinend nur Safari, zumindest mit neuer Webkit-Engine. Alle anderen Browser haben es noch nicht eingebaut/aktiviert.
test

Cü,

Kai

[josh]

Hallo,

Jetzt wollte ich doch gerade "sliding doors" vorschlagen (danke an das Forum hier :-) ), aber für variable Content-Bereiche, die auch noch beliebig lang werden können, ist das etwas unpraktisch. Vorschlag zur Variante b):

  
<div id="content">  
  <div class="ecke1"></div>  
  <div class="ecke2"></div>  
  <!-- ecke3, ecke4, rand1, rand2, rand3 - kein rand4! -->  
  <!-- restlicher Inhalt -->  
</div>  

Der content-div bekommt einen (Zahl) Rand und ein passendes Padding sowie position:relative;. Die Div`s mit den Klassen werden (ausnahmsweise) absolut positioniert.

Jetzt gibts bestimmt Haue ;-)

Gruß

[werbeklaus]

Hallo,

<div id="content">
  <div class="ecke1"></div>
  <div class="ecke2"></div>
  <!-- ecke3, ecke4, rand1, rand2, rand3 - kein rand4! -->
  <!-- restlicher Inhalt -->
</div>

  
So ähnlich hab ichs jetzt gelöst, es sind 4 geschachtelte Divs, die die 4 seiten als hintergrund nehmen. Darüber werden dann die 4 ecken gelegt, die jetzt jedoch nicht mehr ins transparente gehen, da sie sonst die anderen hintergründe nicht überdecken würden. Das heisst also die Ecken sind jetzt eben ein übergang in die Hintergrundfarbe.  
  
Danke für eure Hilfen,  
werbeklaus