Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Então pessoal, to tendo um problema no qual tentei tentei e tentei resolver antes de vir aqui encher o saco do vocês, mas não deu certo http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif
O negócio é o seguinte, estou fazendo um botão no formato quadrado, que vai ter em cima escrito "Maternidade" e outro embaixo "Aqui você encontra carinho e conforto", sendo que quando você passar o mouse por cima, reconhece esses dois textos como um link só, beleza, até aí eu consegui, o problema é que no texto de baixo eu tenho que dar uma formatação diferente para que ele se encaixe na imagem de fundo(botão).
Bom se não entederam aí vai o código:
HMTL:
<!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"](http://www.w3.org/1999/xhtml) lang="pt-br">
<link rel= "stylesheet" href = "meuestilo_center.css">
<head>
<title>Centralizando</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="principal">
<div id= "menu">
<ul>
<li><a href="">Institucional</a></li>
<li><a href="">Nossos Serviços</a></li>
<li><a href="">Especialidade Médicas</a></li>
<li><a href="">Convênios e Plano de Saúde</a></li>
<li><a href="">Especialidades Médicas</a></li>
</ul>
</div>
<div id="bannerflash">
</div>
<div id="noticias">
<p>Notícias</p>
<div id="noticia1">Nao tinha medo tal joao de santo cristo era o que todos diziam quando ele se perdeu
</div>
<div id="noticia2">Nao tinha medo tal joao de santo cristo era o que todos diziam quando ele se perdeu
</div>
<div id="noticia3">Nao tinha medo tal joao de santo cristo era o que todos diziam quando ele se perdeu
</div>
<div id="but_maternidade">
<a href="">Maternidade
<br>
<br>
<br>
<br>
<br>
<br>
Aqui você encontra carinho e conforto</p></a>
</div>
<div id= "classe_a">
</div>
</div>
</div>
</body>
</html>#principal {
behavior: url(csshover.htc);
width:642px;
height:500px;
position:relative;
left:50%;
background:#f0f0f0;
margin-left:-321px;
font-size:12px;
font-family: "times new roman", "helvetica neue";
}/====MENU DE CIMA==== /
#menu ul {
position:absolute;
height:1em;
padding:0px 90px;
margin:0px;
float:left;
width:642px;
background-color:#FFFFFF;
list-style:none;
font-size: 11px;
font-family: arial, "trebuchet MS";
} display: inline;
}/====MENU DE CIMA - VISUAL DO LINK====/
#menu ul li a {
padding: 0px 5px;
float:left;
height:1em;
background-color:#FFFF;
color:#333;
text-decoration:none;
} height:1em;
background-color:#E8E8E8;
color:#006699;
}/====BANNER - SWF====/
#bannerflash {
top:1em;
width:642px;
height:197px;
position: relative;
background-color:black;
float:left;
}/==== CAIXA - NOTÍCIAS==== /
#noticias {
background-image: url("barra_vertical.gif");
background-repeat:no-repeat;
background-position: 0px 5px;
background-top:2px;
top:1em;
width:247px;
height:144px;
float:left;
position:relative;
bottom:100px;
background-color:#FF0000;
}#noticias p {
font-size:12px;
margin-top:2px;
margin-left:6px;
}/==== CADA NOTÍCIA===/
#noticia1 {
margin-left:4px;
position:absolute;
float:left;
top:22px;
height:38px;
width:243px;
background-color:blue;
font-size:12px;
} background-color:#E8E8E8;
color:#006699;
}
#noticia2 {
margin-left:4px;
position:absolute;
float:left;
top:60px;
height:38px;
width:243px;
background-color:blue;
font-size:12px;
} background-color:#E8E8E8;
color:#006699;
}
#noticia3 {
margin-left:4px;
position:absolute;
float:left;
top:98px;
height:38px;
width:243px;
background-color:blue;
font-size:12px;
} background-color:#E8E8E8;
color:#006699;
}/ ==== BOTÕES INFERIORES - LINKS EXTERNOS ====/
#but_maternidade {
width:115px;
height:125px;
top:145px;
float:left;
position:absolute;
} color:black;
position:relative;
width:115px;
height:125px;
display:block;
background: url('maternidade_botao.jpg');
background-image: no-repeat;
text-align:center;
text-decoration:none;
}#but_maternidade a:hover {
color:green;
}
#classe_a {
width:115px;
height:125px;
top:145px;
left:115px;
position:absolute;
float:left;
background-color:white;
}Eu já tentei criar uma DIV apenas para o texto de baixo, mas daí ele não reconhece mais os dois textos como um link só, além de duplicar a imagem de fundo para a linha de baixo (se a div do texto de baixo estiver dentro da DIV da caixa do botão).... :blink:
Espero que tenham entendido...
Carregando comentários...