zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 3 Spalten Layout | Probleme bei Hintergrundbild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.06.2010, 14:27
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 13:25 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.06.2010, 19:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Falsche Herangehensweise: Keine divs für den Hintergrund - mache eine Grafik daraus und gib sie body (es bleibt dann nur #hgMID).

Und zum Thema 100%-Höhe siehe Seite auf 100% Höhe - XHTMLwiki
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.06.2010, 19:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.06.2010
Beiträge: 3
MoDub befindet sich auf einem aufstrebenden Ast
Standard Hgs sollen eventuell auch Inhalt haben

Hallo Heiko!
Danke für deine Antwort!

Diese Lösung mit der "Großen" Hintergrundgrafik hatte ich auch schon. Das Problem dabie ist nur leider, dass ich in diese noch eventuell Inhalte verpacken möchte.

Deshalb wäre es super, wenn man es irgendwie hin bekäme, 3 divs (So wie ich es bereits hab) als 3 Spalten Layout nutzen zu können.

Fällt dir da was ein?
Mit Zitat antworten
  #4 (permalink)  
Alt 20.06.2010, 19:45
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Da dein mittiger container eine feste Breite hat, kannst du es ruhig so machen, wie heiko es sagte. Deswegen kannst dann trotzdem noch 3 Divs nebeneinander haben und auch Inhalte in deine äußeren container packen... Wo ist das Problem?
Mit Zitat antworten
  #5 (permalink)  
Alt 21.06.2010, 13:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.06.2010
Beiträge: 3
MoDub befindet sich auf einem aufstrebenden Ast
Standard Gute FRage

Hallo Cebito!
tja... Da habt ihr beide recht. Ich mach das jetzt auch so. Alleine schon weil ich wirklich langsam genug Zeit geopfert habe.

Trotzdem muss es doch eine möglichkeit geben, ein 100% div in height mit einem BG zu versehen, der sich bei Scrollerei mit scrollt. In dieser Konstellation gibt es doch einige Seiten, die funktionieren. (Glaub ich zu wissen)
Mit Zitat antworten
Antwort

Stichwörter
100%, abgeschnitten, background image, div höhe

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
3 Spalten Layout: unbeabsichtigtes global clearing Cu Chullain (X)HTML 6 01.05.2011 16:59
LAYOUT: 3 Spalten davon 2 position:fixed open CSS 1 21.04.2011 15:06
2 Spalten Layout INKL. 1 Spalten Layout miedsegadse CSS 20 14.04.2011 00:02
3 Spalten Layout mit variabler Länge tstuber CSS 1 08.10.2008 14:35
validiertes CSS 2 spalten layout mit header und footer macht probleme ASB CSS 4 31.07.2007 07:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:28 Uhr.