Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Tenho o seguinte efeito a realizar:
/applications/core/interface/imageproxy/imageproxy.php?img=http://s13.postimage.org/5quye26g5/comodeveriaser.jpg&key=cfe33e2454254643dc05ad3e1d33ffb35fa1e54b1432df8c3c77da24d00400e7" alt="comodeveriaser.jpg" />
Fiz uma div com o tamanho do botão, e coloquei a imagem do botão com a sombra e tudo como background.
Depois fiz um <a> com display block e dei width e height 100% para a div toda ser clicável.
Pooorém agora eu não sei como centralizar o texto do link ("catalogo-placas-2012.pdf") verticalmente no botão.
Se eu usar padding-top todo o <a> aumenta e a área clicável sai pra fora da div:
/applications/core/interface/imageproxy/imageproxy.php?img=http://s16.postimage.org/5668cz51f/compadding.jpg&key=bacce96f88d11dea9a7ecb2378d753d8c9b9f0cf1061ae86e3760568317c7ea6" alt="compadding.jpg" />
(a borda preta de 1px é o tamanho do <a>)
Como se soluciona?
Não queria usar uma imagem apenas, como link.
Obrigado desde já.
Vlw.
>
coloca o link na div ex
<a href="http://......."><div></div></a>
Elementos inline não podem conter elementos de bloco.
Isso é regra básica do HTML.
>
:seta: Guia de referência HTML5 — capítulo 4: Modelos de conteúdo
Tenta rever essa usabilidade...
>
Elementos inline não podem conter elementos de bloco.
Isso é regra básica do HTML.
:seta: Guia de referência HTML5 — capítulo 4: Modelos de conteúdo
Tenta rever essa usabilidade...
Eu ia mesmo perguntar se isso era semântico ou não, mas como ao meu entendimento leigo não via nada que pudesse ser não-semântico nisto não perguntei...
Enfim, mas e se eu der um "display: block;" no a? Ele não se torna um elemento de bloco e então agora é semântico colocar um div dentro dele?
A regra de que um elemento de linha não pode conter um elemento de bloco é uma conclusão a que se chega ou é uma declaração oficial?
Vlw pela atenção
Quanto ao botão, consegui o que eu queria (até agora, falta o ícone de PDF)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img821.imageshack.us/img821/7296/botaonz.jpg&key=564632183da79ccd79410c97da24d8f1d3a4bd2408155dcec41feca3b60fc3cf" alt="botaonz.jpg" />
De uma forma muito mais simples, e acredito que correta, com esse código:
<a href="#" id="download">catalago-placas-2012.pdf</a>
#download {
background: url("botao.png") no-repeat;
width: 327px;
height: 53px;
float: right;
font-size: 22px;
color: white;
text-decoration: none;
padding-top: 14px;
padding-left: 20px;
}Me sinto até bobo agora de tão fácil que era... rs
>
Enfim, mas e se eu der um "display: block;" no a? Ele não se torna um elemento de bloco e então agora é semântico colocar um div dentro dele?
Não, ele só vai se "fantasiar" de elemento de bloco.
>
A regra de que um elemento de linha não pode conter um elemento de bloco é uma conclusão a que se chega ou é uma declaração oficial?
Oficial. Regra básica do HTML.
>
Quanto ao botão, consegui o que eu queria (até agora, falta o ícone de PDF)
/applications/core/interface/imageproxy/imageproxy.php?img=http://img821.imageshack.us/img821/7296/botaonz.jpg&key=564632183da79ccd79410c97da24d8f1d3a4bd2408155dcec41feca3b60fc3cf" alt="botaonz.jpg" />
De uma forma muito mais simples, e acredito que correta, com esse código:
<a href="#" id="download">catalago-placas-2012.pdf</a>
#download {
background: url("botao.png") no-repeat;
width: 327px;
height: 53px;
float: right;
font-size: 22px;
color: white;
text-decoration: none;
padding-top: 14px;
padding-left: 20px;
}É isso aí mesmo :) Semanticamente correto!
Agora sobre o ícone, é só continuar se baseando nas regras básicas de modelos de conteúdo:
>
Os elementos de linha nunca podem conter elementos de bloco.
Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra.
Conhece os elementos de linha? Nessas situações, eu formato um elemento (de linha) para funcionar como ícone.
Consegue? :)
Consegui!
/applications/core/interface/imageproxy/imageproxy.php?img=http://img4.imageshack.us/img4/5079/conseguiw.jpg&key=a52e9c8ea92210062ca57b7f7091fe48e72a28f3ee407a8a71849cbb9a801ddf" alt="conseguiw.jpg" />
<a href="#" id="download"><span>catalago-placas-2012.pdf</span> <img src="pdficon.png" /></a>
#download {
background: url("botao.png") no-repeat;
width: 320px;
height: 40px;
float: right;
font-size: 22px;
color: white;
text-decoration: none;
padding:10px 17px 17px 10px;
}#download img {
margin-top: 3px;
margin-left:5px;
float: right;
display: block;
}#download span {
display: block;
margin-top: 6px;
float: left;
}#download:hover {
text-decoration: underline;
}Só que o efeito hover (text-decoration: underline;) não está funcionando no firefox (estou usando Chrome primariamente), por que isso?
E obrigado pelos esclarecimentos!
Tente fazer isso sem span dentro do Href. Basta definir também ao elemento #download{display:block}
O display block transforma o elemento numa div.
coloca o link na div ex
<a href="http://......."><div></div></a>
que o link ja fica na area total da Div