Witam,
Mam bardzo ważny(a zarazem dla mnie trudny niestety) problem z wypozycjonowaniem pewnego elementu na stronie.
Chodzi o to, jak zamainpulować stylami css i kodem żeby włożyć tło do pewnej strony.
Kod html jest taki:
<div id="main">
<div id="top_head"></div>
<div id="top_body">
<div id="content"></div>
<div id="top_tatoo"></div>
<div id="menu"></div>
</div>
<div id="bg_mask"></div>
<div id="foot"></div>
</div>
I CSS
/* main styles */
#main
{
height: 500px;
text-align: center;
margin: auto;
width: 1100px;
position: relative;
z-index: 1;
float: left;
}
#top_head
{
height: 33px;
height: 33px;
width: 1100;
background-image: url('imgs/top_head.png');
position: relative;
}
#top_body
{
height: 456px;
width: 1100;
background-image: url('imgs/top_body.png');
position: relative;
}
#content
{
float: left;
width: 500px;
height: 300px;
border: 1px solid red;
position: relative;
right: -200px;
}
#top_tatoo
{
width: 426;
height: 436px;
background-image: url('imgs/top_tatoo.png');
position: relative;
right: -80px;
bottom: 40px;
z-index: 2;
float: left;
}
#menu
{
width: 148px;
height: 526px;
background-image: url('imgs/menu_bg.png');
position: relative;
right: 170px;
top: -19px;
z-index: 3;
float: left;
}
#bg_mask
{
/*
??
*/
}
#foot
{
width: 1100px;
height: 434px;
background-image: url('imgs/foot.png');
position: relative;
}
Grafiki niestety pokazać nie mogę gdyż autor sobie tego nie życzy.
Pytanie brzmi: jakiego Css'a dać elementowi o id=bg_mask żeby znalazł się pod "menu", "top_tatoo" i "content" ?
Wcześniej próbowałem wszystko ustawiać pozycjonowaniem relatywnym ale tak jak na firefox'ie było wszystko ok to juz Ie6/Ie7 wszystko rozwalał :/
Ma ktoś pomysł? Chodzi o jakis styl który nie będzie kolidował z innymi elementami a będzie umożliwiał wstawienie tam tej maski.
PS: Nie chodzi o zwykły background bo element "top_body" będzie rozwijalny i jego tło musi być stałe, a ta maska będzie tylko w jednym miejscu i będzie niezmienna.