Seite mit 4 kachelnden Hintergrundbildern

DiDiJo

Erfahrenes Mitglied
Hey Leute.

ich hab ein Problem auf folgender Seite:
* LINK ENTFERNT *

Die Seite besitzte 4 Kachelnde Hintergrundbilder. 2 Im Header und 2 Im Footer. Wenn der Content die Browsergröße nicht überschreitet sieht alles super aus. Aber wie man im MOment sieht kriegt der Body nicht seine 100% Höhe und die Footer-Hintergründe stehen irgendwo im Raum und sieht nicht ganz unten auf der Seite.

Hier mal meine gro0be HTML-Strukeut mit CSS:
HTML:
<body>
<div id="top_left"></div>
<div id="top_right"></div>
<div id="bottom_left"></div>
<div id="bottom_right"></div>

<div id="out">
    <div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
</div>

</body>

CSS:
html,body {
height:100%;
min-height:100%;
}

body {
 background-color:#FFFFFF;
 font-family: Arial, Georgia, Helvetica, sans-serif;
 font-size:12px;
 font-weight:regular;
 line-height:19px;
 color:#2b6aa8;
 margin:0px;
 padding:0px; 
 position:relative;
}

#out {
width:960px;
min-height:100%;
position:absolute;
top:0;
left:50%;
margin-left:-480px;
}

#top_left, #top_right, #bottom_left, #bottom_right  {
	width:50%;
	height:50%;
	background-repeat:repeat-x;
	float:left;
	background-position:top;
}

#bottom_left, #bottom_right {
	height:57px;
	position:absolute;
	bottom:0;
	float:none;
}

#bottom_left {
	left:0;
}

#bottom_right{
	right:0;
}

#top_left {background-image:url(../pics/kachel_top_left.jpg);}
#top_right {background-image:url(../pics/kachel_top_right.jpg);}
#bottom_left {background-image:url(../pics/kachel_bottom_left.jpg);}
#bottom_right {background-image:url(../pics/kachel_bottom_right.jpg);}

Hat jemand von euch schomal mit ähnlichen Problemen gekäpmft und konnte Sie irgednwie lösen ?
 
Zuletzt bearbeitet:
Ansich ein super Tutorial *Lesezeichen gesetzt*,

aber mein Footer sitzt ständig ganz unten ... bloß diese bottom_left und bottom_right Elemente werdden nicht auf bottom: 0 gesetzt, da der Body nicht seine 100% Höhe bekommt. Oder sehe ich das ganz falsch ?!

mfg DiDi
 
ich hab jetzt nur die bottom_Blöcke in mein #out gesetzt ... die DIVs stehen jetzt natürlich ganz unten ... kacheln sich aber auch nichtmehr über 100% der Website sondern haben natürlich nur noch die 960px breite (die beiden bottom-DIVs zusammen)
 
Dann solltest du die Breite von #out auf 100% setzen, und den innenliegenden Blöcken, die nicht 100% breit sein sollen, die entsprechende Breite zuweisen.

mfg Maik
 
Zurück