Hi,

I have to code the following page:

http://www.materialprojects.com/csi/3/cover.html

I want to slice it into sections for divs

I have attached a screenshot of what i think would be the best way to slice it up. Is this the best way?

I think you're missing some of the beauty of css by trying to slice everything. Slicing images it the tables approach to layout.



In the header the solid red area to the right can all be set as a background color using css. For the naviagation bad you really just need the image to be 1px in width and then set it up as a repeating background image {background-image:url(path to image) repeat-x;}

In the body the only part that really needs an image is where you have the curve and the diaganol border between colors. You can grab both with a single image and then use background colors for all the other solid background colors.

You may need to use images for the thin vertical lines with the small horizontal parts in the content are. I'm sure there's a way to create them solely with css, but I'm not thinking of it immediately. It would be something using borders though.

You can slice things the way you described if you want if that's easier. I know a complete css layout is still something new to you and it's possible what I'm suggesting is more complicated than what you're looking for at the moment.

You can slice the images as you've suggested. Just make sure you get the enitre diaganol border between the colors. Your slices are missing the last little bit of the white/gray transition.

Remember that you can slice the backgrounds through where the text is since your text should not be part of the image anyway and should sit in a layer on top of the image.

Hope that helps.

Thanks for that Van, that sounds good, when you say:

Remember that you can slice the backgrounds through where the text is since your text should not be part of the image anyway and should sit in a layer on top of the image.

Do achieve this by using the z-index property? and is there any problems using the z-index relating to cross-browers issues?

Sorry, vangogh, but all that empty space on the right looks terrible. Centering the design would still create empty space, but it would be divided between the left and right sides. I addressed this issue on another forum. Although a little more complex coding-wise, it would result in a more fluid appearing site that looks good in all browser sizes.

Grump

Hey Grump,

Just to let you know it's not my design. It's jwalker80's design and if I'm not mistaken it's for a class. I'm just helping out with coding the design.

I agree with the centered approach when using any kind of fixed width design. Actually I'm a big supporter of creating fluid designs.

I think jwalker80's design is pretty good too. I agree with you that there's empty space to the right, but the design still looks a lot better to me than many sites I see online.

Many larger companies are still designing sites that are fixed width for 800px and aligned to the left. Think IBM and Dell.

I'm also a firm believer in that design aesthetics take a back seat to content. Some of the most visited sites are highly lacking in design aesthetics. Think Yahoo!

jwalker80's design could definitely be improved, but what design doesn't have room for improvement. Overall I still think the design better than many I've seen that were designed by professionals.

I like the slices but then again I'm not too big on CSS but on that note as well I have not learned it so it's hard to say.