Hintergrund beim Scrollen verlängern

Dirk · #1 (**permalink**) 03.01.2008, 19:14

Hallo,

auch auf die Gefahr hin (weiß, daß es diese Frage schon einige Male gab), daß ich hier doppelt Fragen poste, aber ich mach's mal trotzdem.

Ich bekomme es par tout nicht hin, daß ich es bei einem barrierefreien/tabellelosen Design hinbekomme, daß der Hintergrund über mehrere DIVs (es ist ein 3-spaltiges Layout) über alle DIVs gestreckt wird, wenn der Inhalt größer als 100% wird und dadurch Scrollen notwendig wird.

Könnte mir vielleicht jemand ein ganz einfaches Beispiel posten (ohne irgendwelche SchnickSchnack-Verzierungen), z.B. mit 2 Spalten, bei denen der Hintergrund verlängert wird?

Die Theorie mit Hintergrundgrafik,... ist mir bewußt, aber irgendwas passt einfach nie (hab mir schon 1000e Beispiele - auch hier im Forum - oder echte Seiten angeschaut).

Danke und Grüße,

Dirk

Crizzo · #2 (**permalink**) 03.01.2008, 19:48

Gib dem umschließenden Element, welches dann die volle Seitenhöhe hat, keine Höhenangabe. "width:100%;" von body zum Beispiel, geht nur von der Sichtbarenhöhe aus und dann hört der Hintergrund an der Browserunterkante auf.

Zeig uns mal deinen kompletten Code, dann können wir dir helfen.

Dirk · #3 (**permalink**) 03.01.2008, 22:17

Hi BlackHawk,

vielen Dank für die schnelle Antwort! Leider habe ich das nicht so 100%ig verstanden, wo ich das width: 100%; genau setzen soll (hab's jetzt mal im Body gelassen).

Hier habe ich mal die "Kurzform" meines Layouts gepostet, nur das wesentliche:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>TITEL</title>
	
	<style type="text/css">
	<!--
	body {
		width:						100%;
		margin:						auto;
		background-color:	#4F719F;
	}
	
	#layout {
		width:						782px;
		background-image:	url('back.jpg');
		border
	}
	
	#left {
		width:						190px;
		height:						100%;
	}
	
	#menu {
		width:						118px;
		vertical-align:		top;
	}
	
	#main {
		width:						480px;
		vertical-align:		top;
		text-align:				center;
	}
	-->
	</style>
</head>

<body>

	<div id="layout">
			<div id="left">
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
bla bla bla<br /><br />
			</div>
			<div id="menu">
			
			</div>
			<div id="main">
			</div>
	</div>
	
</body>
</html>

Lasse ich bei #left die 100% weg, dann ist die Seite bei zu wenig Inhalt nicht 100% hoch. Mache ich die bla bla bla Füllzeichen rein, dann erstreckt sich der Inhalt nur über 100% (und wird nicht verlängert).

Lasse ich die 100% in #left weg, dann erstreckt sich zwar der Hintergrund zwar von Browserober- bis unterkante, aber dann s.o.

Im IE7 würd's mit zu viel Inhalt und ohne die 100% auch passen...

Kann mir zudem vielleicht noch jemand sagen, wie ich die Homepage in das Mittlere der Seite bekomme? Irgendwie hab ich's schon so hinbekommen, daß es beim IE passt, dann aber beim FF nicht und umgekehrt (die fast fertige Seite - bis auf die 2 angesprochenen Probleme - liegt leider auf der HDD meines PCs und nicht auf dem Laptop, weshalb ich jetzt nicht schreiben kann, wie ich das mit dem Zentrieren bisher gemacht habe (und der PC hat im Moment kein BS).

Vielen Dank und Grüße,

Dirk

Crizzo · #4 (**permalink**) 03.01.2008, 22:37

Erstmal, habe ich mich verschrieben, es sollte "height:100%;" heißen an Stelle von "width:100%;".

Nimm also body "width:100%;" weg. Wieso hat body "margin:auto"?

Die Höhe von #left orientiert sich an #layout. #layout orietiert sich an seinem Inhalt und wird von ihm gedehnt. "height:100%;" ist überflüssig, da nicht positionierte Element sowieso den vollen Platz einnehmen, den sie bekommen können.
FAQ Punkt 4 löst das Problem, der 100% Höhe deiner Seite bei zu wenig Inhalt: http://xhtmlforum.de/40267-faq-h-ufi...ragen-und.html

Lass beim Einbinden von Hintergrundbildern die ' weg. Die schaden dem IE/Mac.

plastiko · #5 (**permalink**) 03.01.2008, 23:02

Sollen #left , #menu und #main alle untereinander angezeigt werden?
Oder verstehe ich wieder etwas nicht?

Crizzo · #6 (**permalink**) 03.01.2008, 23:04

Naja, er hat nicht mal den Versuch gestartet, sie zu positionieren, also kommt das noch oder auch nicht.

plastiko · #7 (**permalink**) 03.01.2008, 23:09

Da bin ich ja beruhigt.
Ich dachte schon ich sei betrunken.

Dirk · #8 (**permalink**) 03.01.2008, 23:27

Hi BlackHawk,

vielen Dank! So hat's funktioniert mit der Höhe.

Nun habe ich das mit dem zentrieren mal probiert und habe dafür auch noch eine Anleitung hier im Forum gefunden (http://xhtmlforum.de/32917-viele-pro...llung-bei.html)

Demnach habe ich das * html body in html body * umbenennen müssen (was macht der Stern denn genau? Der * steht doch immer für "alle Elemente"?!?!). Sonst hat mir der IE 7 das ganze linksbündig gemacht. Danach ging's dann...

Klappt das so auch wirklich in älteren Browsern? Also IE 5 wie beschrieben? Hab nur den IE 7 und FF auf dem PC...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>TITEL</title>
	
	<style type="text/css">
	<!--
	html {
		height:						100%;
	}

	body {
		text-align:				center;
		color:						#000;
		margin:						0;
		padding:					0;
		min-height:				100%;
		background-image:	url(back.jpg);
		background-color:	#4F719F;
		background-repeat:repeat-y;
		background-position:center;
	}
	
	html body * {
		height:						100%;
		text-align:				left;
	}
	
	#layout {
		margin-left:			auto;
		margin-right:			auto;
		width:						790px;
	}

	#left {
		float: 						left;
		margin:						0;
		padding:					0px;
		width:						190px;
		text-align: 			left;
	}
	
	#menu {
		float: 						left;
		margin:						0;
		padding:					0px;
		width:						120px;
		vertical-align:		top;
	}
	
	#main {
		float: 						left;
		margin:						0;
		padding:					0px;
		width:						480px;
		vertical-align:		top;
		text-align:				center;
	}
	-->
	</style>
</head>

<body>

	<div id="layout">
			<div id="left">
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
				bla bla bla<br /><br />
							

			</div>
			<div id="menu">
			bla
			</div>
			<div id="main">
			blubb
			</div>
	</div>
	
</body>
</html>

Vielen Dank und GRüße,

Dirk

[EDIT]Hab gerade gesehen, daß neues gepostet wurde: Das float: left habe ich jetzt eingebaut O

Sorry![/EDIT]

Crizzo · #9 (**permalink**) 03.01.2008, 23:33

Ja, das klappt überall.

PS: Unterschiedliche Hintergrundfarben der einzelnen Element helfen beim tüfteln ungemein.

PPS: Deine Meta-Angaben sind noch sehr dürftig. Da solltest du dringend nacharbeiten.

Dirk · #10 (**permalink**) 04.01.2008, 00:38

Super, vielen Dank! Das mit den Meta-Daten, CSS in Datei auslagern,.. mache ich dann am Ende. Auch das mit den Hintergrundfarben die ich dann zum Testen setze habe ich schon gemacht.

Mir ging's jetzt halt erstmal drum die Seite über 100% und zentriert zu bekommen. Jetzt kann weitergebastelt werden

Vielen Dank und Grüße,

Dirk

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Frage: Wie Text vor Hintergrund in einem Fenster scrollen?	wbiebel	CSS	2	19.08.2009 18:49
Hintergrund automatisch verlängern	gamefrog	CSS	3	16.01.2009 16:24
div Hintergrund wird im IE durch Hintergrund des unteren divs überlagert	ren83	CSS	6	19.10.2008 15:50
Div Orientierung	Leonidus	CSS	22	30.05.2007 17:05
Hintergrund wird im IE abgehackt	lekim	CSS	0	29.03.2006 14:14