How to: Implementing a PSD Template

How to: Implementing a PSD Template - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: How to: Implementing a PSD Template (/showthread.php?tid=13059)

How to: Implementing a PSD Template - Pineapple - 10-21-2010

What you want to first do, is save each individual image and upload them to your site.
The CSS
1. Background

Code:
body

{

background-image:url('http://wwwurltobackground.png');

background-repeat:repeat x,y;

Background-repeat:repeat x,y; will repeat the image you have up and down throughout your website.
X will repeat up
Y will repeat down
no-repeat will not repeat the background.

2. Alignment

Code:
position:absolute; 

 left: x ;

 top:  x;

  width: x;

  height: x;

Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
Width is explanatory, as is height.
(replace X with the numbers you want.)

B. The HTML
1. Using <div> Tags

Code:
<div id="insert section name">Content</div>

The <div></div> tags define the part of the website you are going to call in the CSS.

For example

Code:
#insert section name{

background-image:url('http://www.contentimage.com/contentbackground.png');

 position:absolute; 

 left: 350;

 top: 130;

  width: 676;

  height: 458;

What we did was call the section using #name of div. And then aligned it using the Left, Top, Width, and Height attributes. You can find a list and examples of attributes
Here

Final Product:

main.css (Click to View)

index.html (Click to View)

What we did here was use CSS to align the content box, and to make the text italicized. We also called a background using CSS.