Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

liquid layout help

Posted on 2008-06-17
5
Medium Priority
?
225 Views
Last Modified: 2011-10-19
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
Comment
Question by:Tom Ray
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 21807164
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
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 21807179
Hmm,

The gradient might give you some trouble...let me look around a bit.
0
 
LVL 11

Author Comment

by:Tom Ray
ID: 21812232
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
 
LVL 11

Author Comment

by:Tom Ray
ID: 21812698
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
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 1500 total points
ID: 21815225
0

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

618 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