Problem bei Webdesign (Div-Bereich mit Hintergrund)

[MasterFX]

Bin gerade dabei eine Webpage zu bastel. Sie besteht aus 4 Div-Bereicht:
Kopf
Menue
main
inhalt
Im "inhalt"-Bereich sind die anderen (kopf,menue und main drin. Die gesamte seite ist 800px breit und mittig zentriert. Der inhalt-Bereich hat ein Hintergrundbild. Nun habe ich folgendes Problem. Wenn der main Bereich länger ist, so dass man nach unten scrollen muss hört der Hintergrund einfach auf. Die höhe vom inhalt habe ich aber auf 100% gestellt. Müsste er sich nicht dann dem main Bereich anpassen?

 

[custus]

Du kannst mal hier schauen, da findest du infos zu den Befehlen für CSS gesteuerte DIV's.

 

[sverebom]

Ich verstehe ich nichts so ganz, was du meinst (Kauderwelsch). Poste mal bile ein Bild und häng den Quellcode an (oder verlink einfach die Seite).

Ich vermute, das du mit "float" gearbeitet hast. In dem Fall muß wahrscheinlich an gegebener Stelle "clear: both" angegeben werden. Kann ich nur vermuten, da ich mir nicht genau vorstellen kann, was du eigentlich willst.

Der "Inhalt"-Container umschliesst die anderen drei Container? Das ist ein wenig kompliziert oder nicht? Eine ähnliche Seitenstruktur habe ich kürzlich für meinen Schulleiter gebaut. Vielleicht kann ich dir damit aushelfen.

 

[MasterFX]

Ich hab mal eben provisorisch was gebastelt. Ich habe dem hier sind inhalt und main bereich vertausch, aber egal. Dem inhalt bereich habe ich jetzt einfach mal ne höhe von 2000px gegeben, wenn du nach unten scrollst siehst du was ich meine. LINK

 

[Nase]

Du hast bei deinem Beispiel allerdings auch nur dem Container #main die Höhe von 100% gegeben. Das heisst, das der Bereich 100% der Browserhöhe einnimmt. Du darfst das nicht mit der Funktionsweise von Tabellen durcheinander werfen. Versuch aber mal trotzdem, dem Hintergrundbild die Eigenschaft background-attachment: fixed; zu geben.

 

[sverebom]

Ich kann nur vermuten, das du sowas wie hier anfertigen willst. Dies ist die oben erwähnte Webseite, die ich für den Bruder meines chulleiters entworfen habe. Dem Content fehlt hier der Hintergrund, aber es würde mit einem Hintergrund funktionieren. Und egal wie lang der Inhalt wird, die Navi skaliert immer mit. Kopier dir ruhig den Quellcode.

Wenn du bei einem DIV-Container "Height="100%" angibst, dann skaliert der Container nicht auf die volle Höhre des Browserfensters sondern nur auf die mindestens benötigte Höhe, um den Inhalt unterzubringen. Wenn der Inhalt nicht so hoch wie das Browserfenster ist, dann skaliert auch nicht der Container auf Höhe des Browserfensters.

Falls dür für 800x600 optimieren willst, solltest du eine Breite von 740 bis 760 angeben, damit auch noch ein Scrollbalken und für die Optik ein wenig Luft ins Broweserfenster passt!

Hier der CSS-Code für die oben genannten Webseite (wirst nicht Alles brauchen):

body {
	margin: 0;
	background: #FFFFFF url(images/bg.gif);
}

#container {
	width: 740px;
	margin: 5px;
	background: #EFEFEF;
	border: 1px solid #D10E16;
}

#head {
	text-align: left;
	background: #FFFFFF;
}

#navi {
	text-align: right;
	background: #D10E16;
	border-top: 3px solid #D10E16;
	border-bottom: 4px solid #D10E16;
	font: bold 12px Arial, Helvetica, sans-serif;
}

#navi ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navi li {
	display: inline;
	margin-left: -2px;
}

#navi a {
	color: #D10E16;
	background: #FFFFFF;
	text-decoration: none;
	padding: 2px 12px 3px 12px;
}

#navi a:hover {
	color: #FFFFFF;
	background: #D10E16;
	text-decoration: none;
	padding: 2px 12px 3px 12px;
}

#sub {
	float: left;
	width: 140px;
	text-align: left;
	font: normal 10px Arial, Helvetica, sans-serif;
}

#sub ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sub .toptitle {
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	background: #D10E16;
	margin: 25px 0 2px 0;
	padding: 1px 1px 1px 3px;
}

#sub .title {
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	background: #D10E16;
	margin: 20px 0 2px 0;
	padding: 1px 1px 1px 3px;
}

#sub .link a {
	color: #000000;
	margin-left: 10px;
	text-decoration: none;
}

#sub .link a:hover {
	color: #D10E16;
	margin-left: 10px;
}

#sub .text {
	text-align: justify;
	margin: 0 5px 0 15px;
}

#sub .text a {
	color: #D10E16;
	text-decoration: underline;
}

#sub .text a:hover {
	text-decoration: none;
}	

#content {
	color: #000000;
	text-align: left;
	margin-left: 160px;
	padding: 25px 15px 5px 50px;
	font: normal 11px Arial, Helvetica, sans-serif;
	background: #FFFFFF; /*background: #FFFFFF url(images/logobg.gif) no-repeat fixed center; in #content*/
}

#content h1 {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: bold;
}

#content p {
	text-align: justify;
	padding-left: 15px;
}

#content a {
	color: #D10E16;
	text-decoration: underline;
}

#content a:hover {
	text-decoration: none;
}

#content ul {
	padding: 0;
	list-style: none;
	margin-left: 40px;
	line-height: 16px;
}

#content .rechts { 
	float: right;
	margin-left: 5px;
}

#content .links { 
	float: left;
	margin-right: 5px;
}

#content form {
	margin-left: 40px;
}

#content input {
	width: 300px;
	border: 1px solid #D10E16;
}

#content textarea {
	width: 300px;
	height: 100px;
	overflow: auto;
	border: 1px solid #D10E16;
}
	
#content .button {
	width: 150px;
	color: #FFFFFF;
	margin-right: -1px;
	background: #D10E16;
}		

#footer {
	clear: both;
	color: #FFFFFF;
	padding-top: 2px;
	background: #D10E16;
	font: normal 9px Arial, Helvetica, sans-serif;
}

#footer a {
	color: #FFFFFF;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
}