Menüführung bei unterschiedlichen Bildschirmbreiten

  • Ein- und Ausfliegen ist auch kein Problem mit diesem CSS:

  • PRIMA!!! Es funktioniert (wohl)!


    Aber etwas anderes: Kann es sein, das meine Browser das <noscript><link href="css/nojs.css" rel="stylesheet"></noscript>

    im <head> nicht interpretiert?

    Dort habe ich in nojs.css folgendes stehen, für eben dem Fall bei ausgeschalteten scripten:



    Nur eben in dieser "mittleren" Position stellt sich das Menü bei "ausgeschaltetem script" nicht ideal dar.

    Deshalb wollte ich der Klasse .contentspan die Richtung ändern in column

    Oben der "Content" darunter das Menü.


    Aber irgendwie funktioniert gar nichts. :o(

  • Soweit funktioniert es, auch bei ausgeschaltetem java-script (obwohl das bestimmt selten der Fall sein wird!)


    Habe jetzt als nojs.css:



    Doch ein Fehler macht mir der Opera und der Chrome eben bei der mittleren Einstellung bei ausgeschaltetem java-script

    Code
    @media screen and (min-width: 850px) and (max-width: 1440px) {}


    dort nimmt <nav> nur eine bestimmte Höhe ein (nicht die Höhe für die gesamte Navi), und überlagert sich mit dem Content.


    Wie kommt das und wie stellt man das ab?


    Gute n8

    der einsiedelnde

  • Ja, aus unerfindlichen Gründen funktioniert das.

    Ich muss das Ganze wohl nochmal vonvornean neu aufziehen und tippen.

    Es scheint so als wenn sich zwei display: flex; untereinander nicht vertragen oder es irgendwo fehl angebracht ist.


    Frage aber: Wie würdest Du für diesen noscript-Fall das Menü anordnen, unter dem Content oder wie jetzt darüber.

    Ich tendiere irgendwie ihn unter dem Content anzusiedeln, Hab schonmal für main : order: 1; und #main-nav entsprechend order:2; ausprobiert.

  • Wenn du es 150-prozentig machen willst, würde ich den main-Content oben anordnen, damit ein Besucher zuerst die Inhalte zu Gesicht bekommt. Aber oben einen kleinen Knopf, der mit einem a-href-Link zu dem Menü unten führt

  • So, habe alles für den <noscript> - Fall geändert...


    Folgende Probleme habe ich noch:


    A)

    Im älteren Firefox 52.9.0 , Opera 36.0.2130.80 und im Edge

    nimmt #main-nav {} im Fall von [aria-expanded="false"] (also im geschlossenen Menü) nicht nur die Breite vom Button an , sondern ist viel breiter.


    Wie kommt das denn?


    B)


    Im Edge scheint die Navigation #main-nav {} nicht die Breite des Bottons einzunehmen, geschweigedenn die Breite der gesamten Navigation




    C)


    Ich werde sämtlichen inhalt in einem mittigen wrapper darstellen, doch wie passe ich nun mithilfe von position: relative; / position: absolute; und overflow: hidden; das Schiebemenü an das man es an den Rändern nicht sieht?

    Wie setzte ich das nun?


    D)


    Jetzt habe ich gesehen wie alles im IE aussieht.... katastrophal....

    Im Firefox Quantum (63.0.3) , Opera Version:56.0.3051.116 & Chrome Version 70.0.3538.110

    scheint alles wunderbar zu laufen.

    Nur eben der edge, da sieht es so aus:



    Was ist da schon wieder los?


    Gute n8


    der einsiedelnde


  • Ach ja, der IE mal wieder ...


    Das mit der Nav wird hier diskutiert:
    https://stackoverflow.com/ques…roperty-not-working-in-ie

    Bei mir funktioniert es, wenn ich das flex für die Nav ganz deaktiviere.


    Und das mit dem verzerrten Logo kenne ich schon, wenn das Bild ein Flexitem ist, funktioniert es nur, wenn man einen Wrapper darum herum legt.


    Das Problem mit Fontawesome habe ich noch nicht untersucht.


    html-seminar.de/woltlab/attachment/1736/

  • Ich werde alles von Anfang an neu struckturieren, vorallem das CSS (da scheint mir der Haken zu sein das im Edge nicht alles funktioniert!)

    Meine Frage: Um den gesamten Inhalt zu zentrieren, soll ich da auf einen "wrapper" zurückgreifen oder lieber so wie ich es derzeit habe

    Was ist besser, auch in Hinsicht wenn ich ein Hintergrundbild verwende (villeicht aber auch nicht!)

    Im Netz steht sowohl ein für und ein wieder...


    Gruß der einsiedelnde

  • Kannst die jetzt alles mal anschauen:

    Was jetzt noch ist, das im IE das #main-nav bis nach ganz unten "stretched", sowohl als Button als auch wenn das Untermenü sichtbar ist. Im Opera, Firefox und Chrome scheint es so, das die Höhe der Menge des Contents anzupassen scheint, nur nicht im Edge. Ein einfaches height: auto; funktioniert nicht. Ist wohl nav button[aria-expanded="true"]+ul {} richtig die Höhe "anzusprechen"? Nur mit was? align-items: ??? und stretch .... Was funktioniert da?


    Gute n8 der einsiedelnde

  • Zitat

    Was jetzt noch ist, das im IE das #main-nav bis nach ganz unten "stretched", sowohl als Button als auch wenn das Untermenü sichtbar ist.

    Das kannst Du leicht ändern, indem Du diesem Element ein align-self: flex-start; verpasst. Selber finde ich es aber schöner, wenn der dunklere Hintergrund die ganze Höhe ausfüllt.

  • einsiedler hast du den einen Schönheitsfehler schon gesehen ?

    Wenn du das Menü auf machst steht dann ja da Menü schiessen. Das sieht in etwa so aus bei mir


    X m

    enu

    schlis

    sen


    Ich meine hauptsächlich das M ,sehe ja schöner aus wenn es neben enu stehe würde.

    also so

    X

    Menü

    zu


    Aber das mußt du wissen, weil ist mir nur so aufgefallen

  • Also bis jetzt gefällt mir alles, selbst im IE10 sieht es (NOCH) vernünftig aus und es scheint so, das alles funktioniert.

    Selbst im IE9 sieht alles ganz gut aus:



    Ich überlege mir ob ich mir die Mühe mache, das im IE9 der Link und der Botton per Tabelle nebeneinander angezeigt wird.

    Wenn nicht noch mehr Probleme im IE9 (durch mehr/anderen Content) entstehen, würde das ja doch gehen.


    Werde jetzt mal das mit dem align-self: flex-start; ausprobieren @Sempervivum


    Ja @basti1012, das ist mir auch schon aufgefallen. Eigentlich wollte ich den Zusatztext (Menü öffnen / schliessen) verschwinden lassen das nur der Botton

    wirkt. eigentlich weiß man ja heute was mit dem Sandwich und dem X gemeint ist, und das mit den Pfeilen nach oben / unten kann man sich leicht erschliessen.

    Wenn ich aber den Button als auch den (Zusatz)-Text möchte, müsste man beides wohl jeweils in eine Tabelle packen um beides zu "bändigen", oder?


    Gruß der einsiedelnde

  • Ich brauche nochmal euren Rat + Hilfe


    Bisher habe ich die Menüführung so geplant wie unter


    Ich möchte das Ganze ein wenig erweitern siehe B)

    Wenn man den + Botton drückt das weitere Informationen sichtbar werden , die man durch - wieder "zurückschiebt"

    Die Verlinkungen sind ja ohnehin schon "sichtbar" und "benutzbar",

    also wenn das Browserfenster zu schmal wird brauchen diese Zusatzinformationen nicht angezeigt werden.

    Haltet ihr soetwas für (einfach) machbar?

    Und/oder überhaupt sinnvoll?

    Was denkt ihr?


    Werde mich morgen daranmachen...



    Gruß der einsiedelnde

  • Haltet ihr soetwas für (einfach) machbar?

    Und/oder überhaupt sinnvoll?

    Was denkt ihr?

    Machbar ist das natürlich. Aber bei der umsetztung hast du ja schon beste hilfe.


    Aber ob das sinvoll ist weiß ich nicht .Ich finde nur das ein Menü zur Navigation sein soll und nicht noch mit Bilder und co voll gepackt werden sollte. Mir wäre es dann zu unübersichlich.

    Aber das ist meine Meinung. Jeder sieht das anders und im endeffekt mußt du das wissen wie du deine Seite gestallten willst.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!