Posicionar Menu na frente de um Slider

apache22 · Agosto 21, 2011

Boa noite Pessoal,

Comecei a desenvolver em HTml5 a pouco tempo e estou tentando criar um site para um cliente.

Criei um site institucional, onde possui MenuDropDown horizontal e em baixo um slide com fotos e descrição das mesmas.

Só que quando se passa o mouse no item do menu que desce, ao inves de eparecer na frente do slide, ele aparece atrás.

Já tentei colocar z-index em tudo quanto foi canto, sem êxito.

O codigo é o seguinte:

HTML

<header>
   <div class="logo">
     <h1><a href="">INEDIT<i>T</i>A</a></h1>
     <span class="description">Consultoria Sindical e Trabalhista</span> </div>
   <a href="#" class="rss">RSS Submit</a>
   <nav>
     <ul>
       <li><a href="index.php" <?php if($paginaCorrente == 'index.php') {echo 'class="current"';} ?>>Principal</a></li>
       <li><a href="quemsomos.php" <?php if($paginaCorrente == 'quemsomos.php') {echo 'class="current"';} ?>>Quem Somos</a></li>
       <li><a href="servicos.php" <?php if($paginaCorrente == 'servicos.php') {echo 'class="current"';} ?>>Serviços</a>
    		<ul>
		    <li><a href="index.php">Assinatura</a></li>
				<li><a href="index.php">Auditoria</a></li>
               <li><a href="index.php">Consultoria</a></li>
               <li><a href="index.php">Terceirização</a></li>
               <li><a href="index.php">Treinamento</a></li>
            </ul>
       </li>

       <li><a href="parceiros.php" <?php if($paginaCorrente == 'parceiros.php') {echo 'class="current"';} ?>>Parceiros</a></li>
       <li><a href="clientes.php" <?php if($paginaCorrente == 'clientes.php') {echo 'class="current"';} ?>>Clientes</a></li>
       <li><a href="faleconosco.php" <?php if($paginaCorrente == 'faleconosco.php') {echo 'class="current"';} ?>>Fale Conosco</a></li>
     </ul>
   </nav>

 </header>


<section id="main-banner">
   <div class="intro" >

       <div class="redes_sociais"><a href="LINKFACEBOOK" target="_blank"><img src="images/facebook.png" height="35" width="35"></a><a href="LINKHI5" target="_blank"><img src="images/flickr.png" height="35" width="35"></a><a href="LINKTWITTER" target="_blank"><img src="images/twitter.png" height="35" width="35"></a><a href="LINKYOUTUBE" target="_blank"><img src="images/youtube.png" height="35" width="35"></a><a href="LINKYOUTUBE" target="_blank"><img src="images/orkut.png" height="35" width="35"></a></div>
       <div class="container_12">
       <div class="wrapper">
       	<aside class="grid_4">
           <div class="box">
           	<h2>Área do Assinante</h2>

             <form action="" id="login-form">
             	<fieldset><label for="login: " class="fleft">Login :</label> <input type="text" class="fright" name="login" id="login"></fieldset>
               <fieldset><label for="senha: " class="fleft">Senha :</label> <input type="text" class="fright" name="senha" id="senha"></fieldset>
               <br/>
               Esqueci minha senha<input type="submit" class="fright" value="OK">
             </form>
           </div>
          </aside>
        </div> 
</div>        

   </div>
   <div class="anythingSlider">
     <div class="wrapper">
       <ul>
         <li><img src="images/slide1.png" alt=""></li>
         <li><img src="images/slide2.png" alt=""></li>
         <li><img src="images/slide3.png" alt=""></li>
         <li><img src="images/slide4.png" alt=""></li>
         <li><img src="images/slide5.png" alt=""></li>
       </ul>
     </div>
   </div>
 </section>

CSS:


#main {
margin: 0 auto;
position: relative;
width: 961px;
font-size:.75em;
}

/* Header */
header{
	height:162px;
	overflow:hidden;
	position:relative;

	}

/* Content */
section#content {
	background:url(../images/content-tail.gif) 0 0 repeat-x #fff;
	padding:15px 0 44px 0;
	position:relative;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	behavior:url(js/PIE.htc);

	}

/* Sidebar */
aside.top{
	background:url(../images/aside-bg.gif) 0 0 repeat-x #b9b9b9;
	padding:0 20px 0 20px;
	font:12px/18px Arial, Helvetica, sans-serif;
	color:#484848;
	position:relative;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	behavior:url(js/PIE.htc);
	margin-bottom:1px;
	}
	aside.top .inner {
		padding:11px 15px 37px 0;
		}
	.divider {
		background:url(../images/divider.gif) 100% 0 no-repeat;
		}

	aside.left {
		float:left;
		}



header nav {
position:relative;
left:0;
/*top:118px;*/
top:80px;

}
header nav li {
	float:left;
	}
	header nav li a {
		float:left;
		width:161px;
		height:44px;
		line-height:44px;
		text-align:center;
		background:url(../images/nav-bg.png) no-repeat 0 0;
		color:#fff;
		text-shadow:1px 1px 0 #11182c;
		font-size:15px;
		font-weight:bold;
		text-decoration:none;
		margin-right:-1px;
		}

		header nav li ul li {
		clear:both;
		}

		header nav li ul a {
		position:relative;
		float:left;
		width:161px;
		height:30px;
		line-height:30px;
		text-align:center;
		background:url(../images/nav-bg.png) no-repeat 0 0;
		color:#fff;
		text-shadow:1px 1px 0 #11182c;
		font-size:15px;
		text-decoration:none;
		margin-right:-1px;
		display:none;
		z-index:10;
		}


	header nav li a:hover,
	header nav li a.current {
		background:url(../images/nav-bg-act.png) no-repeat 0 0;
		text-shadow:1px 1px 0 #f1b955;
		color:#27324d;

		}

	header nav li ul a:hover,
	header nav li ul a.current {
		background:url(../images/nav-bg-act.png) no-repeat 0 0;
		text-shadow:1px 1px 0 #f1b955;
		color:#27324d;
		}	

	header nav li .current {	
		cursor:default;
	}

	header nav li:hover ul a	{
		display:block;

	}	

/* Main Banner
---------------------------------------- */
#main-banner {
position:relative;
height:303px;
margin-bottom:1px;
width:961px;
overflow:hidden;

}

/* Intro */
.intro {
/*background:url(../images/intro.jpg) no-repeat 0 0;*/
background:url(../images/login_bg.jpg) repeat-x 0 0 #FFFFFF;
width:321px;
height:303px;
position:absolute;
left:0;
top:0;
color:#000066;
/*text-shadow:3px 3px 0 #ffffff;*/
}

.intro .efeito1 { 
position:absolute; 
left: 2px;
top: -2px;
color:#fff; 
padding:105px 30px 0 30px;
}	

.intro strong {
	display:block;
	font-size:33px;
	line-height:1em;
	font-style:italic;
	font-weight:normal;
	text-transform:uppercase;
	}
.intro span {
	display:block;
	font-size:27px;
	line-height:1em;
	font-style:italic;
	text-transform:uppercase;
	float:right;
	padding-top:3px;
	}
.intro .inner {
	padding:105px 30px 0 30px;
	}




/* Anythin Slider */
.anythingSlider                         { width: 640px; height: 303px; position: relative; float:right;z-index:1}
.anythingSlider .wrapper                { width: 640px; overflow: auto; height: 303px; position: absolute; top: 0; left: 0; }
.anythingSlider .wrapper ul             { width: 9999px; list-style: none; position: absolute; top: 0; left: 0; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }

#thumbNav                               { position: relative; top: 264px; text-align: center; background:url(../images/anything-nav-bg.png) no-repeat 0 0; padding:8px 7px 8px 0; text-align:right; margin-left:2px;}
#thumbNav a                             { 
font: 13px/18px Arial, Helvetica, sans-serif;
display: inline-block;
text-decoration: none;
padding: 0 7px;
height: 18px;
margin: 0 4px 0 0;
background-image: url(../images/cell-tail.gif);
background-repeat: repeat-x;
border:1px solid #000;
text-align: center;
outline: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow:1px 1px 0 #f1f1f1;
color:#000;
}
#thumbNav a:hover                       { background: #eee; }
#thumbNav a.cur                         { background: #e0a213; }

#start-stop                             {
position:absolute;
left:7px;
bottom:11px;
font: 13px/18px Arial, Helvetica, sans-serif;
display: inline-block;
text-decoration: none;
width:44px;
padding: 0 7px;
height: 18px;
margin: 0 4px 0 0;
background-image: url(../images/cell-tail.gif);
background-repeat: repeat-x;
border:1px solid #000;
text-align: center;
outline: 0;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-shadow:1px 1px 0 #f1f1f1;
color:#000;
}

Surgiram algumas dúvidas: Será que o z-index funciona no html5?

Se alguém puder ajudar ficarei muito agradecido?

crf_h0m3r · Agosto 21, 2011

O z-index só funciona com elementos que tem posições definidas, position:absolute, position:relative, ou position:fixed.

apache22 · Agosto 21, 2011

Obrigado pela ajuda amigo,

Só que ja tentei colocar o position relative no <nav> até mesmo no <Section> e não aconteceu nada.

o engraçado é que tudo que coloco fica atrás do slide

_Leandro_ · Agosto 24, 2011

Lembre que o slider também precisa ter um z-index definido e com um valor menor do que o do seu menu.

Att

Leandro

http://www.maisumpixel.com.br

apache22 · Agosto 25, 2011

Valeu Leandro pela ajuda

não tinha pensado nisso, vou testar e comento aqui

att

apache22 · Agosto 28, 2011

Pessoal, boa noite

Infelizmente não consegui fazer o <nav> ficar na frente do <Section>

coloquei z-index=0 no <section> e z-index 9 no <nav> e nada aconteceu;

o engraçado é que coloco uma div solta, bem simples

 <div style="position:absolute;background-color:#0033CC;height:100px;width:100px;top:130px;left:228px;z-index:229">sdsss</div>

dentro da tag <section> e ela aparece na frente, mas se colocar na tag <nav> que fica dentro do <header> aparece atras

será que tem alguma coisa a ver com o posicionamento? ou hierarquia das tags do Html5?

_Leandro_ · Agosto 30, 2011

Cara, só pra desencargo de consciência, força um display:block; na tua section, pode resolver.

Att

Leandro

http://www.maisumpixel.com.br

Entrar

Arquivado

Posicionar Menu na frente de um Slider

Recommended Posts

apache22 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

crf_h0m3r 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

apache22 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

_Leandro_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

apache22 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

apache22 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

_Leandro_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante