Olá Sem.Ponto!
Pode desconsiderar o último post. Finalmente eu consegui ajustar tudo!
Criei uma classe para cada <a> e funcionou.
Mais uma vez , muito obrigada pela ajuda.
[codebox]/* CSS Document */
body
{
margin: 0;
padding: 0;
font: verdana, arial, san-serif;
text-align: center;
background: #FFF;
}
#geral
{
margin: 1em auto;
width:778px;
text-align: left;
background-color: #fff;
}
#topo
{
height: 180px;
}
#pequenas {
float: left;
width: 360px;
height: 180px;
}
#pequenas img {
float: left;
width: 60px;
height: 60px;
}
a.img1 {
float: left;
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
background: url(imagens/topo/top1.jpg)
}
a.img1:hover {
background-position: 0 60px;
}
a.img2 {
float: left;
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
background: url(imagens/topo/top2.jpg);
}
a.img2:hover {
background-position: 0 60px;
}
a.img3 {
float: left;
display: block;
width: 60px;
background-repeat: no-repeat;
padding-top: 60px;
overflow: hidden;
height: 0;
background: url(imagens/topo/top3.jpg);
}
a.img3:hover {
background-position: 0 60px;
}[/codebox]