asked on

Slicing images with middle repeating - content box

Hey,

I have this image here i am slicing: http://cl.ly/2Z3h0f1h1i0u121x2J3a

As you can see it has a top part with a slight gradient then the bottom. I am trying to get my content to display within that box.

What is the best way to code that for I can get the middle to repeat, but I can have copy at the top of that content box. So it will look like this at the end: http://cl.ly/0n3F363t0g1i2q2x3B0J - safe if I added in 2000 characters it would expand.

I have those 3 slices in code now, but the middle one repeats from top to bottom, when I hide the bg image, the top shows fine.

Any ideas?

Ryan

Tom Beck

Create a div container as tall as the white box but with variable width.

Inside create three divs with a fixed height as tall as the white box, each has style set to float left.

Put the leftSlice in the first div with a fixed width as wide as the image.

Put the rightSlice in the third div with a fixed width as wide as the image.

In the left and right divs set the background image to no-repeat.

In the variable width, fixed height middle div, put the midSlice as the background image and set it to repeat-x.

Put all content in the middle div.

Sample slices below.
leftSlice.jpg
rightSlice.jpg
midSlice.jpg

catonthecouchproductions

ASKER

Hey,

I had that for the first run through, I have about 7 pages using this similar style for content boxes, but the thing is I will have say 21 images where if I can get it to go the other way I can have 3.

Any ideas to make the middle repeat-y?

Ryan

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Tom Beck

Your layout of the divs would be like this:

div outer container
div top row
div top left, float left
div top mid, float left
div top right, float left
div top row
div mid row
div mid left, float left
div mid center, float left
div mid right, float left
div mid row
div bot row
div bot left, float left
div bot mid, float left
div bot right, float left
div bot row
div outer container

catonthecouchproductions

ASKER

Ah damn, what mess, you think thats the easiest way?

Ryan

Tom Beck

If it were a simpler design you could use divs with corners rounded using css. Maybe a white rectangle with rounded corners positioned inside of a larger light gray rectangle with rounded corners. You can add drop shadows as well with css (CSS3), but don't expect backward compatibility with older browsers.

Otherwise, this IS the easiest way to display that design and make the inside variable size.

catonthecouchproductions

ASKER

Thank you! I appreciate the breakdown.