CSS

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.
 
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:
mpLopes disse:
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.
Clicar para expandir...

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:
<div id="principal">
<h3>
<div class="left">Rui Manuel Moura</div>
<div class="right"> 12 - 03 - 2007 </div>
</h3>
</div>
Clicar para expandir...
No CSS meti assim:
#principal h3 {
width: 680px;
border-top: solid 1px #000000;
border-bottom: solid 1px #000000;
text-indent: 30px;
padding-top: 3px;
float: left;
padding-bottom: 3px;

}

.left
{
font-size: 8pt;
color: #000000;
float: left;
}

.right
{
font-size: 8pt;
color: #000000;
float: right;
}
Clicar para expandir...
Assim terás o resultado pretendido. É só retirar as formatações do h3 e metê-las nas classes respectivas. Era isto?
 
ruimoura disse:
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?
Clicar para expandir...

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..
 
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
 
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
 
Inicie sessão ou registe-se para poder participar.
Back
Topo