web interface coding prob

riyadh

i made a website in photoshop 800x800 in size.now the problem is tht i want to code it using CSS and slices and not just slices because it is much harder and takes more time.but i don't know how.i'm quite new to coding the whole page in CSS.so can anyone help.where do i slice and how do i code so tht it turns out exactly as in the picture below.

N.B the white box around the home icon is the hover box when the mouse is over one of the three icons.i also need to know how to code tht as well.

mathiaus

Ok you have three main areas in that layout. Your header, content area, and your footer.

Header
You need a full height 1px wide image of the background. This will be repeated.
Take the Logo (including the text if using a strange font)
Take each of three icons and the icons with the hover background
For your links (with those three icons), use :hover to use the image with the hover background
Oh and the RSS image (though I guess you have seperate already)

Content area
In here have two divs. Each with a float:left property and their widths
Take the dark blue bit full height and 1px wide again, repeat across the whole length
The light grey and small darker grey area need no image

Footer
Use the clear:both bit in here to fix the float thing
Again just repeat the image full height and 1px wide

EDIT: my coding shop - This is a simple one so I could have it done quite quickly Smile

Hope that helps Very Happy

Matt

Azmo

Here is a tips, have the same margins everywhere, it don't look good when you have a 800px wide header, and the main site is only 760px wide. Think that a straight line goes down from both sides of your header, where that line is, that's where your main paige should start and end. See it as a pointer to never use a header that's wider or smaller then the main page, cause it just looks funny and it's realy anoying. Good Luck! Smile