Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal, estou desenvolvendo um site para a empresa do meu pai, e estou com algumas dúvidas sobre como personalizar o menu.
Vou postar aqui o XHTML e o CSS para darem uma olhada. Comecei a desenvolvê-lo ontem por isso não tem quase nada. E a propósito, corrijam-me em qualquer coisa errada que fiz no código =D
A minha dúvida é a seguinte: Como criar um menu com aquela barrinha igual a do site de pesquisas da Google. Ex: estou em Pesquisar, e a barrinha fica sobre ela, mudo para Imagens, e a barrinha vai para imagens. Creio que seja com um Border-top, mas não sei como aplicar a somente um elemento do menu. E outra duvida é como usar o menu em todas as páginas do site.
Por exemplo, vou ter que copiar todo o código do menu e colar em outro documento HTML para que ele seja visualizado em outro página também? Ou eu crio um arquivo separado e o chamo em todas as páginas, assim não fica um código enorme.
Bom pessoal essas são minhas dúvidas por em quanto!
Agradecido desde já!
XHTML:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-5589-1" lang="Pt_BR" />
<link rel="stylesheet" type="text/css" href="css/estilo_principal.css" media="all" />
<title>Móveis Costa - Home</title>
</head>
<body>
<div id="topo">
<nav id="menu">
<ul>
<li><a href="#">Galeria de Imagens</a></li>|
<li><a href="#">Sobre Nós</a></li>|
<li><a href="#">Contato</a></li>
</ul>
</nav>
<div id="divisoria"><img src="img/topo/divisao_menu.png"></div>
</div>
<div id="conteudo">
</div>
<div id="rodape">
</div>
</body>
</html>CSS:
* {
/ zera todas as configurações padrão /
margin:0;
padding:0;
text-decoration:none;
font-family:"Trebuchet MS", "sans serif";
}a:link {
color:#0099ff;
}a:visited {
color:#990000;
}a:hover {
color:#0000cc;
}a:active {
color:#ff0000;
}html {
/ adapta o degradê no body /
height: 100%;
}body {
/ adapta o degradê no body /
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;#divisoria {
width:800px;
padding-top:10px;
margin:0 auto;
-webkit-transition: width .10s ease;
}em {
color:blue;
}h1, p {
text-align:center;
font-family:"Trebuchet MS", "sans-serif";
padding-top:10px;
}
#menu {
padding-top:50px;
text-align:center;
}#menu ul {
list-style:none;
}#menu ul li {
display: inline;
}#menu ul li a {
padding: 2px 15px;
display: inline-block;/ visual do link /
color:#0099ff;
text-decoration: none;
}Carregando comentários...