How to create a box with two separate texts

Question

Hello,

I am a beginner of XHTML and I ask you to tell me about this code and not Html5.

I want to make a header but I’m not getting it. The goal is for the first text to be higher than the first. See the image from the example sf.

I am in doubt in both xhtml and css. The box is to put as the first element of the site.

Answer 1

A small example of how to achieve this using CSS only.

There are a multitude of other ways to achieve the same result.

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;
}

The example can be tested live in that Fiddle.

Answer 2

As already answered by @carlosrafaelgn, there are several ways to do what you intend.

I used the same technique proposed by him, and made only a few structural changes. Originally I was going by how comment in the existing answer, but it was going to be unreadable, so I ended up posting separately. Anyway, the original answer already won my +1.

The difference is basically the use of semantic tags instead of divs, to preserve the logical structure of the page regardless of the CSS.

In case, I used the <p> for informative text in the second line of text, but you can use <h2> if it is a subtitle, for example. The important thing is to use the tag that best identifies the meaning of the content there.

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; }

As we use different tags for the two lines, it was unnecessary to specify classes, and to do so just use the descending selector.

See working on Jsfiddle.