Postagens
Male
Seguinte, estou fazendo o site da minha banda. Ele tem uma div que tem uma imagem que será o carro-chefe do site, la esta o menu "fiz usando maps" e o conteúdo rolará por cima desta imagem POR UMA DIV INVISÍVEL. o problema é que nao consigo centralizar a div sobre a imagem(que está em outra div) e misteriosamente a figura duplicou... alguma luz?
Aqui esta o site: Site
Aqui esta meu index:
<html>
<head>
<link rel="stylesheet" href="CSS.css" type="text/css" media="screen"/>
<!-- <link rel="stylesheet" href="menu_style.css" type="text/css"/>-->
<script language="javascript" src="browser.js">
</script>
<script language="javascript" src="instrucao.js">
</script>
</head>
<body class="base">
<div id="corpo" align="center" usemap="#menuknights">
<div id="corpo2">
<p>
Testando ok! aijsiajsiajsiasjisjaisjaisjaisjaisjaisjsija
</p>
</div>
<div id="corpo">
<a href="#" onclick="AbrirPag('http://bandaknights.orgfree.com/index.html')" id="home" class="menu"></a>
<a href="http://www.google.com" id="bio" class="menu"></a>
<a href="http://www.fic.br" id="disc" class="menu"></a>
<a href="http://whiplash.net" id="fot" class="menu"></a>
<a href="http://www.ironmaiden.com" id="vid" class="menu"></a>
<a href="http://www.helloween.org" id="con" class="menu"></a>
</div>
</div>
<map name="#menuknights">
<area shape="rect" coords="150,0,275,180" href="http://bandaknights.orgfree.com" alt="Home" /><area shape="rect" coords="90,58,3" href="mercur.htm" alt="Mercury" /><area shape="rect" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
<div class="rodape">
Website desenvolvido por Rudak.<a href="http://twitter.com/rudak">twitter.com/rudak</a>
</div>
</body>
</html>
Aqui está meu CSS:
.base {
background: url(images/bg.gif);
}
.rodape{
text-align: center;
font-size: 10px;
color: #FFF;
}
/*Funcionamento do menu -- Inicio*/
#corpo{
background: url(images/molduramain.png) no-repeat center;
height: 684px;
width: 1023px;
margin: 0 auto;
/*
display: scroll;
position: relative;
*/
padding: 10px;
text-align: left;
}
#corpo a{
display:block;
position:absolute;
}
#corpo a.menu{
width:150px;
height:50px;
top:620px;
}
#corpo a#home{
left:170px;
width:100px;
}
#corpo a#bio{
left:285px;
width:100px;
}
#corpo a#disc{
left:410px;
width:150px;
}
#corpo a#fot{
left:548px;
}
#corpo a#vid{
left:642px;
}
#corpo a#con{
left:728px;
}
/*Funcionamento do menu -- Fim*/
#corpo2{
padding: 5px;
margin: 0 auto;
height: 460px;
width: 830px;
background-color: #fff;
}
.paragrafo{
text-align: left;
color: #fff;
font-size: 14px;
}
.cabecalho {
position: absolute;
margin-left: 0px;
margin-right: auto;
magin-top: 0px;
height: 25px;
width: 1024px;
text-align:"center"
}
.logo {
position: absolute;
margin-left: 15px;
magin-top: 60px;
text-align: "center";
}
.official {
position: absolute;
magin-top: 60px;
height:40%;
text-align: "right";
}
.conteudo2 {
position: relative;
background: url(/images/mold3.png) no-repeat;
left: -25%;
margin-top: 15%;
margin-left: 50%;
height: 722px;
width: 600px;
z-index: 1;
/*border-style: ridge;
border-width: thick;
border-color: red;
filter:opacity(alpha=60); /* para o IE */
/* -moz-opacity:0.6; para o FireFox */
/* opacity:0.6; para o outros Navegadores */
}
.conteudo p{
padding: 300px;
text-align: justify;
}
.conteudo_u{
position: relative;
background: #444;
left: -25%;
margin-top: 15%;
margin-left: 50%;
height: 722px;
width: 600px;
/*border-style: ridge;
border-width: thick;
border-color: red;*/
filter:opacity(alpha=60); /* para o IE */
-moz-opacity:0.6; /* para o FireFox */
opacity:0.6; /* para o outros Navegadores */
}
.posicao_main{
position: absolute;
vertical-align: middle;
left: 0%;
margin-left: 33%;
height: 60%;
top: 0%;
margin-top: 6%;
}
/*CSS Menu*/
/***********************************************/
.posicao_menu{
margin-top: 178px;
}
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
/*RED*/
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
/*RED*/
ul.menu.red{
background-color:#B11718;
}
ul.menu.red li a:hover, .menu.red li.current {
background-color:#DE3330;
}
