Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou fazendo o rodapé do meu site e um link não está puxando os estilos corretos.
Ainda estou aprendendo CSS, por favor ignorem os excessos de código.
Somente com o HTML e CSS abaixo ele funciona certinho, mas quando eu puxo o arquivo CSS completo que tem todas os seletores do site, ele fica herdando informações de outras classes nada a ver com o rodapé.
Por exemplo:
Se você botar pra rodar o HTML e o CSS abaixo, você vai ver como estou querendo que fique, mas se botar pra puxar o CSS do código completo, ele fica todo errado.
Queria uma ajuda de vocês pra saber como resolver esse problema de herança errada.
Obrigado!
HTML:
<!-- INÍCIO RODAPÉ -->
<div id="rodape">
<div id="rodape_esquerdo">
<ul id="rodape_menu">
<li><a href="contato.php">fale conosco</a></li>
<li><a href="contato.php">trabalhe conosco</a></li>
<li><a href="contato.php">contrate-nos</a></li>
<li><a href="contato.php">abra sua franquia</a></li>
<li><a href="contato.php">anuncie no site</a></li>
</ul>
</div>
<div id="rodape_direito">© 2007-2010 AgitoFlash.com.br<br />
Não nos responsabilizamos por mudanças nas informações dos eventos.<br />Site hospedado por <a href="[http://www.uebihost.com.br"](http://www.uebihost.com.br) target="_blank">UebiHost</a>.</div>
</div>CSS DO RODAPÉ:
div#rodape {
float:left;
width: 950px;
height: auto;
background-color:#333;
color: #FFF;
font-size: 11px;
font-family:Verdana, Geneva, sans-serif;
}
div#rodape_esquerdo {
float:left;
width: 500px;
}
ul#rodape_menu {
padding:0 0 0 10px;
margin-top:10px;
text-align:left;
}
ul#rodape_menu li{
list-style: none;
padding: 0px 8px 0px 0;
border-right:1px #FFF solid;
display: inline;
vertical-align:middle;
}
ul#rodape_menu li a{
font-size:10px;
text-decoration: none;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
ul#rodape_menu li a:hover{
text-decoration: underline;
}
div#rodape_direito{
float:left;
width: 445px;
text-align: right;
color: #FFF;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
padding:0 5px 0 0;
}
div#rodape_direito a:link, a:visited{
font-size:10px;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
color:#F90;
font-weight:bold;
}
div#rodape_direito a:hover, a:active{
text-decoration:underline;
}
CSS COMPLETO:
Realmente o problema era as pseudo classes.
Eu removi elas dos outros seletores e resolveu o problema.
Mas você poderia me explicar o pq estava dando errado, já que eu estava usando especificidade?
Teoricamente isso deveria funcionar de forma correta, não?
div#rodape_direito a:link,a:visited{
...
}
Para estado inicial, defina só no a sem pseudoclasses. ;)
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Faça o estilo assim:
div#rodape_direito a{ / Escreva aqui os estilos / }
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif