Menu
see this link...: Exemple
on this site i have this code
<body>
<div id="geral">
<div id="animacao">
<ul id="banners">
<li><img src="banners/banner_1.jpg" alt="Banner 1" /></li>
<li><img src="banners/banner_2.jpg" alt="Banner 2" /></li>
</ul>
</div>
<div id="menu">
</div>
</div>
</body>
#geral is positioned in the center of the screen -
#animacao has the same size of #geral, on this has animated images with fade effects..
#menu has 271px with and need to stay over and on center of #geral and #animacao, on this i will put the menu with PNG bakcground....
This is my CSS, and probably doesn't work ...
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background: url(../imagens/fundo.jpg) no-repeat;
}
#animacao{
position: relative;
width:990px;
height:530px;
}
#menu
{
position: absolute;
left: 50%;
width:271px;
height:530px;
margin-left:-135px;
background-color:yellow;
z-index: 10;
}
Where am I wrong?
Demo
627
Is this what you're trying to do? http://jsfiddle.net/brettdewoody/C4jSS/
Or did you want the #menu div positioned on top of #animacao?
html
<div id="geral">
<div id="animacao">
<div id="menu">
<div>
</div>
</div>
css
#geral{
position: absolute;
width:990px;
height:530px;
top:50%;
left:50%;
margin-top:-265px;
margin-left:-495px;
background-color: black;
}
#animacao{
position: relative;
width:990px;
height:530px;
background-color: red;
}
#menu{
position: relative;
margin:0 auto;
width:271px;
height:530px;
background-color:yellow;
z-index: 10;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
