Seitenrahmen mit Hintergrundbildern erstellen.

Mit ineinander verschachtelten Tabellen, die verschiedene Hintergründe haben läßt sich um eine ganze Seite oder einzelne Abschnitte ein farbiger Rahmen erstellen. (So wie bei "Emmas Triples" und einigen Vorlagen im I2TLF)
Einfacher und vielseitig geht dies mit verschachtelten div, die mit CSS formatiert werden - dies wird hier beschrieben.

Hintergründe die nahtlos "kacheln" (also sich wiederholen bis die Fläche ganz ausgefüllt ist) findet man auf vielen Seiten im Netz - bei mir gibt es hier auch etliche. Für diese Art der Gestaltung sollten die Muster nicht allzu groß sein.

So funktioniert es im Prinzip


Dies ist der HTML-Abschnitt in dem dann die Texte und Bilder der Seite enthalten sind.
Die Anzahl der Rahmen kann selbstverständlich verändert werden - ebenso wie die Anzahl der Textabschnitte, die im inneren Rahmen enthalten sind.

Der Quelltext zum kopieren:

<div id="rahmen1">
  <div id="rahmen2">
    <div id="rahmen3">
      <div id="rahmen4">
        <div class="textfeld">
          <p align="center">Text und Bilder</p>
        </div>
          <br>
        <div class="textfeld">
          <p align="center">Text und Bilder</p>
        </div>
      </div>
    </div>
  </div>
</div>


Wenn weniger Rahmen oder nur ein Textfeld benutzt wird darauf achten nicht nur den Beginn
<div id="rahmen4"> sondern auch das Ende des HTML-tags für den Rahmen zu entfernen (</div>)

Wenn nur dieser Quelltext eingefügt wird, dann sieht man außer den beiden Texten nichts - für die Gestaltung ist die CSS Formatierung erforderlich, die zu Beginn des Quelltextes bzw bei eigenen HTML Seiten in den Head der Seite kommt.

Die Gestaltung der Rahmen

Für die Rahmen werden mindestens festgelegt:

  • background: #xxxxxx [Farbe] und/oder url(http://domain/ordner/dateiname) [die URL/Adresse des Bildes im Netz]. Für den Fall, daß Bilder nicht angezeigt werden können ist es sinnvoll gleichzeitig auch eine passende Farbe anzugeben.
  • margin: XXpx [Außenabstand des ersten Rahmens] - wenn der nicht bis zum Rand gehen soll und der Seitenhintergrund noch eine andere Farbe oder Hintergrundbild haben soll.
  • padding: XXpx [Innenabstand des Rahmens = Abstand zum nächsten Rahmen bzw. innen zum Text]

Für dieses Beispiel findet ihr die Bilder unter Wassermelone. Bilder bitte auf eigenen Webspace laden.
Die Formatierung für den Rahmen sieht so aus:

<style type="text/css">
body {
  background: #ffeee7 url();
}
#rahmen1 {
  background: #90141e url(http://domain/ordner/wmelone_e44.jpg);
  margin: 20px ;
  padding: 25px ;
}
#rahmen2 {
  background: #dd7047 url(http://domain/ordner/wmelone_e42.jpg);
  padding: 10px ;
}
#rahmen3 {
  background: #566552 url(http://domain/ordner/wmelone_e43.jpg);
  padding: 25px ;
}
#rahmen4 {
  background: #c9352b url(http://domain/ordner/wmelone_e59.jpg);
  padding: 15px ;
}
.textfeld {
  background: #EFEFEF ;
  padding: 10px ;
}
</style>

Durch die Veränderung der Hintergrundbilder und Breiten sind hier schon zahllose Möglichkeiten vorhanden.

Varianten und Ergänzungen

[Beispiel 1] Den einzelnen Rahmen kann zusätzlich ein Rand zugewiesen werden - z.B. um einen Relief- bzw: Passepartout-Effekt zu erreichen. Dazu im style ergänzen:

border: 2px inset #FFFFFF ;  Weitere Möglichkeiten für border


[Beispiel 2] Die Rahmenbreite muß nicht an allen Seiten gleich sein. Muster die eine waagerechte oder senkrechte Ausrichtung haben möchte man vielleicht nur an den Seiten oder nur oben und unten haben.
Dazu setzt man bei den Rahmen für padding verschiedene Werte ein.

padding: 0 25px ; (zwei Werte) bewirkt, daß oben und unten kein Rand ist - nur seitlich 25px.

Der erste Wert ist für oben und unten - der zweite für links und rechts.
Bei vier Werten ist die Reihenfolge oben/rechts/unten/links.

[Beispiel 2] Statt verschiedene Textabschnitte zur Gliederung zu verwenden kann man auch eine passende Trennlinie einsetzen.
Dazu im stylesheet ergänzen:


.divider {
  background: url(http://domain/ordner/dateiname);
  height: 8px ;
  font-size: 1px ; /* der IE nimmt sonst mindestens Schriftgröße als Höhe */
}

und im HTML Abschnitt einfügen wo eine Trennlinie sein soll:


<div class="divider"></div>

Beispiel 1



Die Bilder für diese Seite gibt es hier

die verwendeten Bilder - mit Rechtsklick speichern und auf eigenen Webspace laden:
  



Der Quelltext für diesen Rahmen (bitte eigene URL eintragen):




Beispiel 2



Die Bilder für diese Seite gibt es hier

die verwendeten 6 Bilder - mit Rechtsklick speichern und auf eigenen Webspace laden:

  

Das letzte Bild ist für die folgende Trennlinie


Der Quelltext für diesen Rahmen (bitte eigene URL eintragen):




Für alle die es nicht ganz so gemischt mögen hier noch ein dezenteres Beispiel.

Den Hintergrund gibt es hier

Für die Abstufung der Helligkeit sind hier zwei Raster (transparente gif - vergrößert - sie sind nur 10x10 Pixel groß) eingebaut worden. Bitte mit Rechtsklick speichern.

  

Viel Spaß und Erfolg beim experimentieren

Statistik
heute: 56 
online: 2