Ok ive uploaded my background images(header, logo,footer etc) and Ive used the div id tag on each section, but each image comes one after another down the page, and also there is a little gap between the images.

 

I need to centre the images and also move the sidebar image to the right as a colum,

Any thoughts on doing this in css???

 

cheers!!

Do you have a link or some code?

Do you have a link or some code?

 

Should have thought of that.....

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>PSD vs NET</title>

<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />

</head>

 

<body>

 

<div id="header">

<img src="images/header.gif" />

</div>

<div id="content">

<img src="images/content.gif" />

</div>

<div id="sidebar">

<img src="images/sidebar.gif" />

</div>

<div id="footer">

<img src="images/footer.gif" />

</div>

 

</body>

</html>

 

 

 

 

Basically the sidebar i have is coming under the content image, but i need this beside the content page.

When i try move it in css it wont move up in line with the content image.

 

Also there are very small gaps between the images, eg betwwen the header and the content image....

Without seeing the images, it's a little difficult but here's some css for you:

ps I've made the images background images assuming you are going to put content over the top of them.

#header {
width:770px;/*change the width and height to whatever size your background image is */
height:200px;
background: url (images/header.gif) top center no-repeat;
}
#content {
float:left;
width:569px;/*again change this to whatever you need*/
height:400px;
background: url (images/content.gif) top center no-repeat;
}
#sidebar {
float:right;
width:200px;
height:400px;
background: url (images/sidebar.gif) top center no-repeat;
}
#footer {
clear:both;
width:770px;
background: url (images/footer.gif) top center no-repeat;
}

 

You should wrap your divs in another div(lets call it 'wrapper') to center your site.

 

<div id="wrapper">
<div id="header">
<img src="images/header.gif" />
</div>
<div id="content">
<img src="images/content.gif" />
</div>
<div id="sidebar">
<img src="images/sidebar.gif" />
</div>
<div id="footer">
<img src="images/footer.gif" />
</div>
</div> <!--end of wrapper-->

 

and style it like this:

#wrapper {
width:770px;
margin:0 auto;
}

Without seeing the images, it's a little difficult but here's some css for you:

ps I've made the images background images assuming you are going to put content over the top of them.

#header {
width:770px;/*change the width and height to whatever size your background image is */
height:200px;
background: url (images/header.gif) top center no-repeat;
}
#content {
float:left;
width:569px;/*again change this to whatever you need*/
height:400px;
background: url (images/content.gif) top center no-repeat;
}
#sidebar {
float:right;
width:200px;
height:400px;
background: url (images/sidebar.gif) top center no-repeat;
}
#footer {
clear:both;
width:770px;
background: url (images/footer.gif) top center no-repeat;
}

 

You should wrap your divs in another div(lets call it 'wrapper') to center your site.

 

<div id="wrapper">
<div id="header">
<img src="images/header.gif" />
</div>
<div id="content">
<img src="images/content.gif" />
</div>
<div id="sidebar">
<img src="images/sidebar.gif" />
</div>
<div id="footer">
<img src="images/footer.gif" />
</div>
</div> <!--end of wrapper-->

 

and style it like this:

#wrapper {
width:770px;
margin:0 auto;
}

 

WOW!!! thank you soooo much

I can guarantee that things will need altering to suit your site but it should get you on your way.

If you get stuck, just ask.