Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

09-05-2009 17:05

Bom, tenho a seguinte seqüência HTML:

<div id="codigosnaweb"><a href="#"><img src=1.jpg" width="120" height="90" class="img" alt="" /><br /><span class="destaque">You're The One That</span></a></div>

Vamos lá:

1 - O id "codigosnaweb" não tem finalidade alguma, só serve pra deixar o bloco flotado à esquerda no layout;
2 - A classe "img" só serve para dar borda a imagem;
3 - A classe "destaque" só serve para dar efeito ao texto;

O meu problema:

Quando passo o mouse acima do texto, ele fica sublinhado, por que é o efeito que dei quando o texto tá linkado, gostaria de saber como faço pra quando passar o mouse acima da imagem que tá dentro desse link, o texto fique sublinhado, mas a imagem não, tipo o efeito que o webmaster do http://www.charges.com.br utiliza.

Abrass.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

09-05-2009 17:15

Ai vai um exemplo

<style> span a {text-decoration:none;} span a:hover{text-decoration:underline;} img{text-decoration:none; margin:0px 10px;} </style> <span><a href="link.html"><img src="" border="0">link</a></span>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

09-05-2009 17:24

Não vai cara...

#meus_videos_box {         float:left;         margin-right:4px; } #meus_videos_box a { text-decoration:none; } #meus_videos_box a:hover { text-decoration:underline; } #meus_videos_box img { text-decoration:none; }


<div id="meus_videos_box"><a href="#"><img src="img/videos/1.jpg" width="120" height="90" style="border:0;" alt="" /><br /><span class="destaque">You're The One That</span></a></div>

Quando passo o mouse pela imagem, ela tb fica sublinhada... :/
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

09-05-2009 17:25

Você usa doctype?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

09-05-2009 17:26

sim

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

PS: Não posso remover, pois preciso que o código seja validado pela W3C. :(
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

09-05-2009 17:28

Dei uma melhorada no script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt_br" xml:lang="pt_br"> <head> <style> span a {text-decoration: none;} span a:hover{text-decoration: underline;} img{ margin-right:20px; float:left;} </style> </head>   <body> <span><a href="link.html"><img src="" border="0">link</a></span> </body>   </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

09-05-2009 17:33

Beleza cara, funcionou perfeitamente, valeu! :D
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

09-05-2009 17:34

:8-)
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

18-05-2009 14:50

Surgiu outro problema, preciso do mesmo efeito, porém, sem ter que flotar a imagem a esquerda ou direita, ou seja, preciso que ela fique no centro e com o mesmo efeito.

Segue o código HTML abaixo;

<div id="bloco" align="center"><a href="#"><img src="img.ext" /><br /><img src="img.ext" />Texto</a></div>

:kickup
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

18-05-2009 15:40

Cria uma div pai, com align center, cria outra div dentro com o link e as imagens. No CSS, retira o style para o img.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

18-05-2009 16:40

Não entendi.

Poderia me dar um exemplo? :star
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

18-05-2009 17:00

Com base no script original, cria uma div pai, onde vai ficar o span

<div class="bloco" align="center">TODO CÓDIGO DO SPAN ORIGINAL AQUI</div>

Adiciona esse style ao CSS

.bloco{ width:200px; border:1px solid #cccccc;}

E tira as referências para o img do style que tem no original.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

18-05-2009 19:57

Ainda não entendi. +_+

Isso não deixou o texto e a imagem centralizados... e nem deu o efeito que eu queria. :(
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

18-05-2009 20:21

...preciso que ela fique no centro e com o mesmo efeito...
Me passa o que você fez com base nas alterações que indiquei.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

18-05-2009 20:49


<div id="bloco"><img src="imagem.jpg" /> Texto</div>


#bloco { width:200px; text-align:center; }   #bloco a:link { text-decoration:none; }   #bloco a:hover { text-decoration:underline; }   #bloco img { float:left; }

Qual o problema?
- A imagem.jpg tem 20px de width e height, ou seja, ela fica flotada à esquerda, e o texto no centro. Quero que ambos fiquem no centro, mas com o efeito que discutimos no tópico. Understand? :-)
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

18-05-2009 21:51

Vamos a um passo a passo:

- Pega o script que postei, o que ficou funcional;

- Pegue a parte do span, e coloque dentro dessa div

<div style="border:1px solid #cccccc; width:200px;" align="center"> AQUI VAI TODO O SPAN </div>

"que foi o que indiquei no post mais acima"

No script original, tem lá as referências para a imagem no CSS

img{ margin-right:20px; float:left; }

Ai para posicionar no centro, uma solução que pode ser usada é ao invés de definir o margin-right, usar o margin-left, dessa forma:

img{ margin-left:21px;  float:left; }

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

19-05-2009 17:16

Mas o problema é que o texto que segue a imagem terá tamanhos randômicos, com base nisso quero que fique tudo centralizado, definindo uma margem fixa a esquerda ele não ficará centralizado caso o texto seja de tamanho diferente do script postado por você, understand? :?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

19-05-2009 18:49

Meu conhecimento é limitado no CSS, tava achando que seria um valor fixo, com valores diversos, complica, ai já não sei.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

23-05-2009 17:06

Olha cara, montei um esquema bem detalhado, pra você dar uma olhada e se possível me ajudar a chegar em meu objetivo. :8)

Segue o código HTML:
<div id="ELEMENTO 1"><a href="#"><div align="center"><img src="imagem.gif" title="Codigos na Web" width="63" height="82" class="CLASSE 1" alt="" /></div><div style="clear:both; margin-bottom:2px;"></div><span id="ELEMENTO 2"><img style="float:left; margin-right:2px;" src="imagem.png" width="10" height="10" alt="" />codigosnaweb</span></a></div>
Segue o esquema detalhado:
Imagem

Bom, tudo está perfeito, quando passo o mouse sobre a imagem desta COR no esquema, o texto linkado que vem logo após a imagem desta COR fica sublinhado, sem que as imagens fiquem sublinhadas também.

O meu objetivo é centralizar tudo destacado desta COR no quote abaixo:
<div id="ELEMENTO 1"><a href="#"><div align="center"><img src="imagem.gif" title="Codigos na Web" width="63" height="82" class="CLASSE 1" alt="" /></div><div style="clear:both; margin-bottom:2px;"></div><span id="ELEMENTO 2"><img style="float:left; margin-right:2px;" src="imagem.png" width="10" height="10" alt="" />codigosnaweb</span>[/b][/color]</a></div>
Será que você poderia me ajudar? Já tentei de tudo, absolutamente tudo, mas não consegui chegar lá. :shock
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

23-05-2009 17:19

Ficou mais claro, mas, para entender melhor, cria uma página com o mesmo estilo da foto e posta o link.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

23-05-2009 17:43

Tá ae um exemplo... abrass.
0
Você não está autorizado a ver ou baixar esse anexo.
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

23-05-2009 18:37

Fiz umas gambiarras aqui, sendo que usei JavaScript para o efeito hover.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <style> #pai {border:1px solid #cccccc; width:200px;} #mini {float:left; clear:left; position:relative; top:5px;} #base {width:auto; margin-right:10px;} .base_on{text-decoration:none; color:#696969;} .base_out{text-decoration:underline; color:blue;} img { border:0; } </style>   <script> function on() { document.getElementById('alvo').className='base_out'; } function out() { document.getElementById('alvo').className='base_on'; } </script>   <div id="pai"> <div align="center"><img src="imagem.gif" title="Codigos na Web" width="63" height="82" onmouseover="on()" onmouseout="out()" /></div> <div id="mini"><img src="imagem.png" width="10" height="10" alt=""/></div> <div id="base"><center><a href="page.html" class="base_on" id="alvo" onmouseover="on()" onmouseout="out()">abc 123 xyz</a></center></div> </div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

23-05-2009 22:30

Deu no mesmo de antes cara. :-(

Imagem
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Problema com underline

23-05-2009 22:32

O objetivo não era ter o texto centralizado junto com a foto e o efeito underline?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Sexo: Masculino
Localização: Bahia
Contato:

Problema com underline

30-05-2009 20:37

Consegui já!! Valeuzão mais uma vez! :D
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado