Tooltip

[camilo.oliveira 0]

Estou desenvolvendo um blog aqui para o meu trabalho e na parte onde ficam as informações sobre o dono do blog (no caso um DJ), preciso colocar além dos dados dele, um texto sobre o que ele já fez, e etc...

 

Aí lembrei do Tutorial do Tableless que o Elcio escreveu e quis fazer uma tooltip pra aparecer esse texto auxiliar, já que se colocasse o mesmo na página ficaria muito feio, pois a largura dessa div de informações é pequena.

 

Então depois de algum tempo consegui fazer a tal tooltip.

 

De novo, caí no problema com o IE.

Pesquisei no Google, no iMasters, até aqui no fórum, não achei nenhuma dúvida como essa, coisas relacionadas, mas os problemas eram diferentes do meu.

 

 

HTML dessa parte

<div class="info"><div class="sobre"><img src="img/info.jpg"><br /><p class="sobretxt"><strong>Nome:</strong><br />Alexandre de Souza<br /><br /><strong>Idade:</strong><br />34<br /><br /><strong>Profissão:</strong><br />DJ, produtor e produtor de eventos<br /><br /><strong>Site:</strong><br /><a href="http://www.djalexs.net">www.djalexs.net</a></p><br /><p align="right" class="tooltip"><a href="#">Sobre...<span>Alex S está na ativa desde 1992. Ele contribuiu para a organização da primeira rave no Brasil, a LM Music. Já tocou em muitos países, como Holanda - onde residiu por dois anos - Rússia e Colômbia. Além disso, já passou pelos clubes Torre do Dr. Zero, Lov.e, U-turn, Egotrip, Sound Factory, Manga Rosa, e se apresentou em eventos importantes, como o Skol Beats. Organizou a Groove Nation, que mais tarde se tornaria a consagrada SP Groove.</span></a></p></div><br />

 

 

Link para o CSS - Aqui

 

 

Se alguém souber pelo menos o nome do problema e como eu deveria procurar uma solução (ou até mesmo hack) eu agradeço.

 

O endereço do blog é http://www.obaoba.com.br/blog/index_novo.asp - ainda está em testes, preciso terminar essa parte, o programador terminar os ajustes dos comentários, as tabelas do painel de administração, pra poderemos entregar o blog pro cara... ObaOba é o site em que trabalho.

O site é todo estruturado em tabelas, mas como eu fiz o blog sozinho (não aproveitei nada existente no site, somente os includes que são obrigatórios) essa parte ficou em tableless.

 

Testem no FF e no IE.

No Firefox aparece bonitinho, no IE não aparece.

 

Ah, a propósito, estou com pressa aqui e não consigo achar o motivo de o texto dentro da tooltip (no FF) aparecer com as características de todos os links (negrito e sublinhado), se usei uma classe específica para ele.

 

[]´s

[Giovani 104]

E ai camilo, tudo bem?

Cara, tu já leu o artigo do maujor?

 

Acho q resolve seu problema com os links!!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Qualquer problema volte a postar!!!!

[camilo.oliveira 0]

Já li cara

 

Li de novo, dei até uma mudada no código (deixei mais limpo)

 

no Firefox não tem problema algum, funciona perfeitamente.

 

Mas no IE não aparece.

 

Fica o cursor:hand, mas não aparece a caixa de texto.

 

Não adianta funcionar só no FF, só 10% das pessoas vai ver...

 

FF

 

 

IE

 

 

Uso posicionamento negativo - posição dos posts está posicionada negativamente em relação à div de informações dele (na estrutura, div de info vem antes da div de posts, não poderia ser ao contrario, pois os posts vão aumentar e as informações não), será que pode ser isso?

 

[]´s

[Giovani 104]

posição dos posts está posicionada negativamente em relação à div de informações dele (na estrutura, div de info vem antes da div de posts, não poderia ser ao contrario, pois os posts vão aumentar e as informações não), será que pode ser isso?

Tenta isso! B) Caso consiga alguma coisa volte e avise.Vou ver se consigo dar uma olhada mais detalhada no seu código hoje a tarde.

[camilo.oliveira 0]

Valeu, amanhã vou tentar lá no serviço, ai respondo!

[camilo.oliveira 0]

Conseguiiiiiiiiiiiiii

 

 

Tinha esquecido de colocar o 'background:transparent;' na pseudo-classe hover da minha tooltip.

 

Seguindo aquele link que o gio! passou, do site do Maujor tinha faltado colocar a linha

background:transparent;

 

em a.dcontexto:hover{

 

 

Agora está tudo certinho!

 

Podem visitar em: http://www.obaoba.com.br/blog/index_novo.asp

 

Esse endereço deve mudar em breve (na hora que o DJ começar a postar), ao invés de index_novo.asp provavelmente será index.asp

 

Ainda faltam algumas tabelas no admin, mas isso é por conta do programador.

 

Acho que ficou bem esclarecido pra quem acompanhou (ou estiver pesquisando sobre o assunto)

 

[]´s

Valeu a todos!

[Giovani 104]

Show de bola camilo!!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif