Hallo,
ich möchte ein Layout bauen, das fix auf dem Bildschirm ist.
In der Mitte ist ein Contentbereich mit horizontaler Navi, der sich scrollen lassen soll aber wie gesagt, der Hintergrund soll fest bleiben.
Weiterhin will ich, dass das Layout mit der Bildschirmgröße wächst...also das rechts eine 1px Grafik unendlich gekachelt wird und unten eine 1px Grafik unendlich gekachelt wird, wenn der Bildschirm größer als die Hauptgrafik ist.
Wie immer macht der IE6 Probleme, weil er den Befehel nicht kennt, bei allen anderen funktioniert es irgendwie.
Ich habe vorerst das Problem so gelöst, indem ich dem Body eine Hintergrundgrafik gegeben habe...Problem: es passt sich nicht mehr dem Bildschirm an, weil die Grafik begrenzt ist.
Und ich musste alle Div Boxen für den IE6 unsichtbar machen, weil er die ContentBox sonst nicht angzeigt hätte.
Meine Frage
Gibt es eine Lösung, dass ich das genauso realisieren kann wie in den modernen Browsern?
Bzw. wie bekomme ich es hin, dass sich der Hintergrund nicht bewegt aber trotzdem durch eine gekachelte Grafik der Bildschirmgröße anpasst
Im Anhang
so sollte es in etwa aussehen, ist nur ein Dummy, aber der
Content ist zu sehen,
die Hauptgrafik links oben,
die Rechte Verlängerung
die untere Verlängerung
Bis auf den Content soll alles Fix bleiben....
Im IE6 sieht es genauso aus nur dass die Verlängerungen nicht da sind :s
DANKE für eure Hilfe schonmal
ich möchte ein Layout bauen, das fix auf dem Bildschirm ist.
In der Mitte ist ein Contentbereich mit horizontaler Navi, der sich scrollen lassen soll aber wie gesagt, der Hintergrund soll fest bleiben.
Weiterhin will ich, dass das Layout mit der Bildschirmgröße wächst...also das rechts eine 1px Grafik unendlich gekachelt wird und unten eine 1px Grafik unendlich gekachelt wird, wenn der Bildschirm größer als die Hauptgrafik ist.
Wie immer macht der IE6 Probleme, weil er den Befehel nicht kennt, bei allen anderen funktioniert es irgendwie.
Ich habe vorerst das Problem so gelöst, indem ich dem Body eine Hintergrundgrafik gegeben habe...Problem: es passt sich nicht mehr dem Bildschirm an, weil die Grafik begrenzt ist.
Und ich musste alle Div Boxen für den IE6 unsichtbar machen, weil er die ContentBox sonst nicht angzeigt hätte.
Meine Frage
Gibt es eine Lösung, dass ich das genauso realisieren kann wie in den modernen Browsern?
Bzw. wie bekomme ich es hin, dass sich der Hintergrund nicht bewegt aber trotzdem durch eine gekachelte Grafik der Bildschirmgröße anpasst
Code:
* {margin: 0; padding: 0; }
body {
background-color: #0ee400;
}
* html body { /*Fester Hintergrund für den IE6*/
background-image: url(bg.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
width: 1238px;
height: 725px;
}
div#rechts {
background-image: url(rechts.jpg);
background-repeat: repeat-x;
height: 725px;
width: 100% !important;
float: left;
position: fixed;
}
* html div#rechts {
background-image: none;
height: 0px;
width: 0px;
float: none;
position: absolute;
}
div#unten {
background-image: url(unten.jpg);
background-repeat: repeat-y;
width: 1238px;
height: 100% !important;
position: fixed;
}
* html div#unten {
background-image: none;
height: 0px;
width: 0px;
float: none;
position: absolute;
}
div#wrapper1 { /*Hintergrund*/
background-image: url(bg.jpg);
background-repeat: no-repeat;
position: fixed;
height: 765px;
width: 1238px;
float: left;
}
* html div#wrapper1 {
background-image: none;
height: 0px;
width: 0px;
float: none;
position: absolute;
}
div#wrapper2 { /*Content Main Feld*/
position: absolute;
width: 500px;
margin: 70px 0px 0px 290px;
}
div#header {
background-color: #333;
width: 500px;
height: 100px;
}
div#navi {
background-color: #666;
width: 500px;
height: 20px;
}
div#content {
background-color: #999;
width: 500px;
min-height: 500px;
}
* html div#content {
height: 500px;
}
div#footer {
background-color: #990;
width: 500px;
height: 50px;
}
HTML:
<body>
<div id="unten"><!--Verlänergung nach unten -->
</div>
<div id="rechts"><!--Verlängerung nach rechts -->
</div>
<div id="wrapper1"><!--Bereich mit dem Hauptbild -->
</div>
<div style="clear: both;"></div>
<div id="wrapper2"><!--Wrapper für den Contentbereich mit Navi etc -->
<div id="header">
</div>
<div id="navi">
</div>
<div id="content">
SMS wird für jede Menge Verwirrung sorgen. Schuld ist das Handy- wörterbuch
</div>
<div id="footer">
</div>
</div><!--ENDE Wrapper für den Contentbereich mit Navi etc -->
</body>Im Anhang
so sollte es in etwa aussehen, ist nur ein Dummy, aber der
Content ist zu sehen,
die Hauptgrafik links oben,
die Rechte Verlängerung
die untere Verlängerung
Bis auf den Content soll alles Fix bleiben....
Im IE6 sieht es genauso aus nur dass die Verlängerungen nicht da sind :s
DANKE für eure Hilfe schonmal
