tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
4
ZUGRIFFE
326
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 03.10.11 14:49 #1
    Avatar von Starfox2007
    Starfox2007 Starfox2007 ist offline Mitglied Silber
    Registriert seit
    Apr 2010
    Beiträge
    87
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    <body>
 
<div id="header-bg">
 
<div id="inhaltvariabel">
 
 
</div>
 
 
 
<div id="mittlerer-bg">
  
 
 
</div>
 
 
</div>
 
<div id="footer-bg">
</div>
 
 
</body>

    PHP-Code:
    #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;
    } 
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken 3 Spalten Layout mit Dynamischem Inhalt-unbenannt-2.jpg  
     
    Zitieren Zitieren
  2. 03.10.11 15:28 #2
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    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 ****?
     
    Zitieren Zitieren
  3. 03.10.11 16:28 #3
    Avatar von Starfox2007
    Starfox2007 Starfox2007 ist offline Mitglied Silber
    Registriert seit
    Apr 2010
    Beiträge
    87
    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.
     
    Zitieren Zitieren
  4. 03.10.11 19:48 #4
    djheke djheke ist offline Mitglied Silber
    Registriert seit
    Sep 2011
    Beiträge
    96
    Naja so richtig weiter sind wir ja immernoch nicht.

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

    Code :
    1
2
3
4
5
6

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

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

     
* {
 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 */
}
     
    Zitieren Zitieren
  5. 04.10.11 19:36 #5
    Avatar von Starfox2007
    Starfox2007 Starfox2007 ist offline Mitglied Silber
    Registriert seit
    Apr 2010
    Beiträge
    87
    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
     
    Zitieren Zitieren
« Hover bei "class" geht nicht?! (Menü) | div Elemente zentrieren mit float:left »

Ähnliche Themen

  1. URL bei dynamischem Inhalt ändern
    Von xxxStream im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.08.11, 12:34
  2. DIV-Box mit dynamischem Inhalt
    Von chuvak im Forum CSS
    Antworten: 2
    Letzter Beitrag: 25.07.11, 16:12
  3. 3-Spalten-Layout unter 2-Spalten-Layout setzen
    Von cocoon im Forum CSS
    Antworten: 9
    Letzter Beitrag: 03.07.09, 12:31
  4. 3-Spalten-Layout mit 2-Spalten ContentArea
    Von WebGeek im Forum CSS
    Antworten: 3
    Letzter Beitrag: 07.05.07, 06:13
  5. window.confirm() in eigener Funktion und mit dynamischem Inhalt verwenden
    Von Ceppi im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 06.09.05, 16:05