[Resolvido] Centralizar TEXTO de link na div

[Pablo RD 5]

Tenho o seguinte efeito a realizar:

 

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:

(a borda preta de 1px é o tamanho do <a>)

 

Como se soluciona?

 

Não queria usar uma imagem apenas, como link.

 

Obrigado desde já.

[Vih 2]

coloca o link na div ex

<a href="http://......."><div></div></a>

que o link ja fica na area total da Div

[Pablo RD 5]

Vlw.

[Diéssica 140]

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.

 

• 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. Por exemplo: o elemento a não pode conter o elemento label.
  
• Elementos de bloco sempre podem conter elementos de linha.
  
• Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível.

:seta: Guia de referência HTML5 — capítulo 4: Modelos de conteúdo

 

Tenta rever essa usabilidade...

[Pablo RD 5]

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)

 

 

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

[Diéssica 140]

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)

 

 

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? :)

[Pablo RD 5]

Consegui!

 

 

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

[Mateus Avila Isidoro 8]

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.