How difficult will it be to put this Photoshop file into XHTML/CSS?

**inwhiterooms** · 01-24-2009 05:33 PM

I am working my way back into web design and I have come up with this template:

http://encmusic.byethost17.com/design.jpg

I have the original Photoshop PSD file and I am trying to convert it to XHTML and CSS. However, I am extremely rusty when it comes to this. Does anyone have suggestions on how to go about turning this design into an actual page?

I know about slicing the Photoshop file, but it seems like it would be harder to do with this file since there are so many things going on in the design. Any help would be appreciated.

**TheTeenScripter** · 01-24-2009 11:28 PM

you could just set the file to be a background of a div using the following CSS attributes:

background:URL('file.jpg'); width:###px; height:###px;

and then you could use more div's and the following CSS attributes to place the content in that main div, over the bg in the correct spots:

position:absolute; top:###px; left:###px; width:###px; height:###px;

and then all you have to worry about is centering the main div.

**TheTeenScripter** · 01-24-2009 11:30 PM

To make the buttons work, you could make a spacer.gif image for multiple <img> tags, size them right, place them over the button locations and turn them into links.

**coothead** · 01-25-2009 06:32 AM

Hi there inwhiterooms,

and a warm welcome to these forums.

Here are our friend TheTeenScripter's suggestions put into an example...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>basic layout</title>

<style type="text/css">
#container {
    width:800px;
    height:542px;
    padding-top:87px;
    margin:auto;
    background-image:url(http://encmusic.byethost17.com/design.jpg);
    background-repeat:no-repeat;
 }
#nav {
    width:380px;
    height:32px;
    margin:0 0 131px 362px;
    padding:0;
    list-style-type:none;
 }
#nav li {
    width:89px;
    padding-right:6px;
    float:left;
 }
#nav a {
    height:32px;
    display:block;
 }
#nav a span {
    display:none;
 }
#left {
    width:209px;
    height:236px;
    margin:23px 0 0 83px;
    float:left;
 }
#left_top {
   height:109px;
   margin-bottom:18px;
 }
#left_bot {
   height:109px;
 }
#left_top ul a,#left_bot ul a {
    color:#000;
 }
#right {
    width:360px;
    height:242px;
    padding:14px;
    margin:0 0 0 36px;
    float:left;
    overflow:auto
 }
#right p {
    margin:0;
    padding-bottom:10px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:0.8em;
    color:#000;
    text-align:justify;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#left,#right {
    display:inline;
 }
</style>
<![endif]-->

</head>
<body>

<div id="container">

<ul id="nav">
 <li><a href="#"><span>home</span></a></li>
 <li><a href="#"><span>about</span></a></li>
 <li><a href="#"><span>services</span></a></li>
 <li><a href="#"><span>contact</span></a></li>
</ul>

<div id="left">
 <div id="left_top">
  <ul>
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li><a href="#">link 3</a></li>
   <li><a href="#">link 4</a></li>
  </ul>
 </div>

 <div id="left_bot">
  <ul>
   <li><a href="#">link 1</a></li>
   <li><a href="#">link 2</a></li>
   <li><a href="#">link 3</a></li>
   <li><a href="#">link 4</a></li>
  </ul>
 </div>
</div>

<div id="right">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
Pellentesque in dui. In eget elit. Praesent eu lorem.
</p><p>
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
metus urna, semper eget, aliquam ac, feugiat nec, massa.
</p
</div>

</div>

</body>
</html>

coothead

**inwhiterooms** · 01-25-2009 01:58 PM

Wow, thanks for all the help! I am still a bit stuck though... What I am trying to do is have the orange background stretch the entire width of the page and then have the green/white part expand as well. I don't want it to be relegated to 800px width.

How would I go about doing this? I want to have the design stretch to the entire size of the browser's window and not have any white space around it. Am I going to need to split up the PSD file into different slices? I'm not even sure what parts I would need to slice.

Thanks again for all your help.

**inwhiterooms** · 01-25-2009 03:07 PM

I was able to get the background to stretch, but I don't know how I am going to get the green/white content section to expand with it. I'm not even sure it will look good. I also changed a couple of things around, namely making one big text box underneath and bumping up the logo. Here is what I have so far:

http://www.wiredmango.net/testing.html

**TheTeenScripter** · 01-25-2009 03:21 PM

for expansion to the screen, you will have to work with percents instead of pixels. also, i noticed (in firefox) that the clickable buttons on top aren't lining up with the button text.

If you are trying to get the green/white section to expand with the bg, you can keep them both as one image and expand that image

Thread: How difficult will it be to put this Photoshop file into XHTML/CSS?

Thread Tools

Display

How difficult will it be to put this Photoshop file into XHTML/CSS?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions