Breakline via CSS

[Edson Carli 0]

Ola pessoal,

 

para inserir uma quebra de linha antes de um elemento eu sei que se usa display:block. Porém as vezes queremos inserir uma quebra depois e não queremos dar um wrap no elemento com um div somente para isso. Já vi soluções que não gostei como content:'\a'. Até porque não funciona com todos os navegadores. Por outro lado é comum ver tags html com estas características vindas de fábrica, como o elemento BR ou o elemento H1. Então gostaria de saber se existe algum atributo que efetua isso de modo elegante, ou os elementos BR e H1 são mágicos?

 

Se não existir acho que faz falta um atributo desse tipo =/

[rafael-tdc 13]

Não seria o padding-bottom/margin-bottom?

[William Bruno 1501]

<br /> é um break, uma quebra de linha.

 

<h1> assim como uma <div> são elementos nivel de bloco, que possuem por padrão o display setado para block.

 

 

 

Não entendi direito a sua dúvida.

Se você quer "quebrar", e houver semântica então use o <br />. Se for uma quebra de layout, então formate com css.

[Bruno Augusto 417]

Ao que parece esse truque com a propriedade content não funciona para elementos de bloco. Porém funciona para elementos inline-block que não é compatível com versões antigas do navegadores, pelo menos não sem hacks.

 

[EDIT]

 

No IEca as quebras de linha via content também não funcionaram.

[Edson Carli 0]

Não seria o padding-bottom/margin-bottom?

Isso me daria uma margem, não uma quebra de linha. Exemplo:

 

Componente 1 Componente 2

Componente 3

 

Se eu colocar uma quebra de linha após o Componente 1, ficaria:

 

Componente 1

Componente 2

Componente 3

 

Se eu colocar uma margem no final do componente 1 vai ficar:

 

Componente 1 Componente 2

 

 

Componente 3

 

Repare que o resultado que eu quero é um debaixo do outro. Como disse tem como colocar a quebra de linha antes do componente 2, mas nem sempre isso resolve o problema. O que gostaria de saber é, se alguns elementos HTML podem fazer isso, existe uma forma (mesmo que ainda não liberada, como moz- o- etc) que faz isso?

 

<br /> é um break, uma quebra de linha.

 

<h1> assim como uma <div> são elementos nivel de bloco, que possuem por padrão o display setado para block.

 

 

 

Não entendi direito a sua dúvida.

Se você quer "quebrar", e houver semântica então use o <br />. Se for uma quebra de layout, então formate com css.

 

Opa William, obrigado pela resposta.

Então eu justamente quero quebrar mas não é semantica. Se fosse semântica de fato usaria BR. Não é semântica, quero dizer que a classe X vai passar a ter uma quebra de linha no final, de modo elegante, essa é a dúvida. Como faz?

 

Sei que dá pra botar um Br ali e fará exatamente o que quero, mas é jogar sujo pois o template pode ser mudado e outra pessoa pode não querer um BR ali. Queria fazer isso via css, sem ter que criar mais elementos só pra inserir uma quebra de linha depois do elemento. E obviamente sem usar display:absolute que ai é jogar baixo ^^

 

Ao que parece esse truque com a propriedade content não funciona para elementos de bloco. Porém funciona para elementos inline-block que não é compatível com versões antigas do navegadores, pelo menos não sem hacks.

 

[EDIT]

 

No IEca as quebras de linha via content também não funcionaram.

Pois é =/

Seria, apesar de não ser elegante, fácil botar content:'/a' mas já que não funciona, comecei a procurar uma forma elegante e não estou achando. To quase chegando na certeza que não existe, que ou você fere a semântica ou insere vários elementos a mais pra poder simular uma quebra de linha usando block e blockinline.

[William Bruno 1501]

Como faz?

fica bem mais simples se você mostrar o layout.. mas enfim..

 

você pode jogar display: block; ou float: none; no componente 3 ?

[Edson Carli 0]

fica bem mais simples se você mostrar o layout.. mas enfim..você pode jogar display: block; ou float: none; no componente 3 ?

A dúvida é conceitual, não é específica de um único caso. Mas criei o exemplo abaixo para ficar mais claro:

<div id="frm">
<LABEL>Nome:</LABEL> <INPUT />
<LABEL>Sobrenome:</LABEL> <INPUT />
<LABEL>Nome da Mãe:</LABEL> <INPUT />
</div>

 

Note que, depois de cada #frm INPUT eu quero uma quebra de linha.

Repare que não posso colocar block no LABEL, se não ele fica isolado na linha.

Note também que não quero programar usando float, pois ele não é float.

Eu costumo hoje resolver assim:

<STYLE>
#frm1 .field
{
display:block;
margin:5px;	
}

#frm1 .field LABEL
{
display:inline-block;
margin-right:15px;
width:150px;
}
</STYLE>
<div id="frm">
<DIV class="field"><LABEL>Nome:</LABEL> <INPUT /></DIV>
<DIV class="field"><LABEL>Sobrenome:</LABEL> <INPUT /></DIV>
<DIV class="field"><LABEL>Nome da Mãe:</LABEL> <INPUT /></DIV>
</div>

 

Mas desse jeito tenho que inserir um DIV a mais apenas para gerar uma quebra de linha, não faz sentido isso quando o CSS geralmente dá alternativas mais elegantes para resolver esse tipo de problema. Mas estou praticamente desistindo disso e partindo pra resolver usando JQUERY, é bem mais fácil inserir um:

$("#frm INPUT").after("<BR>");

 

e encerrar o problema. Mas queria saber se não tem um jeito elegante que por acaso eu não soubesse, pois as vezes a gente procura nos lugares errados e/ou com os termos errados.

[William Bruno 1501]

cada caso é um caso. Para este caso em específico, era melhor que você fizesse assim:

 

<LABEL>Nome: <INPUT /></LABEL>

então você dispensa a div, e dá display: block no LABEL.

 

Esta é uma boa prática de usabilidade também.

[Edson Carli 0]

cada caso é um caso. Para este caso em específico, era melhor que você fizesse assim:

 

<LABEL>Nome: <INPUT /></LABEL>

então você dispensa a div, e dá display: block no LABEL.

 

Esta é uma boa prática de usabilidade também.

William, muito legal, essa é uma boa solução sim! =)

 

Embora que nem disse, eu não estou com um problema específico. Queria discutir o assunto apenas, resolver o problema na esfera conceitual. Existem casos onde os elementos alinhados podem ser dois imputs, ai acho que não tem jeito mesmo.

 

Poxa, seria bem mais fácil ter um atributo de CSS como breakline:true, por exemplo ^^. Ai bastaria fazer algo como Elemento:after { breakline:true}

 

ou então se breakline tivesse algo como breakline:{none(default) | left | right }. Seria mais lindo ainda.

 

Facilitaria muito a nossa vida e o código ficaria enxuto.

[ricardo_mc 19]

Essa solução do William costuma ser a ideal, mas se você tem esse mesmo problema de forma genérica, você pode pode usar o "clear:left;"

 

No seu exemplo:

<div id="frm">
<LABEL>Nome:</LABEL> <INPUT />
<LABEL>Sobrenome:</LABEL> <INPUT />
<LABEL>Nome da Mãe:</LABEL> <INPUT />
</div>

 

Use o seguinte CSS e veja o que acontece:

 

#frm label, #frm input{float:left;}
#frm label{clear:left;width:100px;}

 

O comando "clear" manda limpar a condição do float:left. Basicamente ele cria uma quebra de linha. Se você usar o clear:both, ele vai quebrar uma linha antes e depois; se usar o clear:left, vai quebrar a linha antes do elemento e se usar o clear:right, por algum mistério do universo, ele não funciona direito, apenas em algumas raras exceções... :P

 

Mas no caso, é preciso transformar seu elemento em flutuante ou em bloco. Sem isso, não funciona. Na prática vejo que a melhor forma de fazer um site é usar o CSS Reset e transformar todas as div em float:left. Daí tiro o float das que não preciso (que são raras).

 

Veja se isso resolve o seu problema, ou parte dele pelo menos.

[Edson Carli 0]

Ola Ricardo, o problema que o float gera outros inconvenientes pois ele não trabalha muito bem com elementos não flutuantes dentro de um mesmo form/conteúdo. Mas se você disse que funciona em block ai seria muito legal essa solução, eu acho que nunca testei aqui. Vou estudar isso melhor e posto aqui se funcionou. :thumbsup:

[Edson Carli 0]

Ricardo,

 

testei aqui e não funcionou e pelo que li aqui o clear só funciona mesmo com float e não com block.

 

#frm2 LABEL
{	
clear:left;
display:block;
}

 

Quando digo que float não funciona em todas as situações eu quero me referir a isso.

 

Bom foi legal as idéias, pelo visto para eliminar o BR quando ele não for semântico tem várias soluções.

 

Bom, a gente tem uma solução comum para situações onde o elemento tem uma quebra de linha antes e depois. Nesse caso se usa o block.

 

Temos a solução wrap, que funciona quando o elemento pode ser embrulhado por outro que é block, no caso do label abrindo e engolindo o input, ou um div que embrulha os dois elementos internos.

 

Temos uma solução quando os elementos são floats.

 

Temos outra, usando content:'/a' que funciona em alguns navegadores.

 

Tem ainda usando JQuery/javascript.

 

Não existem desculpas pra usar o BR de forma inadequada :grin: . Mas infelizmente pelo visto não existe solução única como ocorre com o BR, mas tendo todas essas soluções em mente eu acredito que resolva todos os casos.