nicht angemeldet
durchgehendes Hintergrundbild bis zum Boden ?
Hallo,
mein Problem ist wie folgt:
Ich habe eine Seite mit verschachtelten Divs,
es gibt eine Hintergrundfarbe und auch ein HintergrundBild,
dass mittels repeat-y über einen Teil der Seite laufen soll.
ämlich erst ab ende des Headers
<body>
<div class=all>
<div class=header>
<div class=logo>
</div><!-- logo-->
</div><!-- header-->
<div class=container></div><!-- container-->
<div class=eins> ...</div><!-- eins -->
<div class=zwei> ...</div><!-- zwei -->
<div class=footer>...</div><!-- footer-->
<div class=navigation border="0">
<a class=amaincom href=""> </a>
<a class=maintec href=""></a>
<a class=mainpro href=""></a>
<a class=maindow href=""></a>
<a class=maincon href=""></a>
</div><!--navigation-->
</div><!-- all-->
</body>
------------- CSS ------------------------------------------
ich hab zwecks übersichtlichkeit nur die relevanten punkte hereingenommen (hoffe ich habe nichts vergessen)
* {
margin: 0;
padding: 0;
background: #000;
font: normal 16px 'Helvetica', 'Georgia', 'Times New Roman', 'serif';
font-size: 18px;
letter-spacing: 2px;
height: 100%;
}
body {
font: 95% ;
color: #F00;
height:100%;
background:transparent;
z-index:1;
}
h1,h2,h3,p {
background: transparent;
color: #F5F3F4;}
.all {
position: relative;
width: 1024px;
height:auto;
margin: 0 auto 0 auto; /* oben rechts unten links */
background: url(../img/striche.jpg) repeat-y;
z-index:2;
}
.header {
}
.logo {
height: 122px;
color: #fff;
background: url(../img/head.jpg) no-repeat;
z-index:4;
}
.container{
float:left;
margin-bottom: 0px;
height:520px;
width:180px;
background: url(../img/striche.jpg) repeat-y;
/*background-position: 0px 0px;*/
z-index:3;
}
.eins{
float:left;
height: 520px;
width:385px;
border-top:solid 2px;
border-left:solid 2px;
border-bottom:solid 2px;
border-color:#999999;
background-color:#660066;
z-index:5;
}
.zwei{
float:left;
width:385px;
height: 520px;
border:solid 2px;
border-color:#999999;
background: url(../img/intro.jpg) no-repeat;
z-index:5;
}
.footer{
clear:both;
text-align:right;
margin-right:80px;
margin-top:20px;
color:#999999;
z-index:5;
background: url(../img/striche.jpg) repeat-y;
}
.footer p,
.footer a{
text-decoration:none;
font-decoration: none;
font-style:normal;
color:#999999;
font-size: 15px;
font-weight: normal;
background: transparent;
}
.footer a:hover,
.footer a:active,
.footer a:focus{
text-decoration: underline;
font-size: 15px;
font-weight: normal;
color:#CCCCCC;
background: transparent;
}
-----------------
zur navi muss gesagt werden , dass sie absolut ist.
Wenn ich im .all das height:auto durch 100% ersetze habe ich ein problem, mir fällt der gesamte inhalt der seite weg.
woran liegt das ?
so wie ich es habe hört das hintergrundbild nach der fußzeile auf.
interessant ist auch der unterschied zwischen firefoy und ie 7 in bezug auf die fußzeile, im ie7 erkennt er das margin-top an und macht seinen abstand richtig, dem firefox hingegen ist das margin-top komplett egal.
Ich hoffe ihr könnt mir helfen, ich verzweifel hier schon seit stunden, hab schon die ganze seite auf absolute positionierung umgestellt (und wieder zurück) weil ich gehofft habe dass das ein wenig hilft, zumindest bei den abständen ist es einfacher dadurch , dass die über browsergrenzen einheitlich dargestellt werden.
mfg
Samuel
-
problem gelöst
hab nur darauf achten müssen, dass jedes div,
dass keine prozentuellen höhen hat eine fixe höhe hat, dann ging es.