1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.
  2. Informação: Pela 0:30 desta Sexta-feira (9 de Dezembro, 23:30 de Quinta-feira nos Açores) o Fórum e restantes sites da ZWAME vão estar offline para manutenção durante cerca de 1h30.
    Se necessário faremos actualizações via Twitter e Facebook.
    Remover anúncio

CSS

Discussão em 'Web Development' iniciada por mpLopes, 8 de Fevereiro de 2007. (Respostas: 11; Visualizações: 855)

  1. mpLopes

    mpLopes Power Member

    Boas..

    Tenho o seguinte problema.

    tenho definido o seguinte no CSS:
    Código:
    	#principal h3 {
    		width: 680px;
    		border-top: solid 1px #000000;
    		border-bottom: solid 1px #000000;
    		text-indent: 30px;
    		padding-top: 3px;
    		padding-bottom: 3px;		
    		float: left;
    	}
    
    	#principal h3 span 
    	{
    		float: right;
          	font-size: 8pt;
    		color: #000000;		
    	}
    Isto dá uma linha de texto, com uma linha por cima e outra por baixo..
    E a intenção é: ter o h3 (que é um titulo) do lado esquerdo, e na mesma linhda ter o span (que é uma data) exactamente na mesma linha. Com o safari isso acontece.
    Com o firefox fica o h3 do lado esquerdo mas uma linha em cima do span.
    Nao ficam na mesma linhda..

    Alguem pode dar uma mao?

    Cumprimentos.
     
  2. alph

    alph Power Member

    Não uses as propriedades float. Em vez disso usa "display: inline;" no h3. E metes o span fora do h3.

    Exemplo:

    Código:
    <h3 style="display: inline;">titulo</h3>
    <span>data</span>
     
    Última edição: 8 de Fevereiro de 2007
  3. mpLopes

    mpLopes Power Member

    não me resolve o problema..
    :(
     
  4. SoundSurfer

    SoundSurfer Power Member

    metes o span fora do h3, antes.
    metes o width do h3 mais pequeno, e podes tirar o float.
     
  5. ruimoura

    ruimoura Power Member

    Se meteres em ambos o "display: inline;" devia dar (tirando os floats)
     
  6. mpLopes

    mpLopes Power Member

    ficam os dois na mesma linha, mas juntos..e eu quero a data do lado direito escostada á direita, e o texto da esquerda a começar do lado esquerdo.
     
  7. ruimoura

    ruimoura Power Member

    Pá, desculpa, disse aquilo sem experimentar. Já consegui. Tu estás a estruturar mal o código.

    No html meti assim, dividindo o h3 em duas classes, esquerda e direita:
    No CSS meti assim:
    Assim terás o resultado pretendido. É só retirar as formatações do h3 e metê-las nas classes respectivas. Era isto?
     
  8. mpLopes

    mpLopes Power Member

    Parece-me bem..muito obrigado.
    Pelo menos no firefox está a funcionar bem.. vou aguardar que alguem que tenha o safari à mao me possa dizer como fica no safari..

    Obrigado mais uma vez..
     
  9. pesta

    pesta Power Member

    Já agora e para não estar a abrir outro tópico...
    É impressão minha ou o "border" cresce de forma diferente no Opera/Mozilla e no IE? Como é que resolvo isto? Ainda me estou a iniciar...
    Obrigado
     
  10. pesta

    pesta Power Member

    Já resolvi... Há 2 box models lol
    Enfim isto há com cada coisa...
     
  11. artideias

    artideias Power Member

    pois isso acontece no Firefox, ele flutua à direita mas na linha livre do fluxo de html. O mais simples, talvez, era colocares o span com a data no HTML primeiro que o texto do h3, ele assim não assume que a primeira linha esteja ocupada e ocupa-a

    Código:
     <h3><span>10/02/2007<</span> TEXTO DO H3 </h3>
    Se isso não te for conveniente podes sempre colocar o texto do h3 detro de outro elemento que flutua á esquerda e ele assim ja nao assume que a primeira linha esteja ocupada, tipo:

    Código:
    <h3><em>TEXTO DO H3 </em><span>10/02/2007</span> </h3>
    Código:
    h3 em { float: left }
    h3 span { float: right }
    
    ou ainda

    Código:
    <h3>TEXTO DO H3<span>10/02/2007</span></h3>
    e no CSS:

    h3 { position: relative }
    h3 span { position: absolute; top: 0; right: 0 }

    ele como o texto está dentro do h3 ele assume sempre que ocupa a primeira linha, o span com float: left or right vai sempre contar na linha disponivel que neste caso é a segunda pois a primeira esta ocupada, se colocares e o texto dentro de outro elemento, exemplo do <em> com float, ele não acupa nenhuma linha mas fica como flutuante nessa linha.

    penso que seja este o caso, mas CSS do W3C deve explicar isso
     

Partilhar esta Página