cr: Navigationsmenü

Hallo!

ich möchte gerne über meiner navigation welche sich am unteren bildschirmrand befindet bei manchen buttons ein auswahlmenü drüberlegen ähnlich dem "kopieren" auf dem bild hier:

http://www.tipps-tricks-kniffe.de/wp-content/uploads/2011/02/apple-iphone-safari-quellcode-sourcecode-anzeigen-lesezeichen-trick-javascript-bookmarklet-1.jpg

die navigation ist ganz einfach in einem div mit fester 100 px höhe und 100% breite angeordnet. z-index über dem "normalem" text.

wie kann ich nun dieses "kopieren" menü einbauen ohne dass es die seite verschiebt und dass es wie auch das navigantionsmenü mit einem z-index über dem normalen text liegt.

mir gehts es nicht um einen fertigen code, ich suche den ansatz zur lösung ;)

Danke!

  1. Moin,

    mir gehts es nicht um einen fertigen code, ich suche den ansatz zur lösung ;)

    http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position? Dazu auf jeden Fall das und evtl. das.

    Gruß,
    Take

    1. moin,

      also ich habe jetzt mal folgendes, ist das valide?

      -------die Navigationsleiste-----
      <div id="nav" style="position: absolute; bottom: 8%; height: 76px; width: 100%; background-image:url(images/home_navigation.jpg); background-position: top center; ">

      -----das einzelne Navi-icon inkl. dem kleinen Infofenster---------
      <a href="#" onclick="showhidefernbedienung(); "><div style="float: left; position: relative; height: 100%; line-height: 76px; background-image:url(images/trenner.png); background-repeat: no-repeat; background-position: left center; padding: 0% 1% 0% 1%; "><img src="images/link-fernbedienung.png" style="margin-top: 23px; border-width: 0px;" alt=""><div id="fernbedienung" style="display: none; position: absolute; background-color: blue; width: 50px; height: 200px; margin-top: -185px; ">innenliegendes div welches nach obeen wie eine toolbox aufgeht</div></div></a>

      schönes WOE!

      cr

      1. Hallo,

        also ich habe jetzt mal folgendes, ist das valide?

        nein, nicht in HTML 4.01 oder XHTML 1.0.

        <a href="#" onclick="showhidefernbedienung(); "><div style="float: left; position: relative; height: 100%; line-height: 76px; background-image:url(images/trenner.png); background-repeat: no-repeat; background-position: left center; padding: 0% 1% 0% 1%; "><img src="images/link-fernbedienung.png" style="margin-top: 23px; border-width: 0px;" alt=""><div id="fernbedienung" style="display: none; position: absolute; background-color: blue; width: 50px; height: 200px; margin-top: -185px; ">innenliegendes div welches nach obeen wie eine toolbox aufgeht</div></div></a>

        In den genannten HTML-Dialekten darf ein a-Element kein Blockelement wie z.B. div enthalten.

        Ciao,
         Martin

        --
        Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hallo,

          Hallo Martin,

          danke! Die "a href" habe ich entfernt und durch "onclick" eventhandler im inneren div ersetzt...das genügt auch und sollte ja so konform sein.

          meine frage bezog sich vorallem darauf das ich ein div mit position relative und das darin liegende div mit position abbsolute und einem negativem margin nach oben hin ausgerichtet. d.h. für mich ich schiebe das sich ja eigentlich in dem position relative befindliche div über dessen rand hinaus in die große weite welt...darauf hin war die frage ob das so okay ist oder ob man das anders handeln sollte?

          grüße cr