• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 227
  • Last Modified:

liquid layout help

I'm so unsure of what to do that i'm not even sure i titled the question correctly.

I have a "pod" (see attached) designed that i will need to fill with text. The overall page design is built so that the page could have many of these "pods" each with their own variable amounts of text inside. I'm trying to learn how to build this "pod" correctly so that it will handle variable lines of text, thus 'stretching' to accommodate for the amount of text . The width of the pod will always stay consistent, just the height will be variable. Also attached are jpg examples of what i hope to be able to create, one using a fews lines of type the other using many lines of type. Normally i could do this, but the small fade in the top portion of the pod is really throwing me off.

Lastly, i'm hoping for just a html & css solution, i'm not using php or asp, or any other language.

Thanks in advance.

pod.jpg
few.jpg
many.jpg
0
Tom Ray
Asked:
Tom Ray
  • 3
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
Hi sibgig,

If the pod background is a single image, then you will need to slice it into three parts.

The top part will consist of the top border and the curves until the border goes vertical.

The middle part contains the image section from border to border that can be repeated depending on how much text is in there.  

The bottom is the fading background and border curving from vertical to horizontal again.

You then create three divs of the same width as the background image stacked one upon the other.  The top and bottom divs have fixed heights that match the bg image, and the middle div has no fixed height, so it expands with the text.

The trick to get the background to repeat is to use the background-repeat attribute in CSS.  Set it to background-repeat: repeat-y for the middle div.
0
 
Jason C. LevineNo oneCommented:
Hmm,

The gradient might give you some trouble...let me look around a bit.
0
 
Tom RayAuthor Commented:
thanks jason,

yes i can (and have done) exactly what you have suggested, however i need to implement the gradient, that is whats throwing me off track.
0
 
Tom RayAuthor Commented:
here is where am at now, i don't think its the best solution, but its all i got right now

http://www.tsquared.com/ee/pod/
0
 
Jason C. LevineNo oneCommented:
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now