Skip to main content
replaced http://pt.stackoverflow.com/ with https://pt.stackoverflow.com/
Fonte Link

Como já respondido pelo @carlosrafaelgn@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 descendenteseletor de descendente.

Veja em funcionamento no JSFiddle.

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.

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.

adicionou 86 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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.

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.

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.

adicionou 80 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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

ÉUsei a mesma técnica proposta por ele, come fiz apenas algumas alterações estruturais. Como nãoOriginalmente ia caber num comment, posteipor 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 é a sugestãoo uso de se usar tags semânticas no lugar dos divsdivs, 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.

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

É a mesma técnica proposta por ele, com algumas alterações. Como não ia caber num comment, postei como resposta. De qualquer forma, a resposta original já ganhou meu +1.

A diferença basicamente é a sugestão de se usar tags semânticas no lugar dos divs, para preservar a estrutura 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.

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.

Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando