Solved

liquid layout help

Posted on 2008-06-17
5
205 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
  • 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 500 total points
ID: 21815225
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

Suggested Solutions

Title # Comments Views Activity
Technology Resume 7 69
How to get CSS styled menu to maintain the open selected menu? 13 45
Session on Html 8 41
title attribute 5 26
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

749 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