Question: okay I made my layout with Photoshop how do I make it auto slice and I need help with the css part so the buttons change when I go over them? I was also wondering how to do this without tables I am moving away from table layouts for ever.
here is the current site http://www.technologyforever.com
I want it to be kind of like webmaster-talk.com how they have a layout that is fits multiple sizes at 100%
header http://www.technologyforever.com/head.php
footer http://www.technologyforever.com/foot.php

I created a new thread because it was not about the same thing
The Original post where I just wanted feed back on how it looks

This really isn't my strength, slicing. I would probably take the blue, a pixel wide, and repeat-x across the page as a background image. If you want the lettering to look like that, put it in a gif inside that div. I guess the search box would have a negative top margin.

Then you would define a class for the navs:

.topNav {
background-image:url(black.jpg);
}
.topNav:hover {
background-image:url(green.jpg);
}

There is no 'auto slicing'.. you'll need to make your own 'slices' to fit your layout.

It is not a good idea to use images where plain text will suffice, especially for navigation. It would be better to let loose on the nav text being a non-standard font and just use an unordered list and a bolded Verdana or Arial font. That keeps your menus accessible and the rollovers easier.

What is the best way to get this to do what I need as of now my buttons for home etc are all different lengths so what is the best way to do this without making a mess out of the code I am using html strict

Well, are you going to want to include hovers on it? Are you going to want to do those in Javascript? Would you be okay with the image staying in one piece? You could just make links hover over the intact image too...

It's probably not the best option, but if you're not the best at making CSS code to slice it it would be a good way to do it.

slicing am image for a website can be really tricky, if you are really smart you can reduce the size of the downloaded images for baground, this is helful especialy when your site is to be resized in all browser resolutions still keeping the design intact.
for example you can see the blue area in your website have a uniform gradient , so youcan make a small 1 px width slice of the header image and keep it as baground , for those areas where the site name and that search box comes you can cut exactly that area and place in the site, links also can be sliced the same way where the texts comes, for the link text to produce a roll over effect you have to make multiple images of the same link with different colors or placements, for the first some times it may seems difficult for you, but with time you will learn and you will instantly visualize how a design can be sliced intelligently. It all comes with experience only.

This site is broke.

Originally Posted by kiranshotgun

slicing am image for a website can be really tricky, if you are really smart you can reduce the size of the downloaded images for baground, this is helful especialy when your site is to be resized in all browser resolutions still keeping the design intact.
for example you can see the blue area in your website have a uniform gradient , so youcan make a small 1 px width slice of the header image and keep it as baground , for those areas where the site name and that search box comes you can cut exactly that area and place in the site, links also can be sliced the same way where the texts comes, for the link text to produce a roll over effect you have to make multiple images of the same link with different colors or placements, for the first some times it may seems difficult for you, but with time you will learn and you will instantly visualize how a design can be sliced intelligently. It all comes with experience only.
just check this site for affordable web designing webdesignseo.co.uk solutions, they may be able to help you till you learn the tricks