Ir para conteúdo

POWERED BY:

Arquivado

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

betezek

Como faço para colocar este tootip na lateral do site

Por , em Desenvolvimento frontend

Recommended Posts

betezek    0

betezek
Postado

Estava estudando CSS e vi no site do Majour que ele postou este script só que ele não fica na lateral, ele fica uns 2 cms da margem equerda. Não sei tentei de todas maneiras corrigir este espaço lateral e não cheguei a nenhuma conclusão. O que está e onde está o errro?

 

Entre em contato comigo

 

<style>
ul#menutt {
width: 160px;
list-style:none;
font: bold 16px Arial, Verdana, Serif;
}
ul#menutt li{
position:relative;
}
ul#menutt a {
width: 160px;
display: block;
text-align:left;
padding: 5px 10px;
margin-bottom:1px;
text-decoration: none;
color: #ccc;
background: #003399;
border-left: 12px solid #336699;
border-right: 3px solid #3399CC;
voice-family: "\"}\"";
voice-family:inherit;
width:160px;
}
>#pagebody>ul#menutt a {
width:160px;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menutt li { float: left; height: 1%; }
* html ul#menutt li a { height: 1%; }
/* End */
ul#menutt a:hover {
color: #fff;
background: #006699;
border-right: 3px solid #3399CC;
border-left: 12px solid #3399CC;
}
ul#menutt a span {
display: none;
}
ul#menutt a:hover span {
display: block;
position: absolute;
top:0;
left: 160px;
width: 180px;
padding: 5px;
margin-left:0px;
color: #fff;
background:#6397CB;
font-size: 10px;
text-align:left;
border:1px solid #fff;
}
</style>
</HEAD>

<BODY>
<ul id="menutt">
<li>
<a href="#">Home
<span>
Voltar
</span>
</a>
</li>

<li><a href="#">Tutorial CSS
<span>
<IMG SRC="C:/Documents and Settings/Administrador.BETEZEK-63C6618/Meus documentos/Minhas imagens/infocopi/brother6710.jpg" WIDTH="225" HEIGHT="225" BORDER="0" ALT="">
</span>
</a>
</li>

<li>
<a href="#">PDA 320x240
<span>
Neste link você verá como CSS pode
ser utilizada para possibilitar exibir sua página
web de maneira legível em um dispositivo PDA.
</span>
</a>
</li>

<li>
<a href="#">Links
<span>
Uma coletânea de links para sites sobre CSS.
</span>
</a>
</li>

<li>
<a href="#">Mapa do site
<span>
Mapa do site - Aqui você encontra uma
relação completa de todas as páginas do site.
</span>
</a>
</li>

<li>
<a href="#">Contato
<span>
Entre em contato conosco!
Sugestões serão muito bem vindas.
Se você tem uma matéria sobre CSS
e quer colaborar, publicaremos.
</span>
</a>
</li>
</ul>

</BODY>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
* { margin: 0; padding: 0; }

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