Hallo Welt!
Ich habe folgendes Problem:
Layout der Seite ist in 3 nebeneinander angeordneten DIVs und ein Umrandenes DIV aufgeteilt.
Die linke und rechte bilden den Hintergrund und das Mittlere
beinhaltet den Content. Demnach haben links u. rechts jeweils 50% der Gesamtbreite der Seite wobei das Background Image dann über margin und ein wenig Gebastel an der richtigen Stelle liegt. Das Mittlere hat eine feste Breite.
Soweit alles ganz toll
Jetzt aber:
Sollte durch eine geringe Browserhöhe ein vertikaler Scrollbalken entstehen und man scrollt nach unten wird das Hintergrundbild der divs Li u. Re ab dem vorherigen Viewport abgeschnitten.
Nach bereits 2 Tagen herumprobiere und vielen Threads welche ich in allen möglichen Foren entdeckt habe zu diesem Thema bin ich leider immer noch nicht weiter.
Wäre SUPER, wenn mir jemand "mal eben" helfen könnte.
Nebenbei: Das man mit OVERFLOW arbeiten kann um das Problem zu lösen ist mir bereits eingefallen, jedoch habe ich dies in allen möglichen Varianten ausprobiert...ohne Erfolg. Vielleicht mach ich einfach irgendwo einen dummen Fehler.
Hier die nötigen Codes und der vorübergehende Link:
Hier HTML:
HTML-Code:
<body>
<div id="hgMAIN">
<div id="hgLEFT"></div>
<div id="hgMID"><?php include ("Start.php");?></div>
<div id="hgRIGHT"></div>
</div>
</body>
Und die CSS:
HTML-Code:
html, body {
height: 100%;
margin:0px;
padding:0px;
}
#hgMAIN {
height:100%;
width:100%;
}
#hgMID {
background-color:#9FF;
width: 800px;
height:100%;
float: left;
position:relative;
}
#hgLEFT {
height:100%;
width:50%;
margin-right:-400px;
float: left;
background-color:#41260E;
background-image:url(images/hgLEFT.jpg);
background-position:right top;
background-repeat:repeat-y;
}
#hgRIGHT {
height:100%;
width:50%;
margin-left:-400px;
float: left;
background-color:#41260E;
background-image:url(images/hgRIGHT.jpg);
background-position:400px top;
background-repeat:repeat-y;
}
So. Bin mal gespannt.