Will it be possible, concept design to CSS

[dlw]

Hi all,

I've been given a concept design to convert to HTML, now I have done a couple of sites and have always used CSS but the company normally uses tables so the design isn't really geared towards a CSS layout.

My question is whether the design which can be seen here:

http://point.websights.co.uk/one.html

My css is fairly good. Any suggestions would be welcome.


TIA,
Darren

[The New Guy]

CSS would be perfect for that.

[want2design]

Hi Darren,

I just did a quick slice of how I think you should go about setting the website out. Although this is just my opinion, so you or someone else reading this thread may think of a more convenient method of laying out the website.

The top row would be the dimensions of the top slice (800x170), with the actual top slice image being set as the background.

The second row would be the dimensions of the second slice (800x21), with the actual second slice image being set as the background. I would change the navigation from images to text (to make it easily editable later on).

On the 3 columns in the third row, I have quickly used the scale tool to demonstrate how I think the elements should be placed (I tend to get a bit picky with exact pixel measurements). You'll notice that both the three columns have 20px padding on either side, this is to maintain a consistant feel.

The first column (third row) would be the dimensions of the third slice (120x410), with the actual third slice image being set as the background (top, no repeat), and the background colour as white. This will allow your body content (in column two) to stretch further than your image's height.

The second column (third row) would be 560px wide, with a padding of 20px on all sides (top, right, bottom, left).

The third column (third row) would be the dimensions of the fifth slice (120x140), with the actual fifth slice image being set as the background (top, no repeat), and the background colour as white. Once again, this will allow your body content (in column two) to stretch further than your image's height.

I've missed out a few minor details, but you will be able to fill in the blanks.

Hope this helps!



Edit:

I apologise, my attachment did not work for some reason.

I have uploaded the image to my webhost below:

http://home.swiftdsl.com.au/~bencumm...uick_slice.gif

[dlw]

Excellent, interestingly thats very similar to what I had although I had 2 not 3 columns but I now see the error of my ways.

One problem I was having is gaps between header and nav even with padding and marging set to 0.

[want2design]

Were you nesting your DIV's?

If you can provide the CSS you are using when you get the error with the gaps, we can take a look for you.

[dlw]

ignore me, I was being a muppet. I was embedding the header not having it as a background image so its all sorted.

Thanks for the help.

[want2design]

No worries, glad you got it sorted.