Linda Martins, 18, Salvador. Livros (os que leio e os que escrevo), minimalismo, estudos aleatórios e comida definem minha vida. Em constante evolução. Se você for suficientemente observador, verá que esta bio é diferente da bio do ano passado.

ENTREVISTA
Rudson Xaulin

RESENHA
Um beijo inesquecível

AUTORAIS
Baed

26.10.16

Aprendendo html #08 - Display, visibility e outras configurações no bloco

Então, esse é um post pequeno e rápido, que vai explicar a você, caro leitor, coisas relacionadas a configuração individual de cada grande elemento (neste caso, elementos de bloco - vide post #06), usando propriedades já citadas e outras inéditas. O conteúdo é simples, mas essencial para organização do layout do template.

Antes de tudo, é bom salientar que neste estágio - e especialmente, nesta postagem - o post 6, citado e linkado acima, torna-se uma espécie de bússola que vai orientar o leitor nesse tipo de conteúdo mais solto, portanto, se você ainda não viu os posts de html anteriores a esse, corra para a sessão HTML e confira.


WIDTH COM PORCENTAGEM

                                              
#todo {width: 925px;} 
#bloco1 {width: 80px;}
O "todo" apresentado no código representa a parte em branco da imagem.
A definição de width para o bloco 1 continua em pixel e toma uma parte pequena do espaço total. Se a intenção for que a largura do bloco se estenda aos extremos da página, a utilização da porcentagem no width torna-se útil.


#todo {width: 925px;}
#bloco1 {width: 100%;}

Não há nada que impeça que todo o layout seja feito usando porcentagem no width, porém, além de mais complicado, esse método tem suas restrições na prática, por se comportar de forma diferente à definição em pixel. O valor da porcentagem é retirado com base no "elemento pai", que no código acima, é o "#todo". O valor em pixel não possui esse tipo de relatividade.

Nem todos os código-fonte aceitam porcentagem na propriedade height (altura), e isso se dá pela forma como o "body" é configurado. Na maioria dos layouts, há uma definição de valor para width, mas não para height. Portanto, a página não tem altura e assim, não tem um elemento pai para servir de base para essa porcentagem. Nesses casos, a altura da página vai se alterando conforme elementos são acrescentados. Se a utilização de porcentagem no height for realmente, realmente necessária, pode-se mudar o código de "body" e definir uma altura padrão para a página.


DISPLAY: NONE E VISIBILITY:HIDDEN

Ambas as propriedades, sob esses valores, possuem uma função em comum: esconder e apagar elementos e objetos do layout, sem de fato retirá-los do código. A diferença aqui, está exatamente em como ambos se comportam.

#header {width: 710px; height: 90px; background-color: #000; color: #fff; margin-bottom: 50px;}
#main {width: 540px; background-color: #7c4622; color: #fff;}
O display, propriedade citada em posts anteriores, tem como objetivo definir o tipo de elemento dentro do layout (elemento de linha/bloco). Entretanto, o elemento em questão pode desaparecer por completo se o valor da propriedade for "none".

#header {width: 710px; height: 90px; background-color: #000; margin-bottom: 50px; color: #fff; display: none;}
#main {width: 540px; background-color: #7c4622; color: #fff;}

Perceba que nada foi removido do código original, e somente a faixa "display:none" foi acrescentada, entretanto, na imagem, o header some como se todo o código fosse excluído. Porém, enquanto o "display:none" esconde e apaga todo o bloco do layout, o "visibility:hidden" vai esconder apenas os objetos existentes dentro do bloco.

#header {width: 710px; height: 90px; background-color: #000; color: #fff; margin-bottom: 50px; visibility: hidden;}
#main {width: 540px; background-color: #7c4622; color: #fff;}

PS: O post acabou não ficando pequeno, mas ainda assim, o conteúdo é simples.
PS 2: Não esqueci o post sobre o footer, prometido no post #06. Ele virá.