Welcome to WebmasterWorld Guest from 54.144.112.127

Forum Moderators: not2easy

Message Too Old, No Replies

Fluid-height "Post-It Note"

     
6:58 pm on Jun 19, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


What I'm trying to do is make a Post-It Note that has text "written" on it. This text could be a few words, or a few very long paragraphs. The post-it must adjust height to accommodate its contents. However, I don't want it to adjust width. Also, the post-it should never have a height of less than it's width.

What I did was create a square post-it image in photoshop, and then set that as the background image to a div containing the text.

When the length of the text doesn't fit inside the div, you can see the problem: I either get another post-it image (if the background is repeating), or I run off the edge of the one post it note (if no-repeat).

How can I make the post-it background graphic change heights so that the entire text fits on it?
8:03 pm on June 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
posts:1341
votes: 0


Slice it into three... a top, middle and bottom.

- lock the top in place (no-repeat)

- make the middle dynamic height, (set min-height and repeat-y)

- pop the bottom in after middle paints (no-repeat)
11:21 pm on June 19, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


CSS3 offers background-size which, as the name suggests, can be used to size (and consequently stretch) the background-image. However, browser support, although improving, is not there yet with this one.

Even if background-size was available, I think lexipixel's solution would be the preferred method.
8:03 pm on June 21, 2011 (gmt 0)

Full Member

5+ Year Member

joined:Mar 22, 2008
posts: 315
votes: 0


Yeah, I figured that was how to do it. Anyway, looks good now! Thanks guys.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members