Solved

liquid layout help

Posted on 2008-06-17
5
179 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:sibgig
  • 3
  • 2
5 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
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
Comment Utility
Hmm,

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

Author Comment

by:sibgig
Comment Utility
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:sibgig
Comment Utility
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
Comment Utility
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now