Hendrik: Die Lösung liegt in mozilla.linuxfaqs.de

Hallo,
ich habe mir http://mozilla.linuxfaqs.de (schön seite) noch mal genau angeschaut und ich habe dort gefunden, was ich suche.

Das menü rechts popt auf, wenn man mit der maus darüber geht, genau das will ich auch bei mir (Horizontal) haben.

Das beste ist aber, es scheint nicht mit js oder DHTML zu arbeiten, sondern nur mit css.

Ich schreibe das hier nicht, um die CSS' der Seite in den Himmel zu loben, sondern um zu fragen, WIE DAS GEHT.
Ich habe mir den sourcecode jetzt 20min angeschaut, durchgelesen, nachinterprettiert und bin ztu dem Schluss gekommen -> ich kappiers nicht.

LIEBER KAI LAHMANN, wie hast du das gemacht, wenn jeder so arbeiten würde, bräuchte niemand JS, ich will das auch Verstehen =)

sfg aus coswig
Hendrik

  1. hi

    LIEBER KAI LAHMANN, wie hast du das gemacht, wenn jeder so arbeiten würde, bräuchte niemand JS, ich will das auch Verstehen =)

    nun... das ganze ist eine Idee von CSS-Guru Eric Meyer..

    zunächst basiert es darauf, dass Mozilla nicht nur a:hover, sondern auch (in diesem Falle) li:hover versteht. Innerhalb dieses <li> sitzt eine weitere <ul>, die die untergeordnete Navigation darstellt. Über position:relative; kann ein beliebiges HTML-Element dann für untergeordnete position:absolute;-Elemente die obere Links Ecke bestimmen. Dadurch kann man übrigens auch einen title="" simulieren ohne sich mit Events abmühen zu müssen (damit hab' ich dann wieder Eric ein "Cool" entlockt ;)
    Den haken an der Sache hatte ich ja schon angedeutet: Der MSIE hat leider keinen Plan, was man von ihm will - Opera und konqueror ebenso...

    Grüße aus Bleckede

    Kai

    [der :hover immer mehr mag]

    1. schön, jetzt hab ich was um zu Basteln un zu lernen
      Danke
        sfg aus coswig
        Hendrik
        [der sich jetzt eine mozilla seite kreiert]

    2. Hallo,

      Den haken an der Sache hatte ich ja schon angedeutet: Der MSIE
      hat leider keinen Plan, was man von ihm will - Opera und
      konqueror ebenso...

      ja, leider. Du weist, ich bin ein mozilla-Fan, aber wenn eine Navigation nicht mit dem IE klapt, kann es in den meisten Fällen höchstens als (wunderbare, keine Frage) Machbarkeisstudie durchgehen. Sitze gerade im Inernetcafe für Senioren (ab Alter 65 aufwärts, nein, ich liege da noch drunter ;-)) die den IE instaliert haben. (Das hat aufgrund der monopolistischen verbreitung der Browser bei den Damen und Herren zuhause "leider" Vorteile, diesen Umstand auch so zu belassen....) - und hier sehe ich, wie die Senioren, nichts ;-)))

      Chräcker

      http://www.Stempelgeheimnis.de

      --
      SELF-TREFFEN 2002
      http://www.rtbg.de/selftreffen/
      http://www.megpalffy.org/temp/penneninhh.html

      1. Hallo,

        moin

        Den haken an der Sache hatte ich ja schon angedeutet: Der MSIE
        hat leider keinen Plan, was man von ihm will - Opera und
        konqueror ebenso...

        ja, ist schade aber...

        ja, leider. Du weist, ich bin ein mozilla-Fan, aber wenn eine Navigation nicht mit dem IE klapt, kann es in den meisten Fällen höchstens als (wunderbare, keine Frage) Machbarkeisstudie durchgehen. Sitze gerade im Inernetcafe für Senioren (ab Alter 65 aufwärts, nein, ich liege da noch drunter ;-)) die den IE instaliert haben. (Das hat aufgrund der monopolistischen verbreitung der Browser bei den Damen und Herren zuhause "leider" Vorteile, diesen Umstand auch so zu belassen....) - und hier sehe ich, wie die Senioren, nichts ;-)))

        ... man sollte nicht die tatsache ausser acht lassen, dass die seite eigentlich _von mozillas_ besucht wird (warum denn das wohl *grübel*),
        und die können das ja.
        wenn sich da jemand mit nem IE drauf verirrt und sieht das die navi nicht funktioniert, kommt man vielleicht auf die idee, dass es eine schlechte seite ist. wenn man sich das aber genauer anschaut wird man sicher feststellen, dass der browserersatzschlecht _ist_

        somit: ich halten den einsatz von mozilla-präferenten technologien auf mozilla-relevanten webseiten für angemessen.

        Chräcker

        Fabian

        http://www.Stempelgeheimnis.de

        hab ich gelinkt *g*

        1. Hallo,

          "stimmt", wie ich ja schon schrieb, als Machbarkeitsstudie ist es durchaus interesant. In wieweit man aber eine "Steig-doch-um" Seite dem angesprochenem Publikum (eben nicht die mozilla-User, sondern die IE-User) zugänglich machen sollte, kann man noch treflich streiten. Kein  Vertrags-Autohändler würde den Parkplatz für andere Marken sperren oder "holprig" gestalten. (allerdings, ich gebe es zu, würde mancher Landroverhändler manchen Geländewagenfahrer einer anderen Marke gerne mal seinen Parcour grinsend zur Verfügung stellen....) Es ist eben der mittelweg zu finden. Aber erst einmal sollte eine "Umsteigerseite" so sein, daß man sich einigermassen bewegen kann und auch sieht, was man verpast. Zwischen "sehen was man verpast" und "sehen, das was nicht funktioniert" ist auch noch ein unterschied.

          (dies alles ausdrücklich NICHT zu Kais seite, dazu kenne ich sie nicht "IE-genau" ,-)))

          Chräcker

          PS »» »» http://www.Stempelgeheimnis.de

          hab ich gelinkt *g*

          Danke ,-)))))

  2. Hallo, Hendrik,

    http://mozilla.linuxfaqs.de
    Das menü rechts popt auf, wenn man mit der maus darüber geht, genau das will ich auch bei mir (Horizontal) haben.

    Beispiele für horizontale Menüs findet man u.a. hier:
    http://inigo.0catch.com/menu/  - IMHO nicht zugänglich und schlechtes d.h. kein Markup, verschachtelte DIVs, absolute Positionierung.
    http://www.serve.com/apg/workshop/cssMenu.html - Markup recht okay.
    Ehrlich gesagt verstehe ich nicht, wieso position:relative bei den Beispielen gar nicht benutzt wird. Liegt das vielleicht an den DIVs?
    Die Oberkategorien müssen natürlich normale Hyperlinks sein, damit auch CSS-Browser!=Mozilla die Links wenigstens teilweise anzeigen können.
    Und hier natürlich noch Eric Meyers Version: http://www.meyerweb.com/eric/css/edge/menus/demo.html

    Ich habe mir den sourcecode jetzt 20min angeschaut, durchgelesen, nachinterprettiert und bin ztu dem Schluss gekommen -> ich kappiers nicht.

    Ich habe mal die horizontale Variante nachgebaut, und zwar mit mit dem Markup von Erics/Kais Version, also <ul><li><ul><li></li>...</ul>...</ul> (verschachtelte Aufzählungslisten), das mir eigentlich am logischsten und auch am zugänglichsten erscheint.
    Irgendwie bekomme ich es nicht perfekt hin. http://dj5nu.bei.t-online.de/css-menu.html Ziemlich chaotisch und suboptimal, ein einfaches Untermenü, aber es funktioniert mehr oder weniger. Ich bekomme es trotzdem display:block nicht hin, dass bei Hover die komplette Zeile des Menüeintrags die Hintergrundfarbe wechselt. Zudem möchte ich die Breite den Menüs nicht festlegen, aber ohne (min-)width läuft der Text über den ul-Container hinaus, da dieser die Größe des #nav > ul > li annimmt.
    Das Nonplusultra der Navigation ist das m.E. nicht, das mag auch von der Seitenstruktur abhängen. Auch Bei einem vertikal listenartig angeordneten Menü dürften je nach Seite das Problem der Skalierbarkeit auftreten - das Menü wird bei entsprechender Fensterbreite mittendrin umgebrochen und so überlagern sich ggf. die Menüs.
    In bestimmten Fällen würde ich persönlich die Navigationselemente dezentral strukturieren anstatt direkt an den Dokumentanfang ein ellenlanges mehrfach verschachteltes Inhaltsverzeichnis zu setzen, welches jede h4 oder sogar h5 verlinkt (man stelle sich vor, welches Bild sich Textbrowserbenutzern bietet).
    Eine Alternative zu einem DHTML-Menü ist die CSS-Variante sicher, aber wer verwendet schon schamlos DHTML-Menüs :). Die bekannten Techniken für ein Layout mit "vollstatischer" Navigation sind imho ausgereift genug als dass jetzt jeder auf CSS-Menüs fliegt, weil es nun auch ohne JavaScript geht (dafür aber momentan noch bei nahezu bei keinem Benutzer funktioniert). Das ist mir persönlich alles noch zu vage als dass man es konsequent auf eine umfangreiche Seite anwenden könnte.
    Was mit JavaScript interoperabler zu lösen ist, sollte man auch mit JavaScript lösen, wenn es denn sinnvoll und optional ist bzw. ein noscript-Äquivalent zur Verfügung steht.
    Btw, der Internet Explorer zeigt völligen Quark an (bei Kai und mir, nicht bei Eric). Da die Selektoren sein müssen, bleibt nur ein serverseitig dynamisches Stylesheet.

    Mathias

    1. hi

      Ich habe mal die horizontale Variante nachgebaut, und zwar mit mit dem Markup von Erics/Kais Version, also <ul><li><ul><li></li>...</ul>...</ul> (verschachtelte Aufzählungslisten), das mir eigentlich am logischsten und auch am zugänglichsten erscheint.

      übrsprünglich kommt die Idee weder von mir noch von Eric, sondern von ...
      da: http://www.serve.com/apg/workshop/cssMenu.html
      ..aber wer keine Werbung macht ;)

      Was mit JavaScript interoperabler zu lösen ist, sollte man auch mit JavaScript lösen, wenn es denn sinnvoll und optional ist bzw. ein noscript-Äquivalent zur Verfügung steht.

      klar.. wobei das li:hover noch problemlos durch JS zu ersetzen ist. Zum Problem werden hier Browser, die position.relative und position:absolute nicht fehlerfrei verstehen (konqueror und Opera haben sich da beide schon disqualifiziert!)

      Btw, der Internet Explorer zeigt völligen Quark an (bei Kai und mir, nicht bei Eric). Da die Selektoren sein müssen, bleibt nur ein serverseitig dynamisches Stylesheet.

      manchmal sind es Kleinigkeiten, weshalb es geht oder eben nicht... ohne 'nen MSIE zum Testen, kann ich da aber nix dran ändern.

      Grüße aus Bleckede

      Kai

      1. Hallo, Kai,

        Btw, der Internet Explorer zeigt völligen Quark an (bei Kai und mir, nicht bei Eric). Da die Selektoren sein müssen, bleibt nur ein serverseitig dynamisches Stylesheet.

        manchmal sind es Kleinigkeiten, weshalb es geht oder eben nicht... ohne 'nen MSIE zum Testen, kann ich da aber nix dran ändern.

        Hm, deswegen könnte ich auf Windows als Betriebssystem nie verzichten... na gut, den IE gibt's für MacOS, aber Linux wäre meine erste Wahl (wieso ich momentan nicht Linux nutze ist eine OT-Frage). Ich "arbeite" mit dem IE auch nur Testen - oder wenn hartnäckige Seiten Opera und Mozilla aussperren. Durch seine Marktpräsenz ist er die klammheimliche Referenz... wobei ich zugeben muss, Webseiten nicht IE-kompatibel zu verfassen und auch auf Workarounds verzichte.

        Aber gibt es nicht vmware o.ä., mit Hilfe dessen man den IE auf *nixen zum laufen bekommen könnte? (Ich habe dahingehend null Ahnung.) Das wäre doch mal ein echt kreativer Hack, ActiveX samt Sicherheitslücken unter Linux zu emulieren (ich weiß, äußerst pervers...). ;-))

        Mathias

        1. hi

          Hm, deswegen könnte ich auf Windows als Betriebssystem nie verzichten.

          bei dieser seite ist es mir schlichtweg egal - wenn es zu kaputt ist, wird schon einer was sagen - die Seite wird derartig oft von der gleichen IP aus fast gleichzeitig mit MSIE und Mozilla aufgerufen, dass solche Unterschiede schon aufgefallen sein sollten.

          Normalerweise kenne ich genug Leute mit einem MSIE zu schnell-testen - zum glück ist der MSIE in seinem verhalten ja halbwegs vorhersehbar, chaotisch wird's erst, wenn man etwas verknotetere position:*; konstruktionen hat, wo er dann nicht mehr weiß, welche Ecke nun von wo auszurichten ist.

          Grüße aus Bleckede

          Kai

          1. Hallo, Kai!

            bei dieser seite ist es mir schlichtweg egal - wenn es zu kaputt ist, wird schon einer was sagen

            Im Grunde genommen ist ein Testen mit "allen Browsern"
            unnötig, zumindest wenn man keine grafisch perfekten Seiten anbieten möchte, was im übrigen ein sinnloses Unterfangen ist.
            Wenn der Benutzeragent den Style nicht versteht, ist doch nichts verloren. Problematisch wird es nur, wenn er durch Halbwissen die eine CSS-Regel versteht und eine andere nicht und die Seite unlesbar macht.
            Abwärtskompatibel heißt ja nicht, dass man auf jedem Netscape 4.x das gleiche "coole" Design haben muss. Der Stylesheet, der die ganze Seite ansehnlich macht, ist optional und da ich bspw. nur textlastige und informationsschwangere Seiten verfasse, ist der Style nur Puderzucker, der den Text lesbarer macht.
            Ich finde es nur konsequent, dass viele NS4.x und anderen kränkelnden Browserinvaliden den Stylesheet durch @import o.ä. vorenthalten. Ähnlich kann man auch serverseitig mittels User-Agent-Header filtern. Durch die starke HTML-Strukturierung kann man darauf vertrauen, dass die Seite trotzdem komfortabel lesbar ist und die Informationen zugänglich sind.

            die Seite wird derartig oft von der gleichen IP aus fast gleichzeitig mit MSIE und Mozilla aufgerufen, dass solche Unterschiede schon aufgefallen sein sollten.

            Vielleicht ist die IP nur die eines Proxys... ;)

            Normalerweise kenne ich genug Leute mit einem MSIE zu schnell-testen - zum glück ist der MSIE in seinem verhalten ja halbwegs vorhersehbar, chaotisch wird's erst, wenn man etwas verknotetere position:*; konstruktionen hat, wo er dann nicht mehr weiß, welche Ecke nun von wo auszurichten ist.

            Ich mag Seiten, die IE-Nutzern konsequent den Zugang verwehren. :) <marquee width="1"> ist eine schöne Möglichkeit; leider nicht standardkonform.

            Mathias

        2. Aber gibt es nicht vmware o.ä., mit Hilfe dessen man den IE auf *nixen zum laufen bekommen könnte? (Ich habe dahingehend null Ahnung.) Das wäre doch mal ein echt kreativer Hack, ActiveX samt Sicherheitslücken unter Linux zu emulieren (ich weiß, äußerst pervers...). ;-))

          http://linuxtoday.com/news_story.php3?ltsn=2001-07-10-003-20-PR-KE-MS