Felipe.v

Boa noite amigos!! beleza? espero que bem..

gente, estou tentando fazer um menu, utilizando uma imagem unica com a parte de cima A e a de baixo Ahover
usando a tecnica de rollover e os posicionamentos la..

mas nao esta dando certo,.. voces poderiam me ajudar??

primeiro erro : aparece uma bola na frente...
segundo erro: no firefox ainda sai o texto...
terceiro erro: eu vejo que no fundo a imagem faz rollover mas nao aparece na frente na primeira...
quarto erro: nao esta pegando a altura da imagem por completo, que no caso é 39px


Segue abaixo o código...

[codebox]<style type="text/css">

body
{
background: #000;
color: #CCCCCC;
font-size: 12px;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

#pagina
{
width: 682px;
height: 100%;
text-align:left;
margin:0 auto 0 auto; /*centraliza o conteudo*/
}


#topo
{
width: 682px;
height: 360px;
background:url('img/topo.png') no-repeat top center;
}

#menu
{
position: relative;
width: 682px;
height: 39px;
background: url('img/menuzao.gif') no-repeat 0 0;
}

#menu ul
{
list-syle: none;
text-indent: -9999em;
}

#menu li
{
position: absolute;
top: 0;
height: 39px;
}

#menu li a
{
display: block;
text-decoration: none;
width: 100%;
heigth: 100%;
top: 0;
}

#menu li a span
{
display: block;
position: absolute;
width: 100%;
heigth: 100%;
top: 0;
cursor: pointer;
}

#menu ul li a:hover
{
z-index:1000;
}

#historia { width: 118px; left: 0px; }
#historia a:hover { background: url('img/menuzao.gif') no-repeat 0 -39px; }
#historia a:span { background: url('img/menuzao.gif') no-repeat 0 0; }

#discografia { width: 132px; left: 118px; }
#discografia a:hover { background: url('img/menuzao.gif') no-repeat -118px -39px; }
#discografia a:span { background: url('img/menuzao.gif') no-repeat -118px 0; }

#fotos { width: 89px; left: 250px; }
#fotos a:hover { background: url('img/menuzao.gif') no-repeat -250px -39px; }
#fotos a:span { background: url('img/menuzao.gif') no-repeat -250px 0; }

#videos{ width: 94px; left: 339px; }
#videos a:hover { background: url('img/menuzao.gif') no-repeat -339px -39px; }
#videos a:span { background: url('img/menuzao.gif') no-repeat -339px 0; }

#wallpapers{ width: 130px; left: 433px; }
#wallpapers a:hover { background: url('img/menuzao.gif') no-repeat -433px -39px; }
#wallpapers a:span { background: url('img/menuzao.gif') no-repeat -433px -0; }

#contato { width: 119px; left: 563px; }
#contato a:hover { background: url('img/menuzao.gif') no-repeat -563px -39px; }
#contato a:span { background: url('img/menuzao.gif') no-repeat -563px 0; }


#conteudo
{
width: 682px;
height: 220px;
background:url('img/conteudo.png') no-repeat;
}


</style>[/codebox]




ESSE É O HTML....


[codebox] <div id="menu">
<ul>
<li id="historia"><a href="#"><span></span>Historia</a></li>
<li id="discografia"><a href="#"><span></span>Discografia</a></li>
<li id="fotos"><a href="#"><span></span>Fotos</a></li>
<li id="videos"><a href="#"><span></span>Vídeos</a></li>
<li id="wallpapers"><a href="#"><span></span>Wallpapers</a></li>
<li id="contato"><a href="#"><span></span>Contato</a></li>
</ul>
</div>


<div id="conteudo">
</div>[/codebox]



Desculpe se o codigo esta poluido,.. mas é que ainda estou em faze de aprendizado..

a proposito amigos a imagem que estou usando esta em anexo!!!

Peço encarecidamente se alguem pode me ajudar...

PS,.. li varios tutoriais.. e nada =\

Atenciosamente Felipe


ninguem amigos?
=\

Bom dia amigos!!

vi em vários artigos, apostilas e tutoriais usos do absolute e relative..

e estive discutindo com um amigo seus pontos...

e uma pequena duvida surgiu no assunto, gostaria que me respondessem..


É certo eu desenvolver um site inteiroo utilizando position absolute???
todas as divs com posicionamento absoluto para que nada saia dos conformes???

[o site é estatico e nao tem nada de estraordinário]


bom aguardo..

grande abraço
Felipe.

Bom dia Pessoal!

Sou novo no forum, e de inicio gostaria de disponibilizar a todos que querem aprender CSS um link

com excelentes explicações, onde com certeza ira influenciar muito em seus conhecimentos.

Grande Abraço.


Tutorial CSS



Espero que gostem.