Hello,
I am a beginner of XHTML and I ask you to tell me about this code and not html5.
I want to do a header but I can not. The goal is for the first text to be higher than the first. See the example image sf.
I am in doubt as much in xhtml as in css. The box is to be placed as the first element of the site.
A small example of how to achieve this, using only CSS.
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 sample can be tested live on this Fiddle .
As already answered by @carlosrafaelgn , there are several ways to do what you want.
I used the same technique proposed by him, and made only a few structural changes. Originally I went by as comment in the existing answer, but it was going to be unreadable, so I ended up posting it separately. Anyway, the original response has already earned my +1.
The difference basically is the use of semantic tags in place of div s, to preserve the logical structure of the page regardless of CSS.
In this case, I've used <p> for mere informational text in the second line of text, but you can use <h2> if it's a subtitle, for example. The important thing is to use the tag that best identifies the meaning of the content that is 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 used different tags for the two lines, it became unnecessary to specify classes, and for that we just had to use the descendant selector .
See working in JSFiddle .