27 replies to this topic

[Édipo Costa Rebouças]

maxpress, :active é pra quando vc clica no link, :focus é pra quando vc esta dando tab tab e chega no link(não funfa direito), :visited é pra formatar um link á visitado, :hover é pra quando vc esta com o mouse encima do link

[MaxPresi]

eu seeei...mas qria saber c tem outro jeito...um codigo substituto do active...por que o active nao funfa!!!!
vlw cafa

[Guilherme Vieira]

MaxPressi, qnd vc aplicou o código das width e height que o Édipo te instruiu a fazer, vc aplicoui do jeito que ele escreveu? porque se foi, tá faltando nos #m5:active...

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;
}
a#m5:active {
background: url(http://maxpresi.ucoz.com/fotos-o.gif) no-repeat left top;
display: block;
width: 50px; height: 20px;
}

assim. espero ajudar.

[MaxPresi]

vo coloca aki o css e o html atualizados....pq eu jah fiz td e coloquei tudo em tudo xD

CSS:

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

#navigation ul{
width: 1000px; /*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;
height: 37px;
width: 103px;
}
a#m1:active {
background: url(http://maxpresi.ucoz.com/home-h.gif) no-repeat left top;
display: block;
height: 37px;
width: 103px;
}
a#m1:hover {
background: url(http://maxpresi.ucoz.com/home-o.gif) no-repeat left top;
display: block;
height: 37px;
width: 103px;
}

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

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

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

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

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

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

HTML:

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

<li><a href="http://maxpresi.ucoz.com/blog/fatos_inuteis/1-0-1/" id="m2" title="Fatos Inúteis"> </a></li>

<li><a href="http://maxpresi.ucoz.com/load/programas_futeis/1/" id="m3" title="Programas Fúteis"> </a></li>

<li><a href="http://maxpresi.ucoz.com/load/jogos_e_programas_portateis/2/" id="m4" title="Jogos e Programas Portáteis"></a></li>

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

<li><a href="http://maxpresi.ucoz.com/blog/maxvideos/1-0-2/" id="m6" title="MaxVideos"></a></li>

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

</ul>
</div>

espero q ajude xD

vlw pela atenção ae galera!!!!

[Édipo Costa Rebouças]

deixei o :active depois do :hover, já tinha ouvido falar que importava a ordem, mas como eu não uso muito :active eu não sabia da cagada(activia + css rs)...

vai um exemplo:

a#m1, a#m1:link, a#m1:visited {
background: url(http://maxpresi.ucoz.com/home.gif) no-repeat left top;
display: block;
height: 37px;
width: 103px;
}
a#m1:hover {
background: url(http://maxpresi.ucoz.com/home-o.gif) no-repeat left top;
display: block;
height: 37px;
width: 103px;
}
a#m1:active {
background: url(http://maxpresi.ucoz.com/home-h.gif) no-repeat left top;
display: block;
height: 37px;
width: 103px;
}

Abraço

[MaxPresi]

eh cara...tabém nao adiantou ='[

será que é o lugar onde hospedo o site que tá dando esse erro????

vlw ae galera!!

[Édipo Costa Rebouças]

max, acessei seu site com ie7, ie8 e o firefox e ta ok, ta funfando, o problema é que por um fato bizonho do browser, não da tempo de carregar a imagem do active, se vc clicar um vez e segurar o click nesse botão, vai funcionar, e nas proximas vezes vai estar ok, oque vc tem que fazer ao meu ver, é um CSS Sprite, ai vc não tera esse problema, dá uma olhadinha na net o que é um css sprite, outra alternativa e dar um preload nas imagens do site, ou site, deixar elas carregando num canto escondido do site, como um iframe.

[Guilherme Vieira]

http://www.maujor.co...css-sprites.php
Espero te ajudar ;D

[MaxPresi]

vlw guilherme mais o site nao reconhece as outras imagens só as normais...hover e visited nao aparecem no sprite...msm eu tento carregado ela depois....

ai édipo...a parada q vc disse e verdade...testei e realmente percebia a mudança!!! mais tipo.....me da só um exemplo de como fazer esse css sprite sendo q eu tenho q usar 3 partes dessa imagem.....como eu faria???
exemplo:
uma imagem tem 103x111
ai tipoficaria:

m1#a {
background: url(imagens/menu.gif) 0 0 no-repeat;

m1# a:hover {
background-position: 0 -37px; 

m1# a:active {
background-position: 0 -74px; 
}

seria isso???

vlw cara

[Édipo Costa Rebouças]

exatamente, você só vai mudar a posição do background, ai vc não vai ter o problema de não ter tempo de carregar a imagem

[MaxPresi]

po cara...nao deu certo......fiz como vc disse..

CSS:

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

#navigation ul{
width: 1000px; /*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) 0 0 no-repeat;
}
a#m1:hover {
background-position: 0 -37px;
}
a#m1:active {
background-position: 0 -74px;
}

a#m2, a#m2:link, a#m2:visited {
background: url(http://maxpresi.ucoz.com/fatos.gif) 0 0 no-repeat;
}
a#m2:hover {
background-position: 0 -37px;
}
a#m2:active {
background-position: 0 -74px;
}

a#m3, a#m3:link, a#m3:visited {
background: url(http://maxpresi.ucoz.com/programas.gif) 0 0 no-repeat;
}
a#m3:hover {
background-position: 0 -37px;
}
a#m3:active {
background-position: 0 -74px;
}

a#m4, a#m4:link, a#m4:visited {
background: url(http://maxpresi.ucoz.com/portable.gif) 0 0 no-repeat;
}
a#m4:hover {
background-position: 0 -37px;
}
a#m4:active {
background-position: 0 -74px;
}

a#m5, a#m5:link, a#m5:visited {
background: url(http://maxpresi.ucoz.com/fotos.gif) 0 0 no-repeat;
}
a#m5:hover {
background-position: 0 -37px;
}
a#m5:active {
background-position: 0 -74px;
}

a#m6, a#m6:link, a#m6:visited {
background: url(http://maxpresi.ucoz.com/videos.gif) 0 0 no-repeat;
}
a#m6:hover {
background-position: 0 -37px;
}
a#m6:active {
background-position: 0 -74px;
}

a#m7, a#m7:link, a#m7:visited {
background: url(http://maxpresi.ucoz.com/conato.gif) 0 0 no-repeat;
}
a#m7:hover {
background-position: 0 -37px;
}
a#m7:active {
background-position: 0 -74px;

depis da uma olhada no site.....os menus sumiram!!!!

vlw galera!

[Édipo Costa Rebouças]

Max, a altura e largura vc ainda tem que colocar, quem nem tinha explicado antes pra você.

[MaxPresi]

cara..te amo vei...serio msm!!!!
jah ganho 4 pontos jah cara!!!!

vlw mesmo pela paciencia, atenção e dedicação!!!

vlw vei!

fala ae cara.....mas uma vez venho pedir sua ajuda!!!
tentei fazer a msm coisa só que na coluna da esquerda....tipo um menu com 3 itens: feed, twitter e comunidade do orkut!
"copiei e colei" tanto o css quanto o html...mudando só algums coisas......só q nao tah aparecendo nd.....olha ae:

CSS:

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

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

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

a#s2, a#s2:link, a#s2:visited a#s2:active {
background: url(http://maxpresi.ucoz.com/feedorkuttwitter.gif) no-repeat left top;
display: block;
height: 60px;
width: 120px;
}
a#s2:hover {
background-position: 0 -60px;
}

a#s3, a#s3:link, a#s3:visited a#s3:active {
background: url(http://maxpresi.ucoz.com/feedorkuttwitter.gif) no-repeat left top;
display: block;
height: 60px;
width: 180px;
}
a#s3:hover {
background-position: 0 -60px;
}

HTML:

<TABLE border="0" cellpadding="0" cellspacing="0" width="186"><TBODY><TR><TD align="center" height="30" style="background:url('/.s/t/982/7.gif') #B60605;color:#FFFFFF;padding-bottom:5px;font-size:10px;"><B>Assine Nosso Feed</B></TD></TR>
<TR><TD align="center" border="0" style="background:url('/.s/t/982/8.gif');padding:0 0px 0 0px;">

<div id="social">
<ul> 
<li><a href="http://feedburner.com" id="s1" title="Assine nosso Feed"> </a></li>

<li><a href="http://twitter.com/maxpresi" id="s2" title="Siga-nos"> </a></li>

<li><a href="http://www.orkut.com" id="s3" title="Entre em nossa comunidade!"> </a></li>

</ul>
</div></TD></TR>

<TR><TD><IMG src="/.s/t/982/9.gif" border="0"></TD></TR>
</TBODY></TABLE>
<!-- </block1> -->

vlw cara por tudo vei!!!!