?
Solved

Slicing images with middle repeating - content box

Posted on 2011-05-04
7
Medium Priority
?
346 Views
Last Modified: 2012-06-27
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
0
Comment
  • 4
  • 3
7 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35695529
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 35695533
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 35697437
A little more complicated, but not difficult.
slices.jpg
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 38

Expert Comment

by:Tom Beck
ID: 35697489
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 35697894
Ah damn, what mess, you think thats the easiest way?

Ryan
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35698574
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 35772900
Thank you! I appreciate the breakdown.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question