Super kompliziertes Layout umsetzen

Identität

Erfahrenes Mitglied
Hallo,

ich möchte gerade für meine Webseite ein neues Design umsetzen. Es hat oben und unten einen Balken, über diesen Balken liegt ein Container. Der Container unten schließt nicht gerade ab, sondern hat eine leichte Wölbung. Bisher habe ich nur die beiden Balken hinbekommen. Mir fällt einfach nichts ein wie ich den Container realisieren kann.

Er soll unten und oben immer die gleiche Position haben, also über den Balken liegen. Der Mittelteil muss also streckbar sein. Übrigens sind unten und oben auch noch zwei Schatten. Ist es überhaupt möglich, sowas umzusetzen?

http://www.myimg.de/?img=howtoe52f0.jpg

Hier mein Quellcode:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <link rel='stylesheet' href='styles/main.css' type='text/css' />
 </HEAD>

 <BODY>
    <div id="background-top"></div>
</BODY>
</HTML>

Code:
html, body{
    margin: 0;
    padding: 0;
    background: #fff url(../images/layout/background_bottom.gif) repeat-x bottom;
    height: 100%;

}
#background-top{
    background: #fff url(../images/layout/background_top.gif) repeat-x;
    height: 304px;
}

Das andere habe ich verworfen, das hat einfach alles nicht hingehauen.
 
Hi,

bei geschickter Aufteilung der drei Grafikbereiche (Header,Content,Footer) in Kombination mit der Beispielvariante "Modell mit Header und Footer" aus meinem CSS-Tutorial CSS-Layout mit 100%-Höhe dürfte es ein Leichtes sein, das Layout umzusetzen :)

mfg Maik
 
Hallo Maik,

wie kann ich dir nur danken? Das funktioniert richtig gut und ich habe das Tutorial ausgedruckt und studiere das Morgen bis ich es verstanden habe. Du hast mir sehr geholfen, vielen Dank!
 
Zurück