Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruno MEGA

[Resolvido] Posicionamento de divs.

Por , em Desenvolvimento frontend

Recommended Posts

Bruno MEGA    0

Bruno MEGA
Postado

Bom dia galera,

 

Sou novo no html e css e estou aprendendo na marra. Fim um layout no photo que ficou até bem legal, cortei e estou montando devagar. Primeiro vou montar o html e css bem simples e depois aprender a programação.

 

 

Bom, o header eu dividi em 4 partes. o fundo, o menu que está em imagem completa, seus topicos que vou adicionar para mudar quando passar o mouse e um segundo menu em texto com hover como segue na imagem.

 

html%2520deformado..jpg

 

site%2520proposta.jpg

 

Bom até agora foi oque consegui fazer com a imagem de cima. o menu 1 eu devo aplicar o efeito depois e o menu 2 já está em hover como eu quero.

 

Gostaria de aplicar em próximo passo o FOOTER.

Poderiam me ajudar? O mesmo não aparece.

 

Segue os codigos:

 

 

HYML:

<link href="style.css" rel="stylesheet" type="text/css">
</head>



<body>
   <div id="conteudo">
      <div id="header">

           <nav>
                <div id="menutotal"> <!--barra menu completo-->
               <nav>
                  <ul>
                   <li><a href="#">INICIO</a></li>
                   <li><a href="#">EVENTOS</a></li>
                   <li><a href="#">NEWS</a></li>
                   <li><a href="#">GALERIA</a></li>
                   <li><a href="#">CONTATO</a></li>
                  <ul>


               </nav>

                ></div>
             </nav>

               <nav class="menu2">
                <ul>
                   <li><a href="#">LOCAIS</a></li>
                   <li><a href="#">TRABALHOS / DESIGN</a></li>
                   <li><a href="#">PATROCINIOS</a></li>
                   <li><a href="#">TRANSMISÃO AO VIVO</a></li>
                   <li><a href="#">INSPIRAÇÕES</a></li>
                </ul>
             </nav>

    </div>
      <div id="footer">

     </div>


    </div>
</body>
</html>

 

CSS:

*{margin:0; padding:0; border:0;}


body {background:#333
}

#conteudo {background:url(Img/back.jpg);
           background-repeat:no-repeat;
		width:100%;
		height:1600px;
}

#header {background:url(Img/back-top.png);
         background-repeat:no-repeat;
	  width:100%;
	  height:1600px;
	  position:fixed;
	  top:20px;

}

#menutotal {background:url(Img/Menu-sem-link-.png);
            background-repeat:no-repeat;
		 width:100%;
		 height:1600px;
		 position:fixed;
		 top:300px;

}


.menu2 ul li { list-style: none; 
              display: inline;
		   padding: 0px 30px 0px 0px;
		   font:"Letter Gothic Std";
		   position:relative;
		   top: 377px;
		   left: 356px;
}


.menu2 li a { color: #fff;
		   top: 377px;
		   text-decoration: none;
}

.menu2 li a:hover {
      color: #000;
      text-decoration: none;
}

#clear{clear:both;}

#footer {
  background:url(Img/linha-baixo.png);
  background-repeat:repeat-x;
     position : absolute;
     bottom : 0;
     height : 390px;
     width : 1600px;
}

 

Obrigado pela atenção galera!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alisson Zampietro    6

Alisson Zampietro
Postado

E ae cara tranquilo...

Se é o que eu entendi

Tenta definir uma altura para a sua div footer, pois como você deixou ela em auto, ela só ira aparecer se você inserir conteúdo dentro dela, você definindo a altura irá aparecer...

 

Espero ter ajudado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno MEGA    0

Bruno MEGA
Postado

E ae cara tranquilo...

Se é o que eu entendi

Tenta definir uma altura para a sua div footer, pois como você deixou ela em auto, ela só ira aparecer se você inserir conteúdo dentro dela, você definindo a altura irá aparecer...

 

Espero ter ajudado

 

 

Bom amigo, eu já tinha tentando, mas ela não aparece.

 

Obrigado pela respostas

 

 

----------------

 

Conseguir fazer ele aparecer, só que ele fica atras do header...

 

#footer {
  clear:both;
  background:url(Img/linha-baixo.png);
  background-repeat:repeat-x;
  bottom: 0;
  top: 1616px;
     height: 390px;
     width: 1600px;
}

 

quero descer ele para a posição de 1616px relativo ao meu background.

 

Alguma ideia? vlw galera...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno MEGA    0

Bruno MEGA
Postado

Bom amigo, eu já tinha tentando, mas ela não aparece.

 

Obrigado pela respostas

 

 

----------------

 

Conseguir fazer ele aparecer, só que ele fica atras do header...

 

#footer {
  clear:both;
  background:url(Img/linha-baixo.png);
  background-repeat:repeat-x;
  bottom: 0;
  top: 1616px;
     height: 390px;
     width: 1600px;
}

 

quero descer ele para a posição de 1616px relativo ao meu background.

 

Alguma ideia? vlw galera...

 

 

galera, resolvi o problema acima, estou com um menu ROLLOVER e consegui posicionar corretamente. O problema é que não apenas em cima do menu mas abaixo e em volta quando posiciono o mouse ele ativa também... não apenas na imagem.

 

PODERIA AJUDAR? 

#inicio {
    background:url(../Img/menu/1-1inicio.png);
	list-style: none;
    background-repeat:no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:150px;
	opacity: 0;
	-webkit-transition: all 1s ease;


}

#inicio:hover {
    background:url(../Img/menu/hover/Menu-inicio.jpg);
       background-repeat:no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:150px;
	opacity: 1; 
	-webkit-transition:all 1s ease;

 

VLW

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno MEGA    0

Bruno MEGA
Postado

galera, resolvi o problema acima, estou com um menu ROLLOVER e consegui posicionar corretamente. O problema é que não apenas em cima do menu mas abaixo e em volta quando posiciono o mouse ele ativa também... não apenas na imagem.

 

PODERIA AJUDAR? 

#inicio {
    background:url(../Img/menu/1-1inicio.png);
	list-style: none;
    background-repeat:no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:150px;
	opacity: 0;
	-webkit-transition: all 1s ease;


}

#inicio:hover {
    background:url(../Img/menu/hover/Menu-inicio.jpg);
       background-repeat:no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:150px;
	opacity: 1; 
	-webkit-transition:all 1s ease;

 

VLW

 

 

Resolvido com a atribuição dos valores width e height. :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito