molly.com
Wednesday 12 October 2005
Relatively Positioning an Elephant
UNINTENTIONAL HUMOR is often the funniest. I’m co-presenting with Eric Meyer at the always-fabulous UI Conference (celebrating its 10th year!) and Eric, describing positioning, inadvertently said:
“Here’s how we relatively position an elephant”
Now, Eric’s known for his oft subtle humor, but this was more a we-just-finished-lunch-so-we-all-need-a-nap situation. It came flying out of his mouth, no humor intended, instead of the word element.
Oh, it was a funny moment, and I’m compelled to share it with everyone! But, I’m left wondering: Just how does one relatively position an elephant?
Filed under: humor, standards
Posted by: Molly | 1:21 pm |
October 12th, 2005 at 1:35 pm
Maybe it is important to set enough margin around an Elephant when positioning it
margin: 0.2 miles;
October 12th, 2005 at 1:39 pm
How do you position an elephant?
Very, very carefully.
October 12th, 2005 at 1:47 pm
Web 2.0 has elephant positioning support.
October 12th, 2005 at 2:47 pm
LOL - and no one but Eric should have delivered this line, I love his subtle drolleries.
As for the line itself, I have a habit, in my idle moments, of pondering upon the possibility of sentences which make sense grammatically, and perhaps even logically, but have never been said before. This definitely qualifies
October 12th, 2005 at 2:59 pm
Well, obviously to position an elephant relatively, you move its environment around. So it’s relatively positioned, do you see?
October 12th, 2005 at 3:14 pm
“Just how does one relatively position an elephant?”
With relative ease (if you’ve got a bag of peanuts).
October 12th, 2005 at 3:46 pm
I thought you just used your mouse?
October 12th, 2005 at 4:43 pm
You take an elephant, write it to an iFrame, make an xmlHttpRequest for nuts (elephants love nuts), and slowly, the elephant will begin to move.
October 12th, 2005 at 4:44 pm
Just be sure to keep your ‘mouse’ away from the elephant. they don’t like mice according to the peeka-boo bug.
October 12th, 2005 at 4:55 pm
How do you position an elephant? Two in the front, two in the back.
Oops, sorry, mixing jokes there.
October 12th, 2005 at 6:27 pm
#dumbo {float:trunk}
:)
October 12th, 2005 at 6:54 pm
It doesn’t matter how you position your elephant because it will always crush IE
October 12th, 2005 at 7:41 pm
Relatively positioning an elephant is easy. Good luck getting one to float though.
October 12th, 2005 at 8:27 pm
I understand an elephant will naturally assume a conspicuous position in the corner of the room if you don’t talk about it.
October 12th, 2005 at 8:46 pm
umm lets see… is this elephant a child of a bigger elephant. Are they together? Gee am on a ’safari’! Close your eyes, think FOUC, elephant gone! Tada!
October 12th, 2005 at 9:37 pm
Well, first you need to target your elephants with JavaScript. Then add the appropriate methods to fire upon ‘mouseup’
var dumbos = getElephantsByTagName(’dumbo’);
for ( i=0;i
October 12th, 2005 at 9:39 pm
I’m beginning to hate comment fields that much posts with code…
var dumbos = getElephantsByTagName(’dumbo’);
for ( i=0;i <dumbos.length;i++ ) {
addEvent(dumbos[i],’mouseup’,moveDumbo,false);
}
October 12th, 2005 at 10:44 pm
Who cares how you position it; how the heck are you supposed to serialize it and pass it via XMLHttpRequest??!
Now THAT’s load testing 0_o
October 12th, 2005 at 11:50 pm
Maybe Eric had been readind Simon Willison’s ‘CSS elephant’ post.
October 13th, 2005 at 1:26 am
There was a news broadcast on TV a while ago that covered the fire that finally destroyed Brightoin Pier (you’ve seen what’s left of that, Molly). As the news headlines rolled, the serious music thumping away in the background, the headlines were read out, including something along the lines of “Brighton Pier, already battered by the elephants, burns down …”
October 13th, 2005 at 1:46 am
How to position an elephant?… Well, it depends: is it an indian or african elephant?….
October 13th, 2005 at 3:45 am
Um…
#elephant {
position: relative;
}
:-)
October 13th, 2005 at 3:47 am
Okay, why is it so huge? o_O
.elephant {
position: relative;
}
(previous used an id selector, didn’t quite work though)
October 13th, 2005 at 5:38 am
Look, to maintain airspeed velocity, an elephant needs to beat its wings 42 times every second. Am I right?
October 13th, 2005 at 6:23 am
Perhaps the “how to move a hippo” instructions could be adapted for the elephant? moving a hippo
October 13th, 2005 at 8:51 am
Just sit him next to your grandparents.
Relative positioning… get it?
Oh, I crack me up.
October 13th, 2005 at 11:44 am
No need to shove the elephant anywhere she doesn’t want to go, ’cause she’s still in the flow. But now you can safely feed her absolutely positioned peas, knowing that she’ll contain them all.
October 13th, 2005 at 12:50 pm
Eric suggested using “6 tons of peanut butter at the time”
http://flickr.com/photos/cight/51935170/
October 13th, 2005 at 5:14 pm
According to wikipedia, elephants are of the class “Mammalia” and an order called “Proboscidea”. Since the order has a name, its probably unique, thus being an id. Of course, being a member of an order, an elephant is obviously a list item for an ordered list.
So, naturally:
ol#Proboscidea li.Mammalia elephant {
position: relative;
background: inherit; /* Yes, little elephants have big elephants as parents */
}
ol#Proboscidea li.Mammalia elephant:after {
content: “”;
}
The designer is strongly advised to use unobtrusive JavaScript. It is well known that ol#Proboscidea li.Mammalia elephant are reliably unreceptive of mouse events, which have been known to trigger peek-a-boo bugs in a number of browsers.
The second style rule (with the pseudo class :after) is there to fix the frustrating bug of the elephant leaving a constant stream of nasty little turds as it moves along the document. The designer is strongly advised not to move the elephant too far from its starting position, or keep it on screen for too long. Although elephants don’t have memory leaks, those turds keep multiplying rather quickly, resulting in a core dump on many platforms. Mouse events normally accelerate the problem.
October 13th, 2005 at 5:34 pm
Footnote:
A number of web designers have reported that having elephants on their pages makes the pages feel heavy. Fortunately, using the CSS sibling selector and an aural stylesheet hack, we can use “the Hollies hack” to solve that problem:
elephant+elephant {
font-weight: lighter;
voice-family: male;
/* he ain’t heavy… he’s my brother */
}
October 13th, 2005 at 8:34 pm
What elephant?
October 14th, 2005 at 1:17 am
Wherever you want… just don’t put him in a table. Elephants are NOT tabular data
October 14th, 2005 at 2:12 am
hummm… your lack or faith is disturbing.
use the float luke
October 14th, 2005 at 3:03 am
How to position an elephant
This made me laugh until I cried: Relatively positioning an elephant (see the comments)…
October 14th, 2005 at 3:36 am
>Wherever you want… just don’t put him in a table. Elephants are NOT tabular data
But if you can’t put it IN a table, what can you do… position it ON the table is not a good option…
October 14th, 2005 at 5:34 am
[…] e (grosse) erreur, lire les commentaires assez drôles de spécialistes en la matière sur Mol […]
October 14th, 2005 at 10:04 am
How about….
#cage {position: absolute; border:3in solid steel; margin: 120in; background-image: url(zoo.gif);}
#elephant {position: relative; color:gray;}
#poop {display:none;}
October 14th, 2005 at 10:48 am
As it turns out, relatively positioning elephants is really easy… but only if you use one of the Mozilla trunk builds.
October 14th, 2005 at 11:36 am
mammal.elephant {
position: relative;
bottom: 0; /* elephants are rather heavy. No need to try and lift him */
left: 50%; /* wherever they are, they are in the middle of it */
display: block;
margin: 1000000em; /* keep your distance */
color: #999999;
border: none; /* ideally */
padding: 6000em;
}
October 15th, 2005 at 3:09 am
Use the box model?
:: mutters - all this fuss about an elephant in the corner of the room ::
October 15th, 2005 at 8:52 am
One byte at a time?
*ducks*
Besides, as that coke ad proved; you can float an elephant…!
*ducks again*
October 17th, 2005 at 9:48 pm
1). You could download it as a .ele file
2). Open it in Photoshop, flatten the layers, then save for web… easy
October 18th, 2005 at 5:40 am
There is no elephant.
October 18th, 2005 at 11:04 am
[…]
October 18, 2005
Eric Meyer on relative animal positioning
One mistake, so much laugh. The pice of fame?
Filed by admin a […]
October 18th, 2005 at 11:55 am
[…] lly mnie zabiła
October 18th, 2005
A dokładniej Eric Meyer własnoustnie: Jak relatywnie spozycjonować elefanta
Autor: Janusz
W: Zasły […]
October 18th, 2005 at 3:36 pm
Molly, the post about positioning an elephant (and the comments) is interesting and funny. Great site.
October 21st, 2005 at 10:13 am
[…] e in your futur Eric Meyer on Relatively positioning an elephant http://www.molly.com/2005/10/12/relatively-positioning-an-elephant/ Hilariou […]
October 25th, 2005 at 11:38 am
Bruno Kerrien, can you explain what difference between indian or african elephant?
October 25th, 2005 at 8:56 pm
LOL, arrived late on this one-
Just ask Mother!
November 14th, 2005 at 5:24 am
[…] ter; voice-family: male; /* he ain’t heavy… he’s my brother */ } Tracked from http://www.molly.com/2005/10/12/relatively-positioning-an-elephant […]
November 20th, 2005 at 9:07 am
Sorry for the previous comment, it seems that google is foolishing around, I have only wrote your article on my blog, and I don’t know how did this comment appear.
Please delete it, and sorry again for the inconvenience.
December 3rd, 2005 at 6:00 am
Well it depends on the sex of the elephant.
#include
#include “elephant.h”
int main(int argc, char **argv)
{
int relative_position;
if (*argv[1] == ELEPHANT_SEX_FEMALE)
{
relativ_position = RELATIVE_E_FEMALE;
}
else
{
relative_position = RELATIVE_E_MALE;
}
else
{
relative_position = RELATIVE_E_UNKNOWN;
}
shift_environment(relative_position);
return ELEPHANT_POSITIONED_RELATIVELY;
}
January 18th, 2006 at 1:30 pm
Saw you and Eric at UI10 in Boston. Good stuff. You both were definitely in rare form.
Thanks for your work in web standards and for visiting Sandia recently.
March 24th, 2006 at 2:44 am
Relatively Positioning ????????
Ask a physician!!!!!!!!
January 12th, 2008 at 11:33 am
Thanks
March 14th, 2008 at 1:20 pm
Successful website
March 14th, 2008 at 1:20 pm
thanx a lot
March 30th, 2008 at 6:32 am
thanks
April 22nd, 2008 at 7:55 pm
Nice job.
April 22nd, 2008 at 7:55 pm
Thanks,very nice blog.
July 24th, 2008 at 11:44 am
good sitee
July 24th, 2008 at 12:22 pm
good blogger
July 24th, 2008 at 12:48 pm
thanks web site
July 24th, 2008 at 3:29 pm
very nice