Bom Dia Pessoal!
Tenho as div's abaixo:
Código (HTML):
1) Preciso colocar uma div sobre a outra
a) div sombra e cima da div formBox; div formBox em cima da div banner; div formTopo em cima da div form; Como formTopo e form estão dentro da div formBox, creio que quando fizermos div formBox em cima da divBanner, ficarão no seu devido lugar.
Estou fazendo assim (com z-index) mas não esta funcionando.
Código (CSS):
Tenho as div's abaixo:
Código (HTML):
<div id="cabecalho">
<div id="formBox">
<div id="formTopo"><img src="img/cota.png" width="250" height="143" /></div>
<div id="form"><?php include("form.php"); ?></div>
</div>
<div id="banner"><?php include("banner.php");?></div>
<div id="sombra"><img src="img/sombra.png" /></div>
</div>
E estou com dois problemas para resolver:<div id="formBox">
<div id="formTopo"><img src="img/cota.png" width="250" height="143" /></div>
<div id="form"><?php include("form.php"); ?></div>
</div>
<div id="banner"><?php include("banner.php");?></div>
<div id="sombra"><img src="img/sombra.png" /></div>
</div>
1) Preciso colocar uma div sobre a outra
a) div sombra e cima da div formBox; div formBox em cima da div banner; div formTopo em cima da div form; Como formTopo e form estão dentro da div formBox, creio que quando fizermos div formBox em cima da divBanner, ficarão no seu devido lugar.
Estou fazendo assim (com z-index) mas não esta funcionando.
Código (CSS):
#cabecalho
{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px; top:120px;
height:463;
}
#formBox
{
text-align:center;
float:left;
width:250px;
height:463px;
z-index: 1;
}
#formTopo
{
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: 0px solid #95A9B3;
top:0;
z-index: 1;
}
#form
{
width:240px;
background-color:#424242;
height:320px;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
border: 0px solid #95A9B3;
z-index: 2;
}
#banner
{
position:absolute;
float:right;
width:750px;
margin-left:235px;
height:463px;
z-index: 2;
}
#sombra
{
float:right;
top:400px;
width:1000px;
z-index: 3;
}
{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px; top:120px;
height:463;
}
#formBox
{
text-align:center;
float:left;
width:250px;
height:463px;
z-index: 1;
}
#formTopo
{
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
border: 0px solid #95A9B3;
top:0;
z-index: 1;
}
#form
{
width:240px;
background-color:#424242;
height:320px;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
border: 0px solid #95A9B3;
z-index: 2;
}
#banner
{
position:absolute;
float:right;
width:750px;
margin-left:235px;
height:463px;
z-index: 2;
}
#sombra
{
float:right;
top:400px;
width:1000px;
z-index: 3;
}