dedlfix: Ein Element über alles setzen

Tach!

Zeigen kann ich leider noch nichts, weil ich erstmal die Realisierungsidee suche. Gegeben sei eine Zeile / ein Div mit Zeugs drin. Darunter kommt eine Zeile Menüeinträge (ul mit li und a darin). Darunter eine Zeile / ein Div mit anderem Krams drin (namentlich ein Bild). Die Menüzeile besteht aus 6 Text-Elementen (horizontal zentriert) und einem Bild in der Mitte. Dieses Bild soll auch ein Link sein, soll aber quasi wie ein Stempel aussehen. Das heißt, dass es irgendwie aus dem Fluss rauskommen muss, so dass die Menüzeile nur so hoch ist wie die Text-Einträge, und das Bild sowohl in die Zeile darüber und die Bild-Zeile darunter ragt und dabei teilweise das überdeckt, was sich in den beiden Zeilen befindet. Die Menüeinträge selbst müssen aber horizontal Platz für das Stempel-Bild lassen. Somit sitzt der Stempel in der Mitte und je drei Menüpunkte links und rechts davon.

Wie realisiert man das am besten, dass das Stempel-Bild die Menüzeile nicht in der Höhe vergrößert? Das Hineinschieben in die anderen Bereiche kann man ja irgendwie mit transform: translateY() hinbekommen, oder vielleicht auch ganz anders.

dedlfix.

  1. Hallo dedlfix,

    Wie realisiert man das am besten, dass das Stempel-Bild die Menüzeile nicht in der Höhe vergrößert? Das Hineinschieben in die anderen Bereiche kann man ja irgendwie mit transform: translateY() hinbekommen, oder vielleicht auch ganz anders.

    Der Menüleiste eine feste Höhe geben und overflow visible setzen?

    Bis demnächst
    Matthias

    --
    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
  2. @@dedlfix

    Zeigen kann ich leider noch nichts,

    Ich aber. ;-)

    weil ich erstmal die Realisierungsidee suche.

    Ich erinnere mich gerade mal wieder an meinen Chemielehrer. Die Antwort auf fast jede seiner Fragen war: Schrödinger-Gleichung.

    Heute ist die Antwort auf fast jede Layout-Frage: Flexbox.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. Tach!

      Ich erinnere mich gerade mal wieder an meinen Chemielehrer. Die Antwort auf fast jede seiner Fragen war: Schrödinger-Gleichung.

      Heute ist die Antwort auf fast jede Layout-Frage: Flexbox.

      Leider schlägt sich "heute" immer noch mit Altbeständen von Browsern rum, so dass Flexbox zwar nett ist, aber ... ich habe es dann doch noch herkömmlich hinbekommen.

      dedlfix.

  3. Hej dedlfix,

    habe ein nettes Video von Zoe Mickley Gillenwater gefunden. Macht zwar Sinn sich das ganz anzuschauen (ist auch sehr unterhaltsam), aber Dein spezielles "Problem" wird ab 20:30 gelöst ;-)

    Marc