Hallo SelfHTML'er!
Das Problem:
Ich habe ein Weblayout das ich gern auf Auflösungen ab 1024 zum Laufen bringen möchte. Der Kniff daran ist: Im Hintergrund soll eine Grafik sein,
welche beim horizontalen "Aufziehen" des Fensters mitwachsen soll und zudem
möglichst immer am unteren Rand ausgerichtet sein soll.
Ich habe mir daran nun schon die Zähne ausgebissen. Leider hab ich nur eine Lösung die so "halb zufriedenstellend" ist.
Ein Beispiel gibt es hier:
http://www.tausend-und-eins.de/austausch/test/
BackDiv_l und -_r sorgen dafür das das Bild sich mitskaliert und backpic enthält eine 1Pixel-breite Grafik die als Verbindung dient.
<body>
<div id="backpic">
<div id="backdiv_l2"></div>
<div id="backdiv_r2"></div>
<div class="clear"></div>
</div>
html {
padding:0;
margin:0;
border:0;
font-family: Arial, Helvetica, sans-serif;
background-color: #efefee;
overflow-x:hidden;
}
body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
border:0;
}
.clear {
clear: both;
float: none;
}
#backpic {
min-width: 1100px;
background-image: url(../pix/backpixel.jpg);
background-repeat: repeat-x;
width: 100%;
height: 940px;
}
#backdiv_r2 {
display: block;
float: right;
background-image: url(../pix/backright.jpg);
background-repeat: no-repeat;
min-height: 100%;
min-width: 640px;
z-index: -90;
background-position: bottom left;
width: 25%;
}
#backdiv_l2 {
display: block;
float: left;
background-image: url(../pix/backleft.jpg);
background-repeat: no-repeat;
min-height: 100%;
max-width: 600px;
z-index: -90;
background-position: bottom right;
width: 40%;
}
Anforderung:
Wie man an der testseite schön sieht ist eine "min-width" definiert,
So kann "rechts" nicht an "links" heranrutschen und der Text bleibt sichtbar.
Doch unten erscheint die schwarze Farbe des html-tag.
Das Bild soll jedoch möglich konstant immer am unteren Rand bleiben
ohne das der typische Fehler "position: absolute; bottom: 0; mit dem Scrollen passiert...
Ich werde Wahnsinnig... weiss Jemand eine elegante Lösung?
Danke!
Tachi