Question

I’m new to web designing.
I started to designing a sample page but I have some challenges.

I have photoshop template like below image.
to convert it to HTML and CSS I fallowed these steps :

• I separated background image with logo then I putted to background of body
• I created main DIV as page container with relative position.
• now I want to put texts to page ( OH BOY WE’RE LOST !) and ( THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR
  TEMPORARILY UNAVAILABLE.)
  I have some questions here :
• How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
• How should I position them to having same position in picture and web site ? is there any specific technique exist ? or should I do i with test and try ?

Please explain me.

Answer 1

Fix the width width:100% of the page div. and give <h1> tag for "OH BOY WE'RE LOST!" with specified width and margin: 0 auto;.

and <p> tag for remaining text that "HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE."

<div class="page">
<h1>OH BOY WE'RE LOST!</h1>
<p>HE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</p>
</div>

css :

.page {
position:relative;
width:100%;
height:auto;
}
.page h1 {
position:absolute;
top:0px;
left:0px;
font-size: /*your font size*/
font-family: /*your font family*/
width:100px; /*you can change the width as per your need*/
margin:0 auto;
}
.page p {
width:98%;
margin:0 auto;
}