sábado, 21 de agosto de 2010

Quebra de linha em HTML: possibilidades da tag <br>

Quem trabalha com posts cheios de imagens já está careca de saber que a tag <br/>, quando solitária, não resolve todas nossas necessidades de quebra de linha. Quando você incrementa mais a diagramação do post precisa ter um controle maior das quebras de linha para que fique tudo no seu devido lugar.

Segue um exemplo do que estou falando:

Exemplo do problema

Observe que o tópico 2 está “encavalado” com a imagem do tópico 1. Isso acontece bastante quando fazemos posts com imagens alinhadas aos lados. Muitas pessoas tentam gambiarras para resolver o problema, como:

  • mudar os tamanhos das imagens;
  • colocar várias vezes a tag <br/>, mas depois nota que não fica do mesmo jeito em todos os navegadores;
  • mudar o alinhamento das imagens, geralmente colocando todas alinhadas do mesmo lado.
  • mudar totalmente a diagramação do post, já que não consegue resolver o problema.

Mas há outra forma mais simples e definitiva, que é usar o parâmetro clear na tag.

► Resolvendo com clear="all"

Uma das soluções é bastante simples: acrescentar clear="all" à tag de quebra de linha que separa um tópico do outro e também ao final do último tópico com imagem:

<br clear="all"/>

Exemplo de código:

<img src="imagem-do-primeiro-topico.png" align="right"/>
<h3>Título do 1º tópico</h3>
<p>Texto do 1º tópico</p>
<br clear="all"/>
<img src="imagem-do-segundo-topico.png" align="left"/>
<h3>Título do 2º tópico</h3>
<p>Texto do 2º tópico</p>
<br clear="all"/>

Resultado:

Exemplo resolvido

► Resolvendo com clear="right" ou clear="left"

Outra opção interessante é deixar a imagem do 2º tópico ocupando o espaço não usado pelo texto do 1º tópico. Agora a tag de quebra de linha – <br clear="right"/> – deve ser colocada depois da imagem do 2º tópico.

Ao final do último tópico com imagem, continue usando <br clear="all"/>.

Exemplo de código:

<img src="imagem-do-primeiro-topico.png" align="right"/>
<h3>Título do 1º tópico</h3>
<p>Texto do 1º tópico</p>
<img src="imagem-do-segundo-topico.png" align="left"/>
<br clear="right"/>
<h3>Título do 2º tópico</h3>
<p>Texto do 2º tópico</p>
<br clear="all"/>

Resultado:

Solução com clear=right

Se a imagem do primeiro tópico estiver alinhada à esquerda e a do 2º tópico à direita, ao invés de clear="right" usamos clear="left":

Solução com clear=left

Esse recurso não funciona quando a folha de estilos do blog obriga o elemento a seguir outro tipo de alinhamento. Para solucionar isso é preciso conhecer o CSS do site.

Há outra forma de gerar quebra de linha sem usar a tag <br/> e usando CSS. Espero voltar em breve para mostrar essa possibilidade.

Se você gostou deste post, deverá gostar também de:

Até mais!

Pix meutedio arroba mail ponto com

11 comentários:

  1. O uso do atributo "align" no elemento "img" está deprecated (aliás em qualquer elemento). Recomendo utilizar sempre o CSS para tais coisas, como o próprio clear.

    p {
    clear: both;
    }

    Inté!

    ResponderExcluir
  2. Este sou eu às vezes: "mudar totalmente a diagramação do post, já que não consegue resolver o problema." hehehhehhe
    Também porque quando estou escrevendo algum post quero é mandar bronca, e menos formatar..... por isso é bom e importante conhecer essas dicas de ante-mão!
    Valeu, belo artigo! Nada "deprecated"!

    ResponderExcluir
  3. Otimo o teu site, parabéns, bem esclarecedor. Continue assim.

    ResponderExcluir
  4. Há tempos estava tendo problemas... o clear all resolveu o meu!!! Muito obrigado!!!

    ResponderExcluir
  5. Ótima post, estava procurando por isso a tempos...

    ResponderExcluir
  6. Boas as dicas, parabéns e obrigado por compartilhá-las, mas tem como acrescentar (automaticamente) uma quebra de linha após o título da postagem, ou seja, saltar uma linha depois do título. Fazer isto manualmente (postagem por postagem) levará um tempão.
    Desde já obrigado.

    ResponderExcluir
    Respostas
    1. É possível sim, basta acrescentar a tag <br> após a tag de título no código-fonte do template do seu blog.

      Mas se você quiser apenas aumentar o espaço abaixo do título, o modo correto é usando margens e espaçamento.

      Excluir
    2. Obrigado Helen, pela rápida resposta. Fiz algumas mudanças, melhorou, mas ainda não é o que eu desejava.. Queria um espaço entre o título e o conteúdo da postagem, porém a data (que fica acima do título) gostaria que ficasse mais próxima do título). Mais uma vez obrigado pela dica.
      Ah, meu template é o mínima e no local .post está assim:

      .post h3 {
      margin:.25em 0 1;
      padding:0 0 4px;
      font-size:140%;
      font-weight:normal;
      line-height:1.4em;
      color:$titlecolor;
      background: #CFCFCF;
      }

      Excluir
    3. Milton, margin-top é só a margem de cima, margin-bottom só a de baixo.

      Excluir
    4. Yeah! Funcionou certinho com sua dica. Obrigado, mas muito obrigado mesmo Helen!
      Cordial abraço, sucessos e paz.

      Excluir
  7. Essa dica me deu umas boas ideias. Valeu!

    ResponderExcluir

Todos os comentários são moderados pela autora do blog.