Help converting PSD to CSS

DezUk · 4 Jan 2012 at 22:43

It's been a while since I did a website design from scratch, I have the design done and the PSD finalised, you can see it here

I have already started to create the design using simple CSS and HTML and so far have this

The CSS looks like this so far:

Code:

html, body {
	margin: 0;
	padding: 0;
	background: url(images/bg.gif) repeat-x;
}

#container {
	width: 665px;
	margin: auto;
	background: red;	     
}

#header	{
	position: relative;
	width: 665px;
	height: 80px;
	background: url(images/header.jpg);
}

#nivoslider	{
	position: relative;
	width: 665px;
	height: 240px;
	background: darkblue;

I need help on how to best split the site, I ideally want to add the nivo slider jQuery app where the mac banner is so that this will change. But I am not sure how to do this so the image of the woman with thge arms in the air will work properly.

I assume the best way to do the bottom of the site is to split it into 2 columns, one side for text and one side for the twitter feed?

Also one other thing is the drop shadow, how can I best achieve this?

Just looking for tips and ideas.

Thanks in advance

DezUk · 5 Jan 2012 at 09:42

Can anyone help me with this?

Cheers

Riddell · 5 Jan 2012 at 09:54

I can't answer your main question but the box shadow is a CSS3 property which can be applied to divs like so:

div {
box-shadow: 2px 2px 2px 2px #000000;
}

ie:

box-shadow: horizontal shadow, vertical shadow, blur, spread, color;

DezUk · 5 Jan 2012 at 09:57

Isns't CSS3 not supported properly by most browsers, there must be an oldskool way to do this?

Riddell · 5 Jan 2012 at 10:00

DezUk said:
Isns't CSS3 not supported properly by most browsers, there must be an oldskool way to do this?

Here's what's compatible:

http://www.findmebyip.com/litmus/

Staffy · 5 Jan 2012 at 13:36

As with most things web site based there are many ways to get the same effect. Here's just some quick thoughts to hopefully help.

Drop shadow: old school & easy would be to have a div in the centre with a div running down each side. You would then cut the image of the drop shadow out of the psd and repeat it down those two outside divs ideally using css sprites.

The twitter content area would be two divs one twitter, one content and these would need to be floated and contained in the centre div.

The header if you really want the woman in there then you may have to move the position of the image slightly down or maybe set the image as a background image and use some transparency on the divs above it.

DezUk · 5 Jan 2012 at 20:34

Thanks for the advice Staffy. I silly question but I assume you would do something like this all in notepad and link the CSS to HTML file?

Or is there a decent piece of software for doing this these days, used to be Dreamweaver, is it still the one to use?

Staffy · 5 Jan 2012 at 20:55

If you have access to Dreamweaver then you can use it, or code it by hand with a good text editor notepad++ or something similar.
Another option is to see if you can find someone to do it for you?

Scryus · 5 Jan 2012 at 21:55

Hi there,

Splitting a site into columns is a pretty easy thing to do, you can try using the following

HTML:

Code:

<html>
<head>
 <title>Web page</title>
 <link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="body-left">
 <p>Stuff goes here that you want on the left-hand-side</p>
</div><!-- End Body-Left -->
<div id="body-right">
 <p>Stuff goes here that you want on the right-hand side</p>
</div><!-- End Body-Right -->
</body>
</html>

CSS (called style.css)

Code:

div#body-left {
width: 700px;
float: left;
min-height: 80%;
background: blue;
}

div#body-right {
width: 200px;
min-height: 80%;
float: right;
background: red;
}

Starting from there should be a good bet. The min-height is just to show you on a full page. Good luck.

Also, with the box-shadow idea, Riddell has it right. Anyone who actually updates their browser will have CSS3 and HTML5 working, anyone who doesn't, doesn't deserve nice things!

Staffy · 5 Jan 2012 at 22:08

Also, with the box-shadow idea, Riddell has it right. Anyone who actually updates their browser will have CSS3 and HTML5 working, anyone who doesn't, doesn't deserve nice things

Unfortunately some people don't have that option, those at the mercy of archaic sys admins at work for example.

Scryus · 5 Jan 2012 at 23:57

Staffy said:
Unfortunately some people don't have that option, those at the mercy of archaic sys admins at work for example.

Sadly. Some of those guys who decide they need to stay on IE6 for "security reasons" are out of their minds, though

Riddell · 6 Jan 2012 at 09:04

Yeah, we're still using XP Pro, IE 6 and Office 2003 at my work. Sucks so hard.

spenncerr · 6 Jan 2012 at 09:22

http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/

Staffy · 6 Jan 2012 at 13:22

Sadly. Some of those guys who decide they need to stay on IE6 for "security reasons" are out of their minds, though

I completely agree but if you are running a large site with a lot of non techy users then imagine the headache and hassle that the IT dept would have on a Monday morning. With people coming in and something has changed, and some non techies are that bad.

Scryus · 6 Jan 2012 at 17:49

spenncerr said:
http://net.tutsplus.com/articles/news/slice-and-dice-that-psd/

Haha, wow, this is the tutorial I used when I first started. Nice find, I need to bookmark that for future use.

staffy said:
I completely agree but if you are running a large site with a lot of non techy users then imagine the headache and hassle that the IT dept would have on a Monday morning. With people coming in and something has changed, and some non techies are that bad.

Yeah, you sometimes blame the tech guys, but then you have the workers who can't figure out why no power cable might equal no functioning computer. It's just sad on both parts at times.