View Full Version : Seeking tips on slicing/coding this design

06-06-2012, 07:23 AM
Hello fellow geeks :)

I've sliced and coded a handful of websites but I'm still no expert. Many hours of research and tinkering lay in store for me with each new project that comes across my desk. I'd like to try something different and maybe pick your brains a little bit before I start coding. Maybe some of you can give me some quick advice about things to watch out for going into this.

Here's a design concept the client wants. Here's some of my coding concerns at quick glance:

On the sub-page, the side ribbons and vertical LEAGUES text. How would you guys handle those, position the container relative and the ribbons absolute?
The home page and sub-page have different graphic elements in the header like the bowling pin and banner. Should I code the basic background of the header the same for both types of pages and place images with transparent backgrounds on top? Or should I slice those images right into the header and slice 2 different versions?
What could I do for a page that has longer content as far as that wooden bg look? Stretch the bg vertically? The psd I received only has it go down so far.
Anything else you see that might cause me some headaches?

I would like to code this with html/css, no tables unless you suggest otherwise.

Home Page:

One of the sub-pages:

06-06-2012, 07:41 PM
Thanks iBall, I really appreciate your suggestions. It's really helping me organize how I'm going to approach it.

Given that the bowling pin lies at an angle and runs over the top of the nav, how would I position that rectangular image? Would I just position it where it is and place the nav elements on top of that image, maybe using z-index or something?

I'm going to start tackling this in about an hour. If anyone has anything to add I'd be grateful :)

06-07-2012, 01:20 AM
Well the bowling pin image would be a huge rectangular image file. The top right most point of that image extends past where the nav elements starts, so following that line down to the bottom right of that image, it would overlap the Home, Bowling, and Leagues links making them unclickable since the bowling pin is on top. Wouldn't it?