Das Atomic Eggs-Eibox-Modell ;-)

Icon: Hilfe
Icon: gelbe Leuchtdiode
|
Icon: gelbe Leuchtdiode
+
Icon: Drucken
Icon: Scrollen

Was ist eine »Eibox«

Eine Eibox (verhält sich wie Eicon zu Icon, ist also im Atomic Eggs-Jargon Synonym von I-Box), ist nichts anderes als eine Informationsbox. In der Eibox werden Zusatzinformationen – oft Bilder – gezeigt, die sich im sonstigen Textfluß der Webseite schlecht unterbringen ließen oder diesen stören würden. Eine Eibox ist so etwas wie ein formatierter Tooltip in einem simulierten (Windows-)Fenster (eher einer Dialog-Box ähnlich).

Ein Windows-Fenster:

Eine Eibox:

Vier der sechs genannten Fenster-Eigenschaften wurden für die Eiboxen übernommen. Auf das Maximieren und Resizen wurde verzichtet, da die Eiboxen immer in der für den Inhalt passenden Größe geöffnet werden. Aus diesem Grund haben sie auch keine Scrollleisten, zumal sie lediglich Zusatzinformationen enthalten sollen und keine ellenlangen Beschreibungen.

  1. Den »Focus« durch Klicken bekommen die Eiboxen, indem der z-Index mit JavaScript erhöht wird
  2. Zum Verschieben kommt ^Struppis Drag&Drop-Beispiel zum Einsatz
  3. Zum Minimeren wird die Eigenschaft overflow manipuliert und die so auf Titelleistengröße "geclippte" Eibox am unteren (Browser-)Fensterrand neu positioniert
  4. Zum Wiederherstellen wird die Eigenschaft overflow manipuliert und die Eibox wenige Pixel oberhalb des unteren Fensterrands neu positioniert

^^^

Eibox und Text-Eibox

Der Eiboxologe unterscheidet zwei Sorten von Eiboxen: » Eiboxen «, die nur ein (bis zu 640px breites) Bild enthalten, und Eiboxen, welche nur Text oder eine Mischung aus Text und kleineren Bildern zeigen. Letztere nennt der Eiboxologe deswegen » Text-Eiboxen «.

Für das Konstrukt mit runden Ecken sollte ursprünglich die bei ^AListApart und bei ^Andreas Kalt vorgestellte Technik der Sliding Doors angewendet werden, um dann doch zu der Erkenntnis zu gelangen, dass »Schiebetüren« zwar sehr praktisch sind... Wenn diese jedoch aus Glas sind, verdeckt die eine Tür eben nicht die andere. In anderen Worten: Mit transparenten Bereichen wie die abgerundeten Ecken der oberen Box-Graphiken lässt sich die Technik nicht anwenden, da von der rechten Schiebetür eine Ecke durch die transparente Ecke der linken Schiebetür » immer zum Vorschein kommt. Daher musste wieder auf feste, bei Bedarf dynamisch angepasste Breiten für die Eiboxen zurückgegriffen werden.

Bei den Übungen entstanden so zwei Modelle, wobei das Modell für die Text-Eiboxen – bis auf die zugewiesene feste Breite – mit dem von Andreas Kalt identisch ist. Das Konstrukt für die reinen Bild-Eiboxen setzt auf zwei nebeneinander positionierte DIV-Elemente für die Titelleisete der Box (auch Inhalt beim rechten Element). Das rechte Element bekommt einen der Breite des zu zeigenden Bilds angepassten width-Wert. Bei auch in der Höhe großen Bildern wird die Höhe der Box ebenfalls angepasst.

Im Quelltext kann der Code für die zwei Eibox-Modelle eingesehen werden (ab Zeile 172).

^^^

Die Probleme

^^^

Eibox testen

^^^

« Atomic Sitemap

Ich sehe was, was Du nicht siehst.
Viel text oder auch nicht und kein Lorem Ipsum.
Les champignons c'est bon, les champions, c'est con.
Un poisson dans la boisson c'est du poison.
Was bedeutet "MIAAAAAARDERONTUDJUUU"? Wer Gaston Lagaffe liest,
kennt es und weiß es (vielleicht).
Und wer kennt die Gök? . When I took a boot on sunday... . . Hey, der Code für die Eiboxen ist gleich da unten! Dass Ihr immer alles mitlesen müsst!

Winterreise

Winterreise

Egg Jones:

Diese kleine Grafik ist ein Geschenk von ^Besim Karadeniz.

Besim hatte sich von den schwebenden Eiern auf der ehemaligen Startseite von Atomic Eggs (jetzt auf Old Atomic Eggs) einfach das Ei mit der Sonnenbrille geschnappt und verpasste ihm bewegliche Augenbrauen. Somit war die Ähnlichkeit mit den Allüren des britischen Popstars Tom Jones unübersehbar.

Bild: Ei mit Sonnebrille

Seitdem heißt diese Grafik Egg Jones und trägt als festes Bestandteil des Atomic Eggs-Logos zu dessen Corporate Eidentity bei.

Wer ist Egg Jones?

Winterreise

Winterreise

Egg Jones:

Diese kleine Grafik ist ein Geschenk von ^Besim Karadeniz.

Besim hatte sich von den schwebenden Eiern auf der ehemaligen Startseite von Atomic Eggs (jetzt auf Old Atomic Eggs) einfach das Ei mit der Sonnenbrille geschnappt und verpasste ihm bewegliche Augenbrauen. Somit war die Ähnlichkeit mit den Allüren des britischen Popstars Tom Jones unübersehbar.

Bild: Ei mit Sonnebrille

Seitdem heißt diese Grafik Egg Jones und trägt als festes Bestandteil des Atomic Eggs-Logos zu dessen Corporate Eidentity bei.

Wer ist Egg Jones?