Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
/applications/core/interface/imageproxy/imageproxy.php?img=https://lh6.googleusercontent.com/-ss-MTpSC9ls/UF9oo7Avz2I/AAAAAAAAAuE/MPv49uyb8zk/s875/html%252520deformado..jpg&key=0fd10050c525f2593c6afe99587d6e24c437d7b8a4e2aac859f165f89aa63bbf" alt="html%2520deformado..jpg" />
/applications/core/interface/imageproxy/imageproxy.php?img=https://lh4.googleusercontent.com/--aU_ibmdlGs/UF9oRxBFI_I/AAAAAAAAAtw/f76OlaUVMUk/s1072/site%252520proposta.jpg&key=8c87da01eedee40b661d2c4dd09f3091222826e2e95e02fb774a2d5889a30e19" alt="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!
Carregando comentários...