grafisches fenster aus 9 teilen mit CSS

[Steel]

Hi!

ecken und kanten können aber nicht eine grafik sein.

Doch.

erklärung:

o--o--o--o
| 0| 1| 2|
o--o--o--o
| 3| 4| 5|
o--o--o--o
| 6| 7| 8|
o--o--o--o

die grafiken 0, 2, 6 und 8 haben eine fixe größe und sollen auch genau so angezeigt werden

die grafiken 1 und 7 haben eine fixe höhe die breite allerdings kann theoretisch unendlich sein (die grafik datei selbst hatt eine breite von einem pixel)

die grafiken 3 und 5 haben eine fixe breite die höhe allerdings kann theoretisch unendlich sein (die grafik datei selbst hatt eine höhe von einem pixel)

und grafik 4 ist einfach eine hintergund grafik.

Suit hat nicht ganz recht. Aber fast.

Fuer das, was Du hier beschreibst, brauchst Du maximal 4 Grafiken. Ich habe Deine Beispiele gesehen also verwende ich Pfeile um die Raender darzustellen.

Als erstes moechtest Du einen Container wo alles Drin ist. In diesem befindet sich der Container mit deinem Inhalt.

Eine Grafik fuer die Ecken:
/\ /

Eine Grafik fuer die horizontalen Raender:

<<<<<

Eine Grafik fuer die vertikalen Raender:
/\/
/\/
/\/

Eine Grafik fuer den Hintergrund:

Ein Container das alles kapselt:
<div class='fenster'>
</div>

Ein Container fuer den oberen Rand samt Ecken:
<div class='randoben'>
  <div class='eckelo'></div>
  <div class='eckero'></div>
</div>

Ein Container fuer den unteren Rand samt Ecken:
<div class='randunten'>
  <div class='eckelu'></div>
  <div class='eckeru'></div>
</div>

Ein Container fuer den linken Rand:
<div class='randlinks'>
<div>

Einen fuer rechts:
<div class='randrechts'>
<div>

Nun noch dein Inhalt:
<div class='inhalt'>
</div>

Das alles sieht dann so aus:
<div class='fenster'>
  <div class='randoben'>
    <div class='eckelo'></div>
    <div class='eckero'></div>
  </div>
  <div class='randlinks'>
    <div class='randrechts'>
      <div class='inhalt'>
         <h1>Tolle Fenster!</h1>
         <p>
          Toller Inhalt!
         </p>
      </div>
    <div>
  <div>
  <div class='randunten'>
    <div class='eckelu'></div>
    <div class='eckeru'></div>
  </div>
</div>

Die horizontalen Raender bekommen eine Hohe in Randbreite und als Hintergrund das Randbild - unten um Randbreite verschoben.
Die Ecken werden absolut in den Ecken positioniert und bekommen Hoehe und Breite einer Ecke mit den Ecken als Hintergrund - je nach Ecke auch entsprechend verschoben.
Linker und rechter Rand bekommen ein Padding in Randbreite sowie die vertikalen Raender als Hintergrund - wieder entsprechend verschoben.
Der Inhalt bekommt seinen Hintergrund.

Sollte fertig sein. Habs jetzt nicht probiert.