[Resolvido] line-height em outros browsers

[Kaue Machado 0]

é o seguinte nesse site: http://www.dev.imak.com.br/

onde está "temos um problema..." eu estou trabalhando da seguinte forma:

 

nesse texto todo são 8 tags <span>, com uma tag <br /> após cada span. para definir o line-height de cada <br /> eu defini 5 classes:

.br1 {line-height: 20px;}

.br2 {line-height: 40px;}

.br3 {line-height: 60px;}

.br4 {line-height: 80px;}

.br5 {line-height: 100px;}

 

Esse método está funcionando bem no firefox4 e ie9, mas em todos os outros todas as <br /> tem o mesmo tamanho, ou seja, acredito que as classes que eu defini não estejam sendo aplicadas nos outros browsers, alguém sabe o porque?

[William Bruno 1501]

sem sentido e meio sujo isso.

 

oque é o <br /> para voce ?

[Kaue Machado 0]

sem sentido e meio sujo isso.

 

oque é o <br /> para voce ?

Pra mim é uma quebra de linha rsrs...

mas não estou aplicando essas classes para todo text, apenas nesse que está em roxo. E fazendo mais alguns testes verifiquei que esse problema só acontece quando aplico a classe à tag <br />. A solução que eu encontrei foi diminuir o line-height e aumentar a distancia do topo da primeira linha ("temos um") para diminuir o espaçamento com a segunda linha, e aumentar o line-height da segunda linha ("problema...") para aumentar a distancia do h2.

Apesar de que preferiria usar o metodo da tag br... Mas se souber de outro metodo que eu possa usar eu agradeço =]

 

(ps: valeu por aquela dica de validar o html, usei alguns validadores e tinha meia duzia de erros aqui!)

[William Bruno 1501]

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

 

o problema é que falta muita semântica nesse teu html

muita mesmo.

 

você fez tudo com <span> ! span é vazio.

 

ali eu vejo um possivel titulo, ou algo 'forte' que merece atenção [temos um problema], e um texto.. uma frase.. um paragrafo.

 

pq você usou <span> em tudo ?

se podia ter feito com um strong, e um p ?

 

semanticamente falando, essa tua quebra, não é uma quebra de <br />

você poderia fazer, um strong, limitado em largura, e definir o line-height para esse strong.

 

assim a altura da linha do strong que definiria a distancia entre o temos um e o problema.

Ai noto que o problema é maior que o temos um. Se quiser forçar e seguir a risca, joga um header qualquer (h3, h4..) em tudo, e o strong apenas na palavra problema.

 

as possibilidades são diversas !

 

'nem so de span e div vive um desenvolvedor tableless'

wbruno

[Kaue Machado 0]

Bom, o motivo de eu ter usado span é que no começo do projeto, esses textos seriam uma linha só, ocupando toda a area do content, com estilos diferentes, então se eu separasse os textos com <p class=""> eu não conseguiria um texto com uma linha só. Depois modifiquei o projeto para o texto ser divido em varias linhas, mas não mudei as tags.

Acho que o melhor jeito vai ser esse mesmo, trabalhar com tags <h> e <strong> nas headings e definir a distancia da heading para o topo e os paragrafos com margin. Vou fazer algumas modificações e já posto o resultado...

[William Bruno 1501]

no caso das tuas quebras, na frase... eu faria com um <p> limitado em largura

 

assim quebraria pelo fluxo do html.

Ta suja a tua marcação como um todo.

 

você ta usando divs desnecessariamente.

Pra que por exemplo a, #logotipo ??

 

qndo poderia ter feito simplesmente:

<a href="http://www.imak.com.br" id="logolink">Imak Webstudio Multimidia</a>

?

 

e falta semântica nisso ainda! pois o logo em si, você não fez com uma imagem, mas sim o background de algo lá que não tinha nada a ver!

 

 

ou então, #facebook ? joga esse ID direto na tag iframe!

não precisa da div englobando.. a tag iframe aceita id !

 

e pq <p> nas redes sociais ?

 

 

tem coisas falhas, espero que você entenda as criticas.. tentei falar de uma forma 'descontraida'. Desculpe se me excedi.

[Kaue Machado 0]

Rsrs não esquenta, estou começando agora a fazer sites na mão, antes eu usava o joomla e só mechia nos estilos (ou seja, não programava)...

Esse projeto está sendo muito bom para eu melhorar minha "estratégia" de desenvolvimento, então suas criticas estão ajudando bastante.

 

A sua idéia do <p> único limitado acho que não daria muito certo, porque se eu fosse limitar pela maior frase a largura, a "segunda frase" teria o mesmo tamanho, tipo isso:

------------------------------------------| (<< limite de <p>

parece que nosso novo site

ainda não está pronto!

mas não se preocupe

desenvolvemos um contador

para você ficar atualizado!

------------------------------------------| (<< limite de <p>

 

posso estar enganado, mas acredito que o "mas" subiria uma linha, e o "desenvolvemos" também, e o "para você" também. enfim, acho que deu pra entender o que to pensando.

 

O #facebook, vou tirar essa div e jogar a id no iframe. O <p> das redes sociais já tinha tirado =] . Já o logotipo foi por escolha mesmo, porque a imagem de fundo tem um drop shadow, com transparencia, se eu colocasse outra imagem, além de ficar alguns Kb mais pesado, os drop shadows do logotipo e do fundo iriam se sobrepor, e deixar uma drop shadow mais escura na area do logotipo, e iria diferencia do resto do dropshadow do fundo. Então apliquei um fundo transparente de 1x1px à div do logotipo. Já fiz aquelas alterações, agora vou ver esses detalhes, valeu pelas dicas =]

 

Aproveitando o tópico, será que tem como você tirar uma dúvida minha?

Na barra de redes sociais estou usando dois plugins jquery, um que faz um efeito "onHover" de transparência, e outro que faz aparecer "tooltips" (baloes de dialogo), e os dois usam classes. A pergunta é: eu posso usar duas classes na mesma tag? por exemplo <div id="" class="" class=""></div>? E se for possível, como saber qual classe vai prevalecer quando as duas classes tiverem uma mesma propriedade em comum? Agradeço, denovo.

[Kraken 0]

Aproveitando o tópico, será que tem como você tirar uma dúvida minha?

Na barra de redes sociais estou usando dois plugins jquery, um que faz um efeito "onHover" de transparência, e outro que faz aparecer "tooltips" (baloes de dialogo), e os dois usam classes. A pergunta é: eu posso usar duas classes na mesma tag? por exemplo <div id="" class="" class=""></div>? E se for possível, como saber qual classe vai prevalecer quando as duas classes tiverem uma mesma propriedade em comum? Agradeço, denovo.

 

Olá,

 

É incorrecto de se usar duas class dentro da mesma div. O que você pode fazer é colocar dentro da class várias referências de CSS, do tipo:

 

<div id="" class=".br1 .br2 .br3">

 

Segundo, não tem muita lógica você utilizar a mesma propriedade de CSS na mesma class. Porque faria isso? O que estará a pensar?

 

Cumps,

Kraken

[Kaue Machado 0]

Kraken, fiz alguns testes aqui e aplicando class="" class="" também funciona, mas do jeito que você disse o código fica mais limpo, é bem melhor.

Em situações ordinarias eu não aplicaria duas classes. O problema é que os dois pluguins jquery que eu uso pedem para eu definir uma classe para aplicar o javascript. Eu poderia definir que os 2 plugins usassem a mesma classe, o problema é que se eu quiser aplicar apenas 1 dos plugins em um elemento, não vou ter essa opção, então o jeito é aplicar multiplas classes individualmente...