Web design from template - html

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

Answer 2

How do I put them on Page ? both of them in one DIV ? or each one in separated DIV ?
Both of them in seperate div and enclosing them in the background image div. I personally prefer span than div because it is plain text.
<div class="backGroundImag">
<span class="text1"> Text goes here </span>
<span class="text2"> Text goes here </span>
</div>

Answer 3

You need to keep in mind the web is not a pixel perfect medium as there are so many variables in play: different browsers, operating systems, screen resolutions etc.
If you are new to web designing, start with something a little more simple. What you have there is a great design that may not immediately translate easily to the web (your search box for a start would provide some interesting implementation challenges).
Don't aim too high early on. Read, practice, repeat. Here is a good article on centered design techniques to get you started:
http://www.webdesignforidiots.net/2009/03/fixed-width-centered-website/
Marked as CW because this is advice and not an answer!

Answer 4

body { margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; }
.wrapper { width:600px; margin:0px auto; background:url(images/bg.jpg) no-repeat; min-height:437px; }
.header { width:144px; margin:0px auto; padding: 25px 0 20px 0; height:130px; } /*If you want logo Seperatly use this step*/
.header h1 { margin:0px; padding:0px; } /*For Seo prupose*/
.content { margin:0px auto; padding:0px; width:480px; }
.content h1 { text-align:center; text-transform:uppercase; font-size:16px; margin:0px; padding:0px;}
.content h2 { font-size:12px; }
HTML
<div class="wrapper">
<div class="header"><h1><!--<img src="images/logo.png" alt="logo" />-->Logo</h1></div>
<div class="content">
<h1>OH BOY WE'RE LOST !</h1>
<h2>THE RESOURCE YOU ARE LOOKING FOR MIGHT HAVE BEEN REMOVED, HAD ITS NAME CHANGED OR TEMPORARILY UNAVAILABLE.</h2>
</div>
</div>