3 Spalten Layout mit Dynamischem Inhalt

Starfox2007

Starfox2007

Mitglied
Hi zusammen,

Ich habe bei meinem 3 Spalten-layout mit der Dynamik ein Problemchen :)

Die unten angehängte Grafik zeigt wie ich es gerne haben möchte.

Header ist eine Background Grafik die immer statisch ist, dann kommen Mittlerer Background der soll nach unten variabel sein und eben Footer Background.

Der schwarze Rahmen soll nun ein Div sein der über den statischen Header Background geht und dann aber je nach Höhe den Mittleren Background mit nach unten erweitert.

Hier mal der Quellcode:

Code: 
<body>

<div id="header-bg">

<div id="inhaltvariabel">
 

</div>



<div id="mittlerer-bg">
  


</div>


</div>

<div id="footer-bg">
</div>


</body>

PHP: 
#header-bg {
margin-top:0px;
width:100%;
height:1200px;
background-image: url("../images/header-bg.jpg");
background-position:top;
background-repeat:no-repeat;
}


#mittlerer-bg {
position:absolute;
margin-top:1200px;
width:100%;
height:152px;
background-image: url("../images/mittlerer-bg.jpg");
background-repeat:repeat-y;
background-position:center;
z-index:100;
}

#footer-bg {
position:absolute;	
margin-top:152px;	
width:100%;
height:31px;
background-image: url("../images/footer-bg.jpg");
background-repeat:no-repeat;
background-position:bottom;
z-index:100;
}

#inhaltvariabel {
position:absolute;
margin-left:auto;
margin-right:auto;
top:300px;
width:990px;
height:1600px;
background-color:#63F;
z-index:200;
}
 

Anhänge

  • Unbenannt - 2.jpg
    Unbenannt - 2.jpg
    25,8 KB · Aufrufe: 21
Also, deine Infos sind ein bissel dürftig. Eins aber kann ich dir schon schreiben. Mit absolute Positionierung wirst du nur Probleme bekommen.

Du kannst ja mal deine org. Grafiken irgendwo hochladen, damit wir uns mal ein Bild;) machen können .

Und ein 1200px hoher Header ****?
 
Also der Header ist eigentlich kein Header sondern der Seitenbackground.

Hier mal ein Link:

http://www.fs-gilde.de/csstest

Hellblau ist der obere Background der soll statisch bleiben.

Rot ist der Inhalts Div der soll nach unten dynamisch erweiterbar sein.

Dunkellila ist der mittlere Background der mit dem roten Inhalt mit nach unten erweiterbar sein soll, wenn der rote Inhalt über die dunkellila Fläche drüber ist soll sich diese mit erweitern.

Türkis unten ist der Footer da brauch man nix weiter dazu zu sagen.
 
Naja so richtig weiter sind wir ja immernoch nicht.

Wenn es ein Einspalten-layout werden soll, dann hier mal etwas HTML und CSS

Code: 
<body>
 <div id="wrapper">
  <div id="header">...</div>
  <div id="main">...</div>
 <div id="footer">..</div>
</div>

Code: 
* {
 margin:0;
 padding:0;
}

body {
 float:left:
 width:100%;
 ...
 ...
}

#wrapper {
 width:960px;
 margin:0 auto;
 background:url(dein pfad zum bild) no-repeat top center;
 ...
 ...
}

#header {
 height:200px /* Oder nur padding */
}

#main {
 background:url( pfad zum bild) repeay-y 0 0;
}

#footer {
  background:url( pfad zum bild) repeay-y 0 0; /* Grafik Abschluss optional */
}
 
Ich habs inzwischen gelöst.

Das mit dem 3 Spalten Layout war ein Denkfehler von mir, ich habs jetzt mit Background Bild im Body und einem Inhalts Div gelöst.

Trotzdem Vielen Dank für die Mühen :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück