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 | 13:21 | Comments (69)
Maybe it is important to set enough margin around an Elephant when positioning it
margin: 0.2 miles;
How do you position an elephant?
Very, very carefully.
Web 2.0 has elephant positioning support.
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
Well, obviously to position an elephant relatively, you move its environment around. So it’s relatively positioned, do you see?
“Just how does one relatively position an elephant?”
With relative ease (if you’ve got a bag of peanuts).
I thought you just used your mouse?
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.
Just be sure to keep your ‘mouse’ away from the elephant. they don’t like mice according to the peeka-boo bug.
How do you position an elephant? Two in the front, two in the back.
Oops, sorry, mixing jokes there.
#dumbo {float:trunk}
It doesn’t matter how you position your elephant because it will always crush IE
Relatively positioning an elephant is easy. Good luck getting one to float though.
I understand an elephant will naturally assume a conspicuous position in the corner of the room if you don’t talk about it.
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!
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
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);
}
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
Maybe Eric had been readind Simon Willison’s ‘CSS elephant’ post.
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 …”
How to position an elephant?… Well, it depends: is it an indian or african elephant?….
Um…
#elephant {
position: relative;
}
Okay, why is it so huge? o_O
.elephant {
position: relative;
}
(previous used an id selector, didn’t quite work though)
Look, to maintain airspeed velocity, an elephant needs to beat its wings 42 times every second. Am I right?
Just sit him next to your grandparents.
Relative positioning… get it?
Oh, I crack me up.
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.
Eric suggested using “6 tons of peanut butter at the time”
http://flickr.com/photos/cight/51935170/
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.
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 */
}
What elephant?
Wherever you want… just don’t put him in a table. Elephants are NOT tabular data
hummm… your lack or faith is disturbing.
use the float luke
>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…
Pingback: Ergopole / Architecture d’information et utilisabilité » Archive du blog » CSS : Positionnement relatif d’un éléphant
How about….
#cage {position: absolute; border:3in solid steel; margin: 120in; background-image: url(zoo.gif);}
#elephant {position: relative; color:gray;}
#poop {display:none;}
As it turns out, relatively positioning elephants is really easy… but only if you use one of the Mozilla trunk builds.
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;
}
Use the box model?
:: mutters – all this fuss about an elephant in the corner of the room ::
One byte at a time?
*ducks*
Besides, as that coke ad proved; you can float an elephant…!
*ducks again*
1). You could download it as a .ele file
2). Open it in Photoshop, flatten the layers, then save for web… easy
There is no elephant.
Pingback: JG’s showcase » Eric Meyer on relative animal positioning
Pingback: Janusz “Kali” Kaliszczak » Molly mnie zabiła :)
Pingback: Things and Others » Blog Archive » Eric Meyer on Relatively positioning an elephant
Bruno Kerrien, can you explain what difference between indian or african elephant?
LOL, arrived late on this one-
Just ask Mother!
Pingback: Swobodin’s Blog » Blog Archive » CSS Humor
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.
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;
}
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.