Otóż postanowiłem stworzyć szablon na divach. Główny zarys wygląda tak :
Zawartość <body>...</body> :
Kod
<div id="SITE">
<div id="TOP"></div>
<div id="BODY">
<div id="TOPMENU"></div>
<div id="TOPSPACE"></div>
<div id="LEFTMENU"></div>
<div id="SPACE"></div>
<div id="TRESC"></div>
<div id="SPACE"></div>
<div id="RIGHTMENU"></div>
</div>
<div id="BOTTOM"></div>
</div>
<div id="TOP"></div>
<div id="BODY">
<div id="TOPMENU"></div>
<div id="TOPSPACE"></div>
<div id="LEFTMENU"></div>
<div id="SPACE"></div>
<div id="TRESC"></div>
<div id="SPACE"></div>
<div id="RIGHTMENU"></div>
</div>
<div id="BOTTOM"></div>
</div>
Oraz kod css :
Kod
html, body {
background-color: green;
background-image: url("img/bg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
color: #FFFFFF;
margin: 0;
padding: 0;
}
#SITE {
width: 1000px;
position: relative; top: 30px;
margin: 0 auto;
}
#TOP {
background-image: url("img/top.png");
background-repeat: no-repeat;
height: 200px
}
#BODY {
background-image: url("img/body.png");
background-repeat: repeat-y;
}
#TOPMENU {
height: 120px;
margin: 0;
padding: 0;
}
#TOPSPACE {
height: 30px
}
#LEFTMENU {
width: 230px;
float: left;
overflow: hidden;
}
#SPACE {
width: 20px;
float: left;
overflow: hidden;
}
#TRESC {
width: 570px;
float: left;
overflow: hidden;
}
#RIGHTMENU {
width: 160px;
float: right;
overflow: hidden;
}
#BOTTOM {
clear: both;
height: 50px;
background-image: url("img/footer.png");
background-repeat: no-repeat;
}
background-color: green;
background-image: url("img/bg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
color: #FFFFFF;
margin: 0;
padding: 0;
}
#SITE {
width: 1000px;
position: relative; top: 30px;
margin: 0 auto;
}
#TOP {
background-image: url("img/top.png");
background-repeat: no-repeat;
height: 200px
}
#BODY {
background-image: url("img/body.png");
background-repeat: repeat-y;
}
#TOPMENU {
height: 120px;
margin: 0;
padding: 0;
}
#TOPSPACE {
height: 30px
}
#LEFTMENU {
width: 230px;
float: left;
overflow: hidden;
}
#SPACE {
width: 20px;
float: left;
overflow: hidden;
}
#TRESC {
width: 570px;
float: left;
overflow: hidden;
}
#RIGHTMENU {
width: 160px;
float: right;
overflow: hidden;
}
#BOTTOM {
clear: both;
height: 50px;
background-image: url("img/footer.png");
background-repeat: no-repeat;
}
Problem polega na tym że pod lewym, prawym menu oraz treścią nie pojawia się tło (żółty kolor na dołączonym obrazku). Prosiłbym o pomoc. Z góry dziękuje.
