• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

.EXO

Problema com o menu

4 mensagens neste tópico

Bem... estou a treinar Html e css e estou a fazer uma pagina pessoal mas estou com um problema com os botões.

Eu meto os códigos mas os botões ficam todos com a mesma imagem, ou seja, tenho a Bio, os Works e os Contacts mas fica tudo com o botão da Bio.

Código Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>exo'09</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div id="header" class="largura"><img src="imagens/logo.gif" alt="Logotipo" /></div>
<div id="menu">
<div class="largura2">
     <ul>
         <li><a href="#" id="opt" class="select">BIO</a></li>
         <li><a href="#" id="opt">PORTFOLIO</a></li>
         <li><a href="#" id="opt">CONTACTO</a></li>
     </ul>
</div>
</div>
</body>
</html>

Código Css

body {
     background:#000000 url(imagens/fundo.gif) 0px 0px repeat;
     }
#header {
     height:150px;
     padding-top:12px;
     }
 .largura {
     margin:0 auto;
     width:567px;
     }
#menu {
     height:60px;
     padding:0;
     margin:0 0 0 0;
     width:100%;
     }
 .largura2 {
     margin:0 auto;
     width:600px;
     }
#menu ul {
     margin:0;
     padding:0;
     }
#menu li {
     list-style:none;
     height:60px;
     padding:0;
     margin:0px;
     float:left;
     }
#menu a {
     display:block;
     height:60px;
     overflow:hidden;
     text-indent:10000em;
     text-decoration:none;
     width:200px;
     margin:0px;
     padding:0;
     }
#menu a:hover {
     background-position: 0 -60px;
     }
#menu #opt {
     background-image: url('imagens/bio.gif');
     }
#menu .select {
     background-position: 0 -120px;
     }

Podem ajudar-me?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

não será por causa da forma como identificas cada uma das áreas no HTML ?!?!?!? têm todas o mesmo id "opt" !!!! penso que a solução passa por atribuires diferentes id's e depois no CSS cada um desses id's vai buscar a respectiva imagem!

espero ter ajudado!!

cumprimento

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já agora, visto que estás a treinar HTML e CSS, se quiseres usar um estilo comum entre vários elementos, usa uma class ( .estilo em vez de #estilo ) para os definires.

Os ID's devem servir para identificar um único elemento HTML (não é à toa que a função de javascript getElementById('identificador') só retorna um resultado).

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora