CODEWITHSUNDEEP
htmlcss
Shahin
Shahin

Reputation: 12843

Web design from template

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 :

Please explain me. Mentioned Image

Upvotes: 0

Views: 212

Answers (4)

Thamaraiselvi
Thamaraiselvi

Reputation: 21

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>

Upvotes: 1

Jon P
Jon P

Reputation: 19772

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!

Upvotes: 1

Mr.T.K
Mr.T.K

Reputation: 2356

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

Upvotes: 2

Mahesh
Mahesh

Reputation: 34625

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>

Upvotes: 1

Related Questions