Bernd: Schlagschatten für Webseite

Beitrag lesen

Morgen,

das Problem ist, dass ich dringend Hilfe brauche. Ich brauche den Kram für nächste Woche in der Schule, da ich dann einen kleinen Vortrag diesbezüglich halten muß. Wäre echt super wenn ihr mir ein wenig weiterhelfen könntet.

Es geht darum der Webseite einen Schatten zu verpassen welcher sie komplett umläuft. Ich weiß leider garnicht wie ich dabei am besten vorgehe. Ausgangsbasis ist diese Codestruktur:

<body>
  <h1 id="header">Titel der Seite</h1>

<ul id="navigation">
    <li>Auswahl 1</li>
    <li>Auswahl 2</li>
    <li>Auswahl 3</li>
  </ul>

<p id="content">Hier landet der eigentliche Inhalt</p>

<address id="footer">hier kommt das copyright hin<address>
</body>

mit diesem CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  width: 950px;
  margin: 20px auto;
}

#header {
  background: green;
}

#navigation {
  position: left;
  background: blue;
}

#content {
  position: right;
  background: red;
}

#footer{
  clear: both;
  background: yellow;
}

Insgesamt habe ich mir vier Schattengrafiken mit einem Grafikprogramm erstellt.

1.)
Ein Schatten für die linke Seite. Diese Grafik soll abhängig von der Höhe der jeweiligen Webseite beliebig oft wiederholft werden, so das sie auf der kompletten linken Seite unabhängig von deren Höhe zu sehen ist.

2.)
Ein Schatten für die rechte Seite. Diese Grafik soll abhängig von der Höhe der jeweiligen Webseite beliebig oft wiederholft werden, so das auf der kompletten rechten Seite unabhängig von deren Höhe zu sehen ist.

3.)
Ein Schatten der die obere Seite sowie die Ecken abdeckt. Dieser Schatten hat die feste Breite der Webseite (950px) und kann deshalb auch die Ecken enthalten.

4.)
Ein Schatten der die untere Seite sowie die Ecken abdeckt. Dieser Schatten hat die feste Breite der Webseite (950px) und kann deshalb auch die Ecken enthalten.

Wie kann ich ausgehend von meinen Vorüberlegungen am besten diese Schatten in die Webseite integrieren?