27 replies to this topic

[MaxPresi]

fala ae galera....
to precisando de um menu feito só por imagens...e nao pod ser em flash, já q o "hospedeiro" que eu uso não aceita.
eu queria usar só imagens...substituindo textos e backgrounds. Qria que fosse uma imgaem para off (normal) uma hover (mouse em cima) e outra on (quando clicar)...

no aguardo!!!

vlw!!!!!!!!!!!!!

[André Manoel]

Comece a fazer... quando surgir dúvidas vamos tirar ...

[MaxPresi]

hã? O.o

se eu soubesse como fazer eu teria começado e nao teria perguntado como fazer...só teria postado as duvidas O.o...

eu qru saber como faz....desdo css ateh o html....

vlw

[Édipo Costa Rebouças]

http://forum.wmonlin...costa-reboucas/

[MaxPresi]

veio...se eu te falar que eu nao entendi nada..vc vai me bater??? xD
creio q o q eu deveria usar é o 4º item certo??? então...onde eu coloco as imagens para cada item???

malz pela minha ignorância vei!!!

vlw!

[Édipo Costa Rebouças]

é o 4º metodo + o 1º método.

[MaxPresi]

vlw tiu....saquei a bagaça!!!!!!!
vo começa a fazer depois eu posto os resultados!

fala ae....tipo...eu axei outro modelo lah e tal...soh q nao consigo faze ele funcionar...

CSS:

#navigation{
height:50px; /*altura do menu*/
width: 600px; /*área total ocupada pelo menu*/
margin:0px auto; /*margin que centraliza o menu na tela*/
}

#navigation ul{
width: 400px; /*largura da área ocupada pelos ícones*/
margin: 0px auto 0; /*centralizando os ícones*/
padding: 0 0 0;
}

#navigation li{
float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
margin-top:4px; /*margens dos ícones*/
list-style-type:none;
}
a#m1, a#m1:link, a#m1:visited {
background: url(http://maxpresi.ucoz.com/home.gif) no-repeat left top;
display: block;
}
a#m1:active {
background: url(http://maxpresi.ucoz.com/home-o.gif) no-repeat left top;
display: block;
}
a#m1:hover {
background: url(http://maxpresi.ucoz.com/home-h.gif) no-repeat left top;
display: block;
}

a#m2, a#m2:link, a#m2:visited {
background: url(http://maxpresi.ucoz.com/fatos.gif) no-repeat left top;
display: block;
}
a#m2:active {
background: url(http://maxpresi.ucoz.com/fatos-o.gif) no-repeat left top;
display: block;
}
a#m2:hover {
background: url(http://maxpresi.ucoz.com/fatos-h.gif) no-repeat left top;
display: block;
}

a#m3, a#m3:link, a#m3:visited {
background: url(http://maxpresi.ucoz.com/programas.gif) no-repeat left top;
display: block;
}
a#m3:active {
background: url(http://maxpresi.ucoz...programas-o.gif) no-repeat left top;
display: block;
}
a#m3:hover {
background: url(http://maxpresi.ucoz...programas-h.gif) no-repeat left top;
display: block;
}

a#m4, a#m4:link, a#m4:visited {
background: url(http://maxpresi.ucoz.com/portable.gif) no-repeat left top;
display: block;
}
a#m4:active {
background: url(http://maxpresi.ucoz.../portable-o.gif) no-repeat left top;
display: block;
}
a#m4:hover {
background: url(http://maxpresi.ucoz.../portable-h.gif) no-repeat left top;
display: block;
}

a#m5, a#m5:link, a#m5:visited {
background: url(http://maxpresi.ucoz.com/fotos.gif) no-repeat left top;
display: block;
}
a#m5:active {
background: url(http://maxpresi.ucoz.com/fotos-o.gif) no-repeat left top;
display: block;
}
a#m5:hover {
background: url(http://maxpresi.ucoz.com/fotos-h.gif) no-repeat left top;
display: block;
}

a#m6, a#m6:link, a#m6:visited {
background: url(http://maxpresi.ucoz.com/videos.gif) no-repeat left top;
display: block;
}
a#m6:active {
background: url(http://maxpresi.ucoz.com/videos-o.gif) no-repeat left top;
display: block;
}
a#m6:hover {
background: url(http://maxpresi.ucoz.com/videos-h.gif) no-repeat left top;
display: block;
}

a#m7, a#m7:link, a#m7:visited {
background: url(http://maxpresi.ucoz.com/conato.gif) no-repeat left top;
display: block;
}
a#m7:active {
background: url(http://maxpresi.ucoz.com/conato-o.gif) no-repeat left top;
display: block;
}
a#m7:hover {
background: url(http://maxpresi.ucoz.com/conato-h.gif) no-repeat left top;
display: block;
}

HTML:

<div id='navigation'>
<ul>
<li><a href='http://maxpresi.ucoz.com/' id='m1' title='Home'> </a></li>

<li><a href='http://maxpresi.ucoz..._inuteis/1-0-1/' id='m2' target='_blank' title='Fatos Inúteis'> </a></li>

<li><a href='http://maxpresi.ucoz...ramas_futeis/1/' id='m3' target='_blank' title='Programas Fúteis'> </a></li>

<li><a href='http://maxpresi.ucoz...as_portateis/2/' id='m4' target='_blank' title='Jogos e Programas Portáteis'></a></li>

<li><a href='http://maxpresi.ucoz.com/photo/' id='m5' target='_blank' title='Fotos Bizarras'></a></li>

<li><a href='http://maxpresi.ucoz...axvideos/1-0-2/' id='m6' target='_blank' title='MaxVideos'></a></li>

<li><a href='http://maxpresi.ucoz...ex/contato/0-3/' id='m7' rel='nofollow' target='_blank' title='Contato...'> </a></li>

</ul>
</div>

olhem ae e me ajudem a descobrir pq nao aparece nada =/

vlw!

[Édipo Costa Rebouças]

não é porque vc esta usando ' no lugar de " no HTML? tente colocar um comentario sem nada dentro do link, tipo

<a href="http://maxpresi.ucoz.com/index/contato/0-3/" id="m7" rel="nofollow" target="_blank" title="Contato..."><!-- --></a>

[MaxPresi]

po cara...o menu continuo sem aparecer xD
olha lah no seite...tah na minha assinatura...nao aparece nada..nem o codigo ..nada nda...como se não tivec nada!!!

vlw!

[Édipo Costa Rebouças]

tem que colocar altura e lagura nos botões tb.

a#m5, a#m5:link, a#m5:visited {
background: url(http://maxpresi.ucoz.com/fotos.gif) no-repeat left top;
display: block;
width: 50px; height: 20px;
}

[MaxPresi]

vlw cara..*-* deu certo...jah ganho ateh pontinho xD

mas po...quando eu clico no botão ele nao troca a imagem...tipo..era pro botão fik vermelho..mais nao fik!!!

po cara...outra coisa...o menu nao tah todo numa linha só e os links estão abrindo em outra aba e nao na mesma!!!

vlw pela atençao e paciencia cara =D

Edição feita por: MaxPresi, 10/07/2010, 13:19.

[Édipo Costa Rebouças]

sobre os links abrirem em outra pagina, é por causa do target="_blank", remova isso que não vai abrir em outra janela, sobre ficar vermelho, vc esta falando, tipo, eu entro na sessão programas e vc quer que ele fique vermelho por vc estar na sessão programas?

[MaxPresi]

naaaaao...tipo...tem o botao normal...quando vc passa o mouse em cima ele muda de cor/imagem (hover)..ai quando vc clica ele muda pra outra cor/imagem d novo ....eu qria saber qual q eu uso pra isso acontecer...eu to usando active mais nao tah aparecendo!!!

vlw!!!!

[Édipo Costa Rebouças]

aonde esta :active, por exemplo a#m5:active, coloque a mesma imagem do :hover.

[MaxPresi]

mas desse jeito a imagem nao vai mudar....vai fik a mesma do hover....e eu quero que mude....só que nao muda ....

vlw vei!