Help with the HTML code

**davidneff** · 05-31-2012 09:39 AM

Hello,

I am a noob at coding and developing websites. I have created a website template for a client and want to transfer the PSD template into HTML/CSS. I want to know what <div> class/ids I need and how to do it. I know HTML pretty well and learning CSS. I'd appreciate the tips that you can give me.

Here is a JPEG version of the PSD.

**davidneff** · 05-31-2012 09:43 AM

Edit: With the PSD, I'd also like to know what I need to slice.

**absolutmgd13** · 05-31-2012 09:45 AM

i would recommend looking at the website in pieces. just by quickly looking i would say DIV-wise you'd want:

#container

#header-wrap
.header

#nav-wrap
.nav

#content-wrap
.content

#footer-wrap
.footer

i like to make sure i leave all options open which is why im using a wrapper for each ID and putting a class inside of it.

for the navigation, i would use an inline UL, it will probably be easiest. you can find simple tutorials for it online.

edit...you really don't need to slice anything except pulling out the images and header if you'd like. just use background colors.

**davidneff** · 05-31-2012 09:47 AM

Thanks. Once I make the naked layout, how do I get background and the other stuff that I have on the webpage that I want (see JPEG for details)?

**absolutmgd13** · 05-31-2012 10:04 AM

css would be your best bet if you don't mind the shade of red being slightly different per browser, not real noticeably though. CSS: background-color:#COLOR;, grab the hex color using the eyedropper in photoshop.

if your nav has a shadow (seems like it but the jps is very low quality on the img hosting site) i would slice that out.

heres a quick template i threw together:

HTML Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
a{}
a:hover{}
p{line-height:14px;margin:10px 0}
#container{width:950px;height:auto;position:relative}
#header-wrap{width:950px;height:200px}
.header-img{float:left;width:300px;height:200px}
.header-txt{float:left;width:6px;height:200px}
#nav-wrap{width:950px;height:50px}
#content-wrap{width:950px;height:auto}
#footer-wrap{width:950px;height:100px}
.header,.nav,.content,.footer{width:950px}
</style>
</head>

<body>

<div id="container">

<div id="header-wrap">
	<div class="header"><div class="header-img"></div><div class="header-txt"></div></div>
</div>

<div id="nav-wrap">
	<div class="nav">
	<ul>
	<li>Home</li>
	<li>About</li>
	<li>Contact</li>
	</ul>
	</div>
</div>

<div id="content-wrap">
	<div class="content"><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p></div>
</div>

<div id="footer-wrap">
	<div class="footer">asdasdasd</div>
</div>

</div>

</body>
</html>

**davidneff** · 05-31-2012 01:06 PM

What parts of the PSD do I need to slice?

**absolutmgd13** · 05-31-2012 01:26 PM

i would say slice out the images themselves(logo and church), then slice only about 2px wide of the navigation sliver with no text, then set it as a background image in the nav, then use the UL to create the navigation.. do you have firefox + firebug? if not i would suggest getting it. then you can look at code from other sites and see how they do it.

the rest can be done with background colors and borders

edit... youll have to adjust the dimensions of the DIV as necessary. i just chose random height and widths

**Major Payne** · 06-01-2012 06:17 PM

Online PSD to HTML Converters (Some Free):

http://jadii.com/ (May be free)

40 Options for Converting PSD to HTML - http://vandelaydesign.com/blog/desig...html-services/

From PSD to HTML: Building a Set of Website Designs Step by Step: http://nettuts.com/site-builds/from-...-step-by-step/

**qwert987** · 06-04-2012 10:51 AM

how can i set the frequency of the server sent events in html 5?

**absolutmgd13** · 06-04-2012 02:36 PM

http://dsheiko.com/weblog/html5-and-server-sent-events

Thread: Help with the HTML code

Thread Tools

Display

Help with the HTML code

divs

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions