Solved

liquid layout help

Posted on 2008-06-17
5
193 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
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:sibgig
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:sibgig
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
word is recognized as adobe and adobe as IE files 14 36
Wordpress "chart" plugin recommendation 7 50
HTML &#0153 2 16
Under active page on navigation bar 8 11
This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

815 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

8 Experts available now in Live!

Get 1:1 Help Now