5

Como faço para criar um bloco VAZIO+TRANSPARENTE de 800px de altura por 1000px de largura? E porque o código abaixo não funciona para isso?

html

<div class="block"></div>

css

.block {
 height: 800px;
 width: 1000px;
}

Com isso, estou tentando criar espaços acima e abaixo da div .vitrine:

<div class="block"></div>
<div class="vitrine"></div>
<div class="block"></div>
8
  • 1
    o código que você postou funciona, você quer ele transparente ? pra que ?
    – Alan PS
    15/06/2014 às 21:24
  • dá uma olhada: jsfiddle.net/qnF3p
    – Alan PS
    15/06/2014 às 21:25
  • Por exemplo, para criar uma área vazia. Mas também para conhecer mais sobre html e css. Por volta dos anos 2000 eu usava um gif transparente para as células ganharem o tamanho que eu queria. Achava eu que isso não era mais necessário. 15/06/2014 às 21:35
  • boa, com o background-color funciona. eu posso usar um opacity depois para deixar transparente. A cor, ou algum preenchimento fazer a vez do gif transparente. Curioso. Valeu! 15/06/2014 às 21:38
  • sem background-color também funciona, dá uma olhada: jsfiddle.net/qnF3p/3
    – Alan PS
    15/06/2014 às 21:40

1 Resposta 1

3

Você não precisa de elementos invisíveis para criar esses espaços. No caso do seu último exemplo, simplesmente aplique margens na div .vitrine:

<div class="vitrine"></div>
.vitrine { 
    height: 350px; 
    width: 100%; 
    background-color: #222; 
    margin-top: 800px;
    margin-bottom: 800px;
} 

Dá para simplificar o CSS das margens também:

margin: 800px 0; /* top/bottom = 800px, left/right = 0 */

http://jsfiddle.net/bL9qG/

4
  • Perfeito, funciona neste caso que citei acima. Mas suponha que a vitrine se repita em outro momento da página onde não deve haver os 800px? 15/06/2014 às 23:20
  • Nesse caso, as margens não pertenceriam à vitrine mesmo. Mas podem pertencer a algum outro elemento. Meu ponto é que hoje em dia dificilmente você precisa usar um elemento invisível como espaçador. Se quiser, atualize sua pergunta com um exemplo concreto e mais completo do problema, e eu atualizo a resposta com uma sugestão mais direcionada.
    – bfavaretto
    16/06/2014 às 1:23
  • Não tenho nada concreto em mente, estou entendendo como funcionam algumas relações para poder brincar um pouco. Tava criando isso aqui arslab.com.br/lab/effects/compliance/teste.php 16/06/2014 às 1:45
  • Entendi. Nesse caso parece fazer sentido seu bloco ali mesmo. Eu criaria 3 classes em vez de uma (bloco simples, duplo e triplo). E você pode combinar classes e deixar os nomes mais semânticos. Poderia ter <div class="triplo transparente"></div>. Isso poderia ser usado com todas as cores.
    – bfavaretto
    16/06/2014 às 2:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .