Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

( ((phabyo)) )

<br> dentro do <p></p>, isso pode?

Recommended Posts

Pessoal,tenho um texto assim no html:

<div class="destaque_right_xxxxx"><!-- destaque right xxxxx--><h1>Titulo Texto</h1><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br><br>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br><br>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br><br>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br><br>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p></div>

Esses <br><br> são os espaçamentos que quero exatamente.Está correto isso (digo pois funciona normal) ? ou há outra forma de se fazer ?Valeuuuu

Compartilhar este post


Link para o post
Compartilhar em outros sites

Use <br /> quando deseja quebrar uma linha, esse é o valor semântico da tag. Se você está usando a tag pra isso, está correto.[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Use <br /> quando deseja quebrar uma linha, esse é o valor semântico da tag. Se você está usando a tag pra isso, está correto.

 

[]'s

Mas pela forma que ele colocou ali, o que me parece ser é que ele quer uma indentação do texto, não é? Se for, não é assim não... Pq como o #INSIDE# falou: a tag <br> é para quebrar linha. Se for isso realmente o que você quer, então deverá usar a propriedade text-indent.

 

Mas uma observação: se você aplicar isso à tag <p>, somente a primeira linha "ganhará" um avanço... Aí, nesse caso talvez seja necessário aplicar essa formatação aos parágrafos usando uma class... Por exemplo, vou simular um bloco de texto igual ao que você deseja (primeira linha sem avanço nenhum e as outras quatro com um avanço de 30px):

 

Primeiro, o CSS:

p.avanco {	text-indent: 30px;}
Agora, o HTML:
<div class="destaque_right_xxxxx"><!-- destaque right xxxxx--><h1>Titulo Texto</h1><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p class="avanco">X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p class="avanco">X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p class="avanco">X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p class="avanco">X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p></div>
Observe o que mudou:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Todas as tags <p> foram fechadas no final da linha.

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif A primeira tag <p> não recebeu formatação especial nenhuma, para manetr o texto alinhado todo à esquerda (padrão).

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif A partir da segunda tag <p>, cada uma recebeu o class="avanco", onde essas receberão o avanço especificado no CSS (text-indent: 30px;).

Compreendeu? Era isso mesmo? Mas outro detalhe: Isso só vai acontecer "certinho" se o conteúdo do seu parágrafo avanco ocupar uma linha apenas. Caso contrário, se houver uma quebra de linha (mesmo sem a tag <br />, pode ser por causa do espaço que ele ocupa no browser ser menor e não consegue, por esse motivo, comportar todo o texto em apenas uma linha), a linha debaixo não avançará... Ok?

 

Espero que tenha ajudado mais um pouco... Qualquer coisa, volte a postar! Abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, se está funcionando (ie6 e ff2) e não tem coisa errada, não irei me estressar por causa disso. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Paulo, valeu pela esplicação tbm.

 

Valeuu

Ops... Agora eu entendi o que você quis dizer... Na verdade, eu tinha interpretado o seu código de modo "visual", e não tinha me atentado ao título do tópico e tb à resposta do #INSIDE#... Percebi que você quer que cada parágrafo fique afastado um do outro, né? Por isso o uso de duas tags <br />...

 

Mas mesmo assim, tenho uma sugestão: você não precisa necessariamente usar essas duas tags para conseguir o q você realmente quer. Se você não estiver usando uma propriedade CSS assim:

* {	margin: 0;	padding: 0;}
você pode, simplesmente, a cada parágrafo, abrir e fechar a tag <p>... Assim, no seu caso, o q deve ser feito é quase o mesmo exemplo que te passei, só que sem as class:
<div class="destaque_right_xxxxx"><!-- destaque right xxxxx--><h1>Titulo Texto</h1><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p></div>
Eu acho dessa forma mais semântico ainda, já que a tag <p> já diz: ela é uma tag de parágrafo. Logo, a cada parágrafo, você inicia uma nova tag <p>. A tag <br /> é uma simples quebra de linha, ou seja, este efeito de espaçamento que você quer dar, como te falei, se você não usou uma propriedade CSS como citei, você conseguirá com esse código que te passei acima... (No seu caso, você não está querendo só quebrar a linha, você está querendo iniciar um novo parágrafo e ainda dar um espaçamento entre os dois, por isso usar uma tag <p> para cada um é mais correto ainda)...

 

Ok? É isso... Qq coisa, volte a postar!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pessoal,só pra avisa, eu fiz assim:...

<div class="destaque_right_xxxxx"><!-- destaque right xxxxx--><h1>Titulo Texto</h1><p>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br/><br/>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br/><br/>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br/><br/>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br/><br/>X xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.<br/></p></div>

...e o retorno foi positivo, minha pagina passou na validação do w3c, antes ele dava vários erros por causa da não colocação da barra (pelo que eu conclui).Paulo, valeu por mais um explicação.Valeuuuu.

Compartilhar este post


Link para o post
Compartilhar em outros sites

É bom lembrar que só porque validou não quer dizer que seja a forma mais semântica de fazer isso http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom, mas atente-se ao seguinte: não se esqueça que a barra deve ter um espaço antes... Assim:

<br />
Não me lembro direito o pq desse espaço, mas me parece que tem ligação com diferença de browsers ou coisa do gênero... Então, para evitar dores de cabeça, seria bom alterar para a maneira correta, como indiquei... Além disso, o que o #INSIDE# falou é muito importante... As pessoas acham que se a página passa na validação, o site dela está perfeito, e não é bem por aí... O mesmo acontece com aqueles que estão migrando para Layouts CSS e mesmo assim ainda usam tabelas na estrutura... E falam: Mas eu validei a página e não apresentou erro nenhum... Tá, ela não apresentou erro na marcação, no código, na maneira como foi escrito, isso é o que o Validador avalia... Mas não existe um Validador de semântica... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

O que o validador avalia e se seu código não apresenta nenhum tipo de erro quanto à sintaxe, como esquecer uma aspa, ou trocar uma vírgula por um ponto-vírgula, esquecer de colocar a barra nas tags vazias (como a tag <br />, a tag <img />, entre outras)...

 

Ok? Boa sorte!

Compartilhar este post


Link para o post
Compartilhar em outros sites

A tag BR destina-se a 'pular uma linha' e não há sentido usar-se mais de uma de cada vez.

O código proposto (com duas tags BR) destina-se a obter o efeito de quebra de linha (uso correto) e de espaçamento (uso errado) entre linhas.

A regra número um e a própria razão de ser das CSS reza: 'Separar conteúdo de apresentação'

 

Se você está espaçando (apresentação) com uma das BR está ERRADO sob o ponto de vista das Wewb Standards.

 

Para espaçar linhas existe a propiedade CSS line-height.

Resumo: Para obter o efeito desejado use:

HTML
<p class="diferente">
Lorem ipsum dolor sit amet, consectetuer <br />
adipiscing elit. Morbi eleifend, purus quis <br />
laoreet faucibus, ante augue malesuada mi,<br />
id rhoncus augue lorem eget elit. 
<p>

CSS
p.diferente {line-height:2.5;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.