StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I made a fiddle that mimics the facebook status box...</p> <p><a href="http://jsfiddle.net/UnsungHero97/mFuD4/5/" rel="nofollow noreferrer">http://jsfiddle.net/UnsungHero97/mFuD4/5/</a></p> <p>I added some functionality to the example, in particular, <a href="http://james.padolsey.com/javascript/jquery-plugin-autoresize/" rel="nofollow noreferrer">I found a cool jQuery plugin that allows for textarea auto-resizing</a>.</p> <p>Facebook actually uses a <code><textarea></code> element and the way they take care of the border is simple.</p> <p><img src="https://i.stack.imgur.com/nCDVL.png" alt="Facebook status"></p> <p>The "What's on your mind?" text is inside the <code><textarea></code> element and the border around it is due to several <code><div></code> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a <code>.gif</code> image, but there are ways to do this using only CSS!</p> <h2>Regarding the triangle...</h2> <p>If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...</p> <p><a href="https://stackoverflow.com/questions/5623072/css-craziness-and-a-new-challenge">How can I create a "tooltip tail" using pure CSS?</a></p> <p>... and here are the answers:</p> <ul> <li><a href="https://stackoverflow.com/questions/5623072/css-craziness-and-a-new-challenge/5624017#5624017">answer 1</a></li> <li><a href="https://stackoverflow.com/questions/5623072/css-craziness-and-a-new-challenge/5623454#5623454">answer 2</a></li> <li><a href="https://stackoverflow.com/questions/5623072/css-craziness-and-a-new-challenge/5623898#5623898">answer 3</a></li> <li><a href="https://stackoverflow.com/questions/5623072/css-craziness-and-a-new-challenge/5633146#5633146">answer 4</a> (this one is REALLY cool!!!)</li> </ul> <p>I hope this helps.<br> Hristo</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload