Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 20.06.2010, 15:27
MoDub MoDub ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.06.2010
Beiträge: 3
MoDub befindet sich auf einem aufstrebenden Ast
Unglücklich 3 Spalten Layout | Probleme bei Hintergrundbild

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.

Geändert von MoDub (21.06.2010 um 14:25 Uhr)
Mit Zitat antworten
Sponsored Links