Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou com um problema e acho que é simples html, se alguem puder me ajudar eu agradeço! É o seguinte: Eu tenho um slider que vem após um menu, quando eu carrego alguma div (slide) nesse slider essa div está ficando sobre o menu, mas não fica visivel, a div fica na posição correta, eu vejo o menu perfeitamente, mas não posso clicar nos links, como se alguma coisa invisivel estivesse encima do menu...
Ja tentei aplicar "z-index: 999" no menu, mas não resolveu. Não é conflito com o slider (jquery) porque ja tentei deixa-lo carregado com os controles exibindo mas sem carregar as divs, e assim funciona, o problema é são mesmo as div´s...
O problema pode ser visto no meu site de testes: http://www.imak.com.br
Abaixo tem os códigos css e html:
index.php aqui estão as divs dos slides
<?php
$pagina_titulo = "Agência Multimidia";
$pagina_atual = "inicial";
include_once('./includes/header.php');
?>
<div id="slider">
<div class="slide1">
<div class="slide1-conteudo">
aduhwahudwuhdwa
</div>
</div>
<div class="slide2">
<div class="slide2-conteudo">
aduhwahudwuhdwa
</div>
</div>
</div>
</body>
</html>header.php aqui esta o javascript do slider e o menu que eu mencionei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Boost Creative: <?php echo $pagina_titulo; ?></title>
<script type="text/javascript" src="http://use.typekit.com/hug0usj.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/fade.js"></script>
<script type="text/javascript" src="/js/jquery.bxSlider.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { });
});
</script>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
</head>
<body>
<span class="linha-topo"></span>
<div id="header">
<div id="header-topo">
<div id="logotipo">
<a href="#"><img src="/imagens/logotipo.png" alt="Boost Creative: Agencia Multimidia"/></a>
</div>
<span class="contato"></span>
</div>
<ul id="menu">
<li><a <?php if($pagina_atual == "inicial") { ?> class="ativo" <?php } else { ?> class="fade" <?php } ?> href="index.php"><small>PÁGINA</small><br/>INICIAL</a></li>
<li><a <?php if($pagina_atual == "portfolio") { ?> class="ativo" <?php } else { ?> class="fade" <?php } ?> href="portfolio.php"><small>NOSSO</small><br/>PORTFÓLIO</a></li>
<li><a <?php if($pagina_atual == "servicos") { ?> class="ativo" <?php } else { ?> class="fade" <?php } ?> href="servicos.php"><small>NOSSOS</small><br/>SERVIÇOS</a></li>
<li><a <?php if($pagina_atual == "blog") { ?> class="ativo" <?php } else { ?> class="fade" <?php } ?> href="blog.php"><small>NOSSO</small><br/>BLOG</a></li>
<li><a <?php if($pagina_atual == "contato") { ?> class="ativo" <?php } else { ?> class="fade" <?php } ?> href="contato.php"><small>ENTRE EM</small><br/>CONTATO</a></li>
</ul>
</div>estilo.css aqui o css
html{
background: #f5f5f5 url(/imagens/fundo-noisy.png);
}a{
color: #333;
font-weight: 500;
}
.linha-topo{
height: 3px;
width: 100%;
background: #ff5a00;
display: block;
}
#header{
width: 960px;
position: relative;
margin: 0 auto;
}
#header-topo{
background: url(/imagens/logo-bg.png) top center no-repeat;
height: 115px;
}
#logotipo{
float: left;
width: 282px;
padding-left: 30px;
padding-top: 30px;
}
.contato{
float: right;
display: block;
width: 445px;
height: 38px;
background: url(/imagens/contato.png) center right no-repeat;
margin-top: 38px;
margin-right: 0;
}
#menu{
z-index: 999;
display: inline;
float: left;
width: 960px;
height: 80px;
background: url(/imagens/menu-bg.png) top center no-repeat;
padding-top: 25px;
margin-bottom: 25px;
}#menu li{
white-space: no-wrap;
float: left;
margin-right: 45px;
padding-left: 45px;
padding-top: 10px;
padding-bottom: 10px;
border-left: 1px solid #DDD;
color: #999;
}#menu li:first-child{
border-left: none;
}#menu li a{
text-decoration: none;
font-family: museo-sans, arial, helvetica, sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 18px;
letter-spacing: -1px;
}#menu li a small{
font-size: 18px;
}
.ativo{
color: #333;
}/ === Início - CSS Index.php === /
#slider{
width: 100%;
height: 350px;
position: relative;
}
.slide1{
width: 100%;
background: #ff5a00;
}
.slide1-conteudo{
width: 960px;
height: 350px;
margin: 0 auto;
background: url(/imagens/slide1-bg.png) center center no-repeat;
}
.slide2{
width: 100%;
background: #333;
}
.slide2-conteudo{
width: 960px;
height: 350px;
margin: 0 auto;
background: url(/imagens/slide1-bg.png) center center no-repeat;
}Atualizado:
Não acredito que vou dizer isso mas, se vocês abrirem no Internet Explorer o site que eu postei, está funcionando como deveria.
No Chrome e FF o site apresenta problemas, no Chrome o erro é mais sutil, no Firefox aparece tudo desconfigurado.
Não tenho ideia do que possa ser, alguém pode me ajudar? Valeu mesmo!
Carregando comentários...