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
LVL 1
catonthecouchproductionsAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
A little more complicated, but not difficult.
slices.jpg
0
 
Tom BeckCommented:
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
0
 
catonthecouchproductionsAuthor Commented:
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
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Tom BeckCommented:
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
0
 
catonthecouchproductionsAuthor Commented:
Ah damn, what mess, you think thats the easiest way?

Ryan
0
 
Tom BeckCommented:
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.
0
 
catonthecouchproductionsAuthor Commented:
Thank you! I appreciate the breakdown.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.