4

Olá,

Sou iniciante de XHTML e peço que me falem deste código e não do html5.

Quero fazer um cabeçalho mas não estou a conseguir. O objetivo é que o primeiro texto fique mais em cima que o primeiro. Vejam a imagem do exemplo sf.

Estou em dúvida tanto no xhtml como no css. A caixa é para colocar como primeiro elemento do site.

2 Respostas 2

5

Um pequeno exemplo de como conseguir isso, utilizando apenas CSS.

Existe mais uma infinidade de outras formas de conseguir o mesmo resultado.

HTML:

<div class="FUNDO">
    <span class="CIMA">Título do site</span>
    <span class="BAIXO">Outro texto</span>
</div>

CSS:

.FUNDO {
    margin: 0px;
    padding: 0px;
    position: relative;
    font: normal 30px sans-serif;
    color: #fff;
    background-color: #ccc;
    height: 220px;
}
.CIMA {
    position: absolute;
    left: 25px;
    top: 25px;
}
.BAIXO {
    position: absolute;
    right: 25px;
    bottom: 25px;
}

O exemplo pode ser testado ao vivo nesse Fiddle.

2
  • Carlosraelgn agradeço imenso a sua ajuda. 5 estrelas. Muito obrigado, mesmo. Só fiquei com uma dúvida: porquê que não podemos usar div id e p class? O div id não é unico?
    – David
    Commented 13/06/2014 às 0:59
  • @David pode-se utilizar o id, sim, e em vez de span, p. Foi só um exemplo :) Commented 13/06/2014 às 11:53
5

Como já respondido pelo @carlosrafaelgn, existem várias maneiras de se fazer o que você pretende.

Usei a mesma técnica proposta por ele, e fiz apenas algumas alterações estruturais. Originalmente ia por como comment na resposta já existente, mas ia ficar ilegível, então acabei postando em separado. De qualquer forma, a resposta original já ganhou meu +1.

A diferença basicamente é o uso de tags semânticas no lugar dos divs, para preservar a estrutura lógica da página independentemente do CSS.

No caso, usei o <p> para mero texto informativo na segunda linha de texto, mas você pode usar <h2> se for um subtítulo, por exemplo. O importante é usar a tag que melhor identifica o sentido do conteúdo que lá está.

HTML:

<div id="cab">
   <h1>Título do site</h1>
   <p>Outro texto</p>
</div>

CSS:

#cab    { position: relative;
          margin: 0;
          padding: 0;
          height: 200px; }

#cab h1 { position: absolute;
          top: 25px;
          left: 25px; }

#cab p  { position: absolute;
          bottom: 25px;
          right: 25px; }

Como usamos tags diferentes para as duas linhas, ficou desnecessário especificar classes, e para isso bastou usar o seletor de descendente.

Veja em funcionamento no JSFiddle.

7
  • Sim, concordo contigo! É melhor não utilizar spans genéricos, mas elementos com significados mais específicos :) Mas se fosse para utilizar p, teria que configurar o text-align, para right ;) Commented 13/06/2014 às 11:50
  • @carlosrafaelgn chegou a ver o fiddle? Testei no Opera/Presto, Chrome, IE 11, IE 6 (!), e FF, e todos se comportaram bem. O <p> com absolute teoricamente não fica com width 100% do parent, então funciona como esperado. Mas se achar algum browser "dissidente" neste aspecto me avise, que reviso de acordo.
    – Largato
    Commented 13/06/2014 às 13:16
  • Pois é! Não me atentei a isso, não! Ficou joinha, mesmo! Falha minha :( Commented 13/06/2014 às 13:20
  • @carlosrafaelgn grato de qualquer forma. Eu entendi sua preocupação, normalmente precisa sim, por causa do 100%. É que justo neste caso específico, a exceção acabou ajudando.
    – Largato
    Commented 13/06/2014 às 13:22
  • Obrigado a todos pela ajuda :) Na verdade estou a fazer um layout liquido com xhtml e portanto penso não poder usar pixeis. Em vez disso penso que tenho de usar a percentagem. Confesso que está a me dar alguma dor de cabeça.
    – David
    Commented 13/06/2014 às 22:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .