Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alexsandro XPT

Desenhar uma caixa/balão(tooltip) com CSS

Por , em Desenvolvimento frontend

Recommended Posts

Alexsandro XPT    0

Alexsandro XPT
Postado

Eu preciso desenhar um caixa com uma seta para mostrar uma pequena mensagem.

 

Tentei desenhar com DIV so que o no IE6 e no FF aparecem tudo diferente.

 

 

O que vcs me indicam?

 

 

Valew.

 

<!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">
<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>fadsfsdfsda</title>
<style>
<!--
div.seta1		  { background-color: #fbc2c4;font-size:0%;margin:0px }
div.seta2		  { background-color: #fbe3e4;font-size:0%;margin:0px;border-top:2px solid #fbc2c4;border-bottom:2px solid #fbc2c4 }
-->
</style>
</head>

<body>




<div style="position: absolute; width: 322px; height: 106px; z-index: 2; left: 206px; top: 125px;border:1px solid blue" id="">
<div class="seta1" style="position: relative; width: 1px; height: 1px; z-index: 1; left: 261px; top: 50%" id=""><img width="1" height="1" /></div>
<div class="seta1" style="position: relative; width: 1px; height: 3px; z-index: 1; left: 262px; top: 48%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 1px; z-index: 1; left: 263px; top: 44%" id=""><img width="1" height="1" /></div>
<div class="seta2" style="position: relative; width: 1px; height: 3px; z-index: 1; left: 264px; top: 39%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 9px; z-index: 1; left: 265px; top: 31%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 11px; z-index: 1; left: 266px; top: 21%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 13px; z-index: 1; left: 267px; top: 10%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 15px; z-index: 1; left: 268px; top: -4%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 17px; z-index: 1; left: 269px; top: -19%" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 19px; z-index: 1; left: 270px; top: -37%" id=""></div>
</div>

<p> </p>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não seria melhor usar uma IMAGEM para seta?

 

Posicionar a imagem da seta, é muito mais simples doque construi-la desse jeito ai...

Já vi desenhos bem interessantes em CSS... vou dar uma pesquisada pra ver se consigo algo aqui..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexsandro XPT    0

Alexsandro XPT
Postado

Pois é.. com imagem seria uma boa saida... so que tem um problema... pra mudar cor do balao e da seta vai dar custo abrir um editor de imagem, queria fazer um balao pra desenvolvimento em massa, a pessoa pegar apenas o CSS e colocar a cor e ser feliz entende...

 

a outra saida é eu fazer hack pra IE6... mas queria fugir disto... :wacko:

 

Mas valew pela atençao... se solver algo posta aqui fazendo favor.. ;)

 

Não seria melhor usar uma IMAGEM para seta?

 

Posicionar a imagem da seta, é muito mais simples doque construi-la desse jeito ai...

Já vi desenhos bem interessantes em CSS... vou dar uma pesquisada pra ver se consigo algo aqui..

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu encontrei as seguintes codificações de setas HTML:

.setas{
	font-size: 500%;
	color: #f00;
}
</style>
</head>
<body>
<span class="setas">
←  →
↑  ↓
↔
</span>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexsandro XPT    0

Alexsandro XPT
Postado

Bacana isto...

 

Mas nao era assim... olha so, eu consegui.. funcionou nos 2... veja ai testa ai..

 

<!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">
<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>fadsfsdfsda</title>
<style>
<!--
div.seta1		  { background-color: #fbc2c4;font-size:0%;margin:0px }
div.seta2		  { background-color: #fbe3e4;font-size:0%;margin:0px;border-top:2px solid #fbc2c4;border-bottom:2px solid #fbc2c4 }
-->
</style>
</head>

<body>




<div style="position: absolute; width: 322px; height: 101px; z-index: 2; left: 206px; top: 125px;border:1px solid blue" id="">
<div class="seta1" style="position: relative; width: 1px; height: 1px; z-index: 1; left: 261px; top: 50px" id=""><img width="1" height="1" /></div>
<div class="seta1" style="position: relative; width: 1px; height: 3px; z-index: 1; left: 262px; top: 48px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 1px; z-index: 1; left: 263px; top: 44px" id=""><img width="1" height="1" /></div>
<div class="seta2" style="position: relative; width: 1px; height: 3px; z-index: 1; left: 264px; top: 38px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 5px; z-index: 1; left: 265px; top: 30px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 7px; z-index: 1; left: 266px; top: 20px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 9px; z-index: 1; left: 267px; top: 8px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 11px; z-index: 1; left: 268px; top: -6px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 13px; z-index: 1; left: 269px; top: -22px" id=""></div>
<div class="seta2" style="position: relative; width: 1px; height: 15px; z-index: 1; left: 270px; top: -40px" id=""></div>
</div>

<p> </p>

</body>

</html>

 

Eu encontrei as seguintes codificações de setas HTML:

.setas{
	font-size: 500%;
	color: #f00;
}
</style>
</head>
<body>
<span class="setas">
←  →
↑  ↓
↔
</span>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito