einsiedler: Zweierlei Probleme mit meiner Website

Hallo liebe Forumer, habe das Problem wenn man das Bildschirmfenster zusammenschiebt , so ab 1440 px und dann auf das Sandwichbutton klickt, so scrollt das Menü ( <nav id="main-nav"> ) mittels transition nicht komplett die 23rem von links ein (die das Menü als Breite einnehmen sollte) , sondern ist viel schmaler/weniger. Woran ligt das?

Beispielseite

Zum zweiten : wenn man das Bildschirmfenster weiter zusammenschiebt, so bei weniger als 850px dann müssten alle Elemente von div.contentspan column angezeigt werden, aber anscheinend wollen das meine Browser nicht so anzeigen. Woran liegt das?

Beispielseite

Freundlicher Gruß der einsiedelnde

  1. Hallo Tassilo,

    bevor ich da genauer drauf gucke, solltest Du zunächst mal den JS-Fehler ausbauen. Wirf mal einen Blick in das Console-Tab der Entwicklerwerkzeuge.

    (index):127 Uncaught TypeError: Cannot read property 'length' of undefined

    at (index):127
    

    Wenn dein Script abbricht, mit dem Du das UI steuerst, kann das alles mögliche auslösen.

    Es scheint, als hättest Du die Klasse treeitemmain in main-treeitem umbenannt, das im JS aber nicht nachgezogen.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo Rolf, ja, genau so ist es, dürfte nun behoben sein. Aber nun zu den Fehlern die ich nicht verstehe. Den ersteren Fehler überhaupt nicht beim zweiten hab ich eine Ahnung, das dort zwei media-query Anwendungen sich quasi überlagern, sich ins Gehege kommen, sodaß man ein media-query auf einen bestimmten Bereich begrenzen muss, wobei alles was < 850px ist ausgelassen werden sollte. Was denkst Du?

      der einsiedelnde

      1. Hallo Tassilo,

        das ist nun mal so, Computer tun nie, was sie sollen. Immer nur das, was man ihnen sagt.

        Guck in sturm-main-style.css, Zeile 406, da steht flex-basis: 3.1rem;. Nun ist das die Breite deines Buttons, und der Text im aufgeklappten Menü braucht mehr Platz, darum drängt sich das noch ein bisschen auseinander. Aber eben nicht die Breite, die Du gern hättest.

        Meiner Meinung nach sollte da flex-basis:auto stehen und max-width: 23em, dann macht sich das Flex-Element so breit wie sein Inhalt ist, aber nicht mehr als die 23em aus der Breitwand-Ansicht. Vielleicht möchtest Du auch weniger als 23em haben.

        Deine Flex-Steuerung des contentspan ist sowieso suboptimal.

        (1) .contentspan hat flex-grow/shrink/basis Eigenschaften, aber das Elternelement (body) ist kein Flex-Container. Diese Kunst ist Kitsch und kann weg. (2) main hat flex-basis:calc(...), das ist unnötig, das kann der Browser besser alleine. Genau dafür ist flex-grow da. Wenn main-nav auf flex-grow:0 gesetzt ist und main auf flex-grow:1, dann wird der Browser das main-Element soweit verbreitern, dass es den Flex-Container (also .contentspan) füllt. (3) die Gruppe flex-grow:x; flex-shrink:y; flex-basis:z kannst Du zusammenfassen zu flex: x y z;. Für main-nav also z.B. flex:0 0 auto, für main wäre es flex:1 0 auto;

        Frage 2 verstehe ich nicht. Möchtest Du, dass Navigation und Inhalt übereinander (als column) angezeigt werden, statt nebeneinander? Das liegt am unveränderten display:flex; flex-direction:row; im .contentspan. Den müsstest Du in flex-direction:column umschießen. Allerdings scheint mir die Navigation etwas hoch für diese Idee, verstehe ich deinen Wunsch vielleicht falsch?

        Rolf

        --
        sumpsi - posui - clusi
        1. Habe nun mal Deine Punkte umgestellt. Nun sieht es so aus: Testseite

          Komiscch ist nun, im Fall des zusammengezogene Bildschirmfensters ( < 1440px ) das Menü breitet sich immer noch nicht die vollen 23em aus ABER wenn man ein Untermenübotton klickt dann ist das Menü auf der vollen Breite von 23rem.

          Zu b) wenn das Bildschirmfenster < 850px dann soll <main> unter dem <nav.main-nav> stehen , momentan hab ich in Zeile 434 ein flex-direction: column; stehen, aber ermacht es nicht.

          Der einsiedelnde

  2. Liebe Leute, bitte vergesst mich nicht.

    Komiscch ist nun, im Fall Bildschirmfenster < 1440px , das Menü breitet sich immer noch nicht die vollen 23em aus ABER wenn man ein Untermenü-Botton klickt dann ist das Menü auf der vollen Breite von 23rem.

    Zu b) wenn das Bildschirmfenster < 850px dann soll <main> unter dem <nav.main-nav> stehen , momentan hab ich in Zeile 434 ein flex-direction: column; stehen, aber ermacht es nicht.

    Der einsiedelnde

    1. Hallo einsiedler,

      dass das Menü keine 23em breit ist liegt am flex-basis:auto. Wie ich schrieb: Dann wird es so breit wie der Inhalt verlangt. Wenn Du es konstant 23em breit haben willst, nimm flex-basis:auto, dann brauchst Du auch kein max-width.

      Im Fall "schmaler 850px" ist bei mir das Menü oben und der main Bereich darunter. Entweder hast Du noch was gefixt, oder ich verstehe das Problem nicht.

      Ggf. solltest Du auch noch überlegen ob Du nicht die Break-Punkte em-basierend machst, dann skaliert das mit deiner Schriftgröße.

      Rolf

      --
      sumpsi - posui - clusi
      1. Hi,

        dass das Menü keine 23em breit ist liegt am flex-basis:auto. Wie ich schrieb: Dann wird es so breit wie der Inhalt verlangt. Wenn Du es konstant 23em breit haben willst, nimm flex-basis:auto, dann brauchst Du auch kein max-width.

        Hm. flex-basis:auto statt flex-basis:auto? Ob das wirklich einen Unterschied ausmacht? 😉

        cu,
        Andreas a/k/a MudGuard

        1. Hmmmm ja, das max-width: 23em; ist schon wichtig & richtig, tritt aber komischerweise nur ein wenn die Untermenüs "ausgeklappt" werden.

          seufZ

          1. Hallo einsiedler,

            ich hab mich vertippt, wie Andreas ironisch bemerkte. flex-basis:23em sollte das Menü auf gleicher Breite halten.

            Rolf

            --
            sumpsi - posui - clusi
            1. Ne ne, hab gerade herausgefunden , es mußte etwas in Zeile 172 geändert werden, bei mir funktioniert es, wie auch immer der Wert min-width: 22.3em; zustandekommt, zumindest zittert das Menü nicht wegen minimale px.

              Aber noch mal darauf zurückzukommen im Fall < 850px: Bei mir wird es falsch dargestellt, das Foto neben der Navi.

              Wie kommt das , was meinst Du mit fixen?

              Liegt das an meinen Browsern das esfalsch dargestellt wird oder muss ich mal im Confixx alles löschen und nochmal hochladen?

              Wie gesagt, es wird falsch dargestellt! Muss ich die Browser neu aufspielen? Opera, Firefox, Chrome und IE alle zeigens falsch an!

              der einsiedelnde

              1. Hallo einsiedler,

                ooookay. Wir redeten aneinander vorbei. Ich sprach vom flex-basis Attribut für #main-nav, vermutlich in Zeile 403. Da wollte ich eine flex-basis von 23em empfehlen - aber Du hast recht, das taugt nicht, dann ist das Menü auch zugeklappt 23em breit. Dein min-width 22.3em am li löst das. Das ist im Prinzip die Breite 23em, die Du im Breitbildmodus setzt, minus des Paddings von 0.35rem am #main-nav (es wird zweimal abgezogen weil das Padding links und rechts ist). Hier lauert aber noch ein Fallstrick, weil es bei einer Schriftgrößenänderung zu Diskrepanzen kommen kann. Derzeit scheint bei Dir em=rem zu sein (rem ist die Standardschriftgröße des Browsers, rem wie "Root EM"), deswegen solltest Du bei dem li nicht min-width:22.3em setzen, sonder die Browser-Rechnung nachvollziehen: calc(23em - 0.7rem).

                Merkwürdig finde ich die flex-grow/shrink/basis Eigenschaften für ul.group>li, also Zeile 172. Die sind nämlich ohne Wirkung, weil ul.group kein display:flex hat, und können weg.

                Die "850px und schmaler" Darstellung funkt bei mir jetzt auch nicht mehr, hm. Problem ist letztlich, dass das .contentspan Element sein flex-direction:row beibehält. Das muss zu column werden, wenn es übereinander stehen soll.

                Was ich übrigens auch nicht verstehe, ist deine HTML Struktur - hat Dir das einer empfohlen? Aus meiner Sicht ist die äußere Liste keine Kunst, sondern kann weg. Sie besteht nur aus einem Listenpunkt. Ich will Dir jetzt nicht alles, was schon funktioniert, auf den Kopf stellen - mir scheint nur, dass diese äußere Einpunktliste es unnötig komplex macht. Oder planst Du noch eine weitere Menüebene, d.h. hier weitere main-treeitem Einträge zu erstellen?

                <nav id="main-nav">
                  <ul class="tree">
                    <li class="main-treeitem">
                      <button>...</button>
                      <ul class="group">
                        <li class="treeitem">
                          <a>...</a>
                          <button>...</button>
                          <div class="nav-group">...</div>          
                        </li>
                      </ul>
                    </li>
                  </ul>
                </nav>
                

                Rolf

                --
                sumpsi - posui - clusi
                1. Ich habe jetzt mal in Zeile 172 folgendes eingesetzt: nav > ul ul.group > li {display:flex; min-width: calc(23em - 0.7rem); flex-flow:row wrap;}

                  Guck mal was er jetzt macht. KOMISCH!!!

                  B) Du meinst: <ul class="tree"> <li class="main-treeitem">

                  Das könne weg?

                  Hmmm ja, wäre wirklich einfacher, müßte nur die einzelnen Pfade zu den Bottons und den li`s neu ausknobeln. Wäre das wirklich wichtig, einfacher , schlanker ...

                  Zuallererst hatte ich es folgendermassen: `<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav"> <button aria-expanded=""> </button> <ul>

                  					<li>
                  						<a class="a-link" href="http://tassilosturm.de/aktuell.html">Aktuelles</a>
                  						<button aria-expanded=""> </button>
                  						<div class=nav-group>
                  							<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">aktuelle Ausstellungen</a>
                  							<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Blog</a>
                  						</div>
                  					</li>
                  
                  					<li>
                  						<a class="a-link" href="http://tassilosturm.de/arbeiten.html">Arbeiten</a>
                  						<button aria-expanded=""> </button>
                  						<div class=nav-group>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit01.html">Drifters, 2012</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Waldfrieden, 2006</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit03.html">Eremitage für Paris, 2006</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit04.html">Der Bau, 2007</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit05.html">Utopia Planetia, 2006</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit06.html">Kellerräume, 2012-15</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit07.html">Bunker / Maquetten, 2012-16</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit08.html">Take Shelter, 2015</a>
                  						</div>
                  					</li>
                  
                  					<li>					
                  						<a class="a-link" href="http://tassilosturm.de/cv.html">Curriculum Vitae</a>
                  						<button aria-expanded=""> </button>
                  						<div class=nav-group>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Lebenslauf</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Studium & Stipendien</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Publikationen (Auswahl)</a>
                  						</div>
                  					</li>
                  					
                  					<li>					
                  						<a class="a-link" href="http://tassilosturm.de/texte.html">Texte</a>
                  						<button aria-expanded=""> </button>
                  						<div class=nav-group>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Bettina Mühlbauer</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Friederike Fast</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Wolfgang Türk</a>
                  						</div>
                  					</li>
                  
                  					<li>					
                  						<a class="a-link" href="http://tassilosturm.de/ausstellungen.html">Ausstellungen</a>
                  						<button aria-expanded=""> </button>
                  						<div class=nav-group>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Einzelausstellungen</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Gruppenausstellungen</a>
                  						</div>
                  					</li>
                  
                  					<li>					
                  						<a class="a-link" href="http://tassilosturm.de/impressum.html">Impressum</a>
                  						<button aria-expanded=""> </button>
                  						<div class=nav-group>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Kontakt</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Fotodokumentation</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Links</a>
                  							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Datenschutz & Urheberrecht</a>
                  						</div>
                  					</li>
                  
                  				</ul>
                  			</nav>
                  		<main>
                  			<figure>
                  				<img class="imgA" src="img/indexseite/wohnsarg_bearbeitet_web.jpg" alt="Reiseesel" />
                  					<figcaption>Ich ziehe um!</figcaption>				
                  			</figure>
                  		</main>
                  	</div>`
                  

                  mein CSS /* nav specific */ nav > button {margin-left:auto; display: block; width:3.1rem; } nav > ul, nav > ul > li { margin:0; padding:0; display:block; } nav > ul > li { display:flex; flex-flow:row wrap; } nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); } nav > ul > li > :nth-child(2){display:block; width:3.1rem; } nav > ul > li > :nth-child(3){display:block; width:100%; }

                  				.nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;}    /* box-shadow: 0 0 0.2em 0 #666; */
                  				.nav-group a{display:block;}
                  
                  
                  				nav button:hover, nav button:focus {
                  					background: hsla(0, 100%, 100%, 0.8);
                  				}
                  
                  				button[aria-expanded] {    /*  NOTWENDIG? */
                  					font-size: 13px;
                  				}
                  
                  /* nav specific */
                  					nav > button {margin-left:auto; display: block; width:3.1rem; }
                  					nav > ul,
                  					nav > ul > li { margin:0; padding:0; display:block; }
                  					nav > ul > li { display:flex; flex-flow:row wrap; }
                  					nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); }
                  					nav > ul > li > :nth-child(2){display:block; width:3.1rem; }
                  					nav > ul > li > :nth-child(3){display:block; width:100%; }
                  
                  					.nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;}    /* box-shadow: 0 0 0.2em 0 #666; */
                  					.nav-group a{display:block;}
                  
                  
                  					nav button:hover, nav button:focus {
                  						background: hsla(0, 100%, 100%, 0.8);
                  					}
                  
                  					button[aria-expanded] {    /*  NOTWENDIG? */
                  						font-size: 13px;
                  					}
                  
                  
                  					/* Buttons mit Icons anreichern */
                  
                  					[aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } 
                  					nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                  					[aria-expanded]::after { content: " "; white-space: normal; }
                  
                  					[aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                  					nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                  					[aria-expanded="false"]::after { content: " "; }
                  
                  					[aria-expanded="false"] + * { display:none !important;}
                  
                  /*media queries*/
                  		@media screen and (min-width: 1440px) {
                  			#main-nav {
                  				flex-grow: auto;
                  				flex-shrink: auto;
                  				flex-basis: 24em;
                  				align-self: flex-start;
                  			}
                  			main {
                  				flex-grow: 1;
                  				flex-shrink: 1;
                  				flex-basis: calc(100% - 14em - 24em);
                  			}
                  			
                  			nav > [aria-expanded="false"]{ display:none; }
                  			nav > [aria-expanded="false"] + * {display:block !important; }
                  		}
                  	
                  		@media screen and (min-width: 850px) and (max-width: 1440px) {
                  			.contentspan {
                  					margin: 0 1.2em 0 1.2em;
                  			}
                              main {
                  				flex-grow: 1;
                  				flex-shrink: 1;
                  				flex-basis: auto;
                  					/*	flex: 1 1 auto; */
                              }
                  			#main-nav {
                  				align-self: flex-start;
                  			}
                  			
                              div.contentspan nav > ul {
                                  display: block !important;
                                  margin-left: -26em;
                                  transition: margin-left 0.15s;
                  				width: 22em;
                  			}
                              nav button[aria-expanded="true"]+ul {
                                  margin-left: 0;
                  				margin-top: 1em;
                              }
                  			
                  			nav button[aria-expanded="false"]+ul > * {
                                  display: none;
                              }			
                          }
                  		
                  		@media screen and (max-width: 850px) {
                  			.contentspan {
                  					display: flex;
                  					flex-direction: column;
                  					flex-wrap: nowrap;
                  					flex-grow: auto;
                  					flex-shrink: auto;
                  					flex-basis: auto;
                  						/*	flex: 0 0 100%; */
                  			}
                  			.fav {
                  				margin: 0;
                  				padding: 0;				
                  			}
                  			.headingspan {
                  				align-self: flex-start;				
                  			}
                  			header {
                  					display: flex;
                  					flex-direction: column;
                  					flex-wrap: wrap;
                  					align-items: center;
                  			}
                  			
                  			header img {
                  					height: 110px; 
                  			}
                  			#main-nav {
                  				flex-grow: auto;
                  				flex-shrink: auto;
                  				flex-basis: auto;	
                  					/*	flex: 1 1 100%; */
                  			}
                  			nav button[aria-expanded="true"]+ul {
                  				margin: 1em 0 0 0;
                  				padding: 0;
                  				width: 100%;
                  			}
                  		}
                  
                  1. Hallo einsiedler,

                    Guck mal was er jetzt macht. KOMISCH!!!

                    Meinst Du damit, dass jetzt die Navigationsgruppen rechts aus dem Menü hinaushängen? Ja, das liegt daran dass Du die max-width des #main-nav um 0.5em reduziert hat. Das muss schon alles passen.

                    Aber kannst Du nicht im li statt min-width width verwenden und die max-width am #main-nav einfach weglassen? Zu viele magische Zahlen bringen nur Durcheinander. Die width-Angabe am li sollte dann aber per @media-Abfrage nur für min-width:850px gelten, weil Du ja für schmalere Bildschirme volle Breite willst, oder?

                    Update: Sehe jetzt deinen Edit-Nachtrag. Sorry. Dafür ist es mir jetzt zu spät, diesen Schwall zu verdauen.

                    Rolf

                    --
                    sumpsi - posui - clusi
                    1. Juhu, Zeile 172 stimmt jetzt: nav > ul ul.group > li {display:flex; min-width: calc(22.5em - 0.7rem); flex-flow:row wrap;}

                    2. UPDATE: Morgen gehts weiter! Gute n8

                    3. Kann ich verstehen so um fast 1 Uhr! :o)

                      Morgen gehts weiter!

                      Hier noch meine Gedanken: Neee, es soll kein weiteres Menü dorthin. Ich hab das mit dem li class="main-treeitem" für den Sandwich & li class="treeitem" für die Unterpunkte angelegt. Es geht aber noch anders wie mein ursprünglicher Quelltext von 23:57 Uhr zeigt. Es funktioniert dort auch, auf die Buttons und die li`s zuzugreifen. Villeicht sollte ich das als erstes mal in Angriff nehmen und alles so "zurückzusetzen" bzw "umzustellen" bevor es weitergeht.

                      B) Ja, letztendlich werde ich die Breakpoints in em angeben, ist so besser. ABER 1440px ist eine Bildschirmbreiten-Einstellung , wieviel wäre das (ungefähr) umgerechnet in em? Das es einigermaßen so hinkommt, der Umbruch!

                      C) Doof find ich momentan noch wenn der Bildschirm größer als 1440px ist und der Ssandwich-Button aria-expandet="true" also das Menue "offen ist"ist & anschließend den Bildschirm wieder groß gezogen wird und dann anschließend wieder kleiner, das man dann dieselbe Einstellung wiederum hat. Villeicht mach ich es so, wenn immer der Bildschirm verkleinert wird also Breakpoint von 850px auf 1440 und Breakpoint von 1440 wiederum auf größer, das dann von dem ´Sandwich-Button das aria-expandet zurück auf "false" gesetzt wird! Sodaß bei einer "Rückkehr" das Menü nicht offen steht. das ist eine Javascript Angelegenheit. Kommt dann noch! hoffe Du verstehst das.

                      Jedenfalls nun GUTE n8

                      der einsiedelnde

                      1. Hallo einsiedler,

                        ich finde es ok, wenn der State des Menüs erhalten bleibt.

                        1em ist - solange Du den Font nicht änderst - mit 16px gleichsetzbar. Es ist die Breite eines m.

                        Rolf

                        --
                        sumpsi - posui - clusi
                        1. Wenn man

                          <ul class="tree" role="tree" aria-labelledby="main-nav">
                          	<li class="main-treeitem" role="main-treeitem">
                          		<button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button>
                          			<ul class="group" role="group">
                          

                          dort das erste ul und li löschen kann / könnte , dann ist mein Problem wohin mit dem role="tree" und vorallem dem aria-labelledby="main-nav" ist das nicht wichtig? Das war auch der Grund warum ich noch ein "umschliessendes" ul und li dort hingemacht habe. Oder kann man auf das aria-labelledby="main-nav" verzichten. Menno, wie macht man es richtig?

                          Ansonsten lasse ich es weg und dann ist es so wie mein ursprünglicher Quelltext, hier und da muß ich die Pfade zu den Buttons und den <li>`s anpassen, also da:

                          nav > button {margin-left:auto; display: block; width:3.1rem; }
                          					nav > ul,
                          					nav > ul > li { margin:0; padding:0; display:block; }
                          					nav > ul > li { display:flex; flex-flow:row wrap; }
                          					nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); }
                          					nav > ul > li > :nth-child(2){display:block; width:3.1rem; }
                          					nav > ul > li > :nth-child(3){display:block; width:100%; }
                          
                          [aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } 
                          nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                          [aria-expanded]::after { content: " "; white-space: normal; }
                          
                          [aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                          nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                          [aria-expanded="false"]::after { content: " "; }
                          
                          [aria-expanded="false"] + * { display:none !important;}
                          

                          Also WAS ist jetzt wichtig für meine Navi betreffs WAI-ARIA???

                          ODER wäre es so richti(er)?

                          <div class="contentspan">
                          			<a class="anzume" href="#main-nav">zum Hauptmenü</a>
                          			<nav id="main-nav" aria-labelledby="main-nav">
                          						<button aria-expanded="true"><span class="visually-hidden">HauptNavigation</span></button>
                          						<ul class="group" role="group">
                          
                          							<li class="treeitem" role="tree-item">
                          
                          etc. etc...
                          

                          Hoffe auf Antworten...

                          Es geht mir um die richtige "Form"...

                          lieben gruß und gute n8

                          der einsiedelnde

                          1. Hallo Tassilo,

                            wie gesagt - ich weiß nicht wo diese ul/li/ul/li Hierarchie herkommt. Wenn Dir das jemand anderes empfohlen hat, dann gibt's sicherlich Gründe dafür. Ich habe nicht alle Threads mitgelesen, die hier zur Sturm-Eremitage gelaufen sind, und darum erzähle ich jetzt vielleicht etwas, das im Widerspruch zu Aussagen von anderen steht.

                            Vielleicht verstehe ich das ja auch nicht richtig, Accessibility lerne ich noch. Im Zweifelsfall könnten die Anderen deshalb kompetenter sein...

                            Aber soweit ich das verstanden habe, ist es so, dass role="tree" bedeutet: Das ist ein Baum. Dein äußerer Ulli ist aber ein Extrastiel, an dem der Baum wächst. Deswegen (und auf Grund von Beispielen, die Onkel Bing Googlesby mir zeigt) meine ich, dass der Stiel weg und die tree-Rolle ein Ebene nach unten kann, also dahin, wo Du derzeit role="group" hast. Übrigens: role="tree-item" finde ich nirgends, muss das eventuell role="treeitem" heißen?

                            Derzeit hast Du ein ul mit role="tree" und darunter zwei Ebenen von group Rollen. Dein Menü ist aber nicht dreistufig, sondern zweistufig. Deswegen müsste es so machbar sein:

                            <nav id="main-nav">
                               <button id="menu-button" aria-expanded="true">...</button>
                               <ul role="tree">
                                  <li role="treeitem">
                                    <a href="...">Aktuelles</a><button aria-expanded="..."></button>
                                    <ul role="group">
                                       <li role="treeitem"><a href="...">aktuelle Ausstellungen</a></li>
                                       <li role="treeitem"><a href="...">Blog</a></li>
                                    </ul>
                                  </li>
                                  <li role="treeitem">
                                    <a href="...">Arbeiten</a><button aria-expanded="..."></button>
                                    <ul role="group">
                                       ...
                                    </ul>
                                  </li>
                               </ul>
                            </nav>
                            

                            Ganz wichtig finde ich, dass die Untermenüs kein div sind, sondern ebenfalls ein ul, und die Einträge darin li. Weil nur dann ein Screenreader daraus eine saubere Listenstruktur abliest.

                            Was mir zuerst nicht ganz klar war, ist dein aria-expanded am menu-button. Nach etwas Recherche habe ich aber gefunden, dass das ok ist, es fehlt aber was. Der Button selbst ist nicht expanded/collapsed, sondern der Menü-Baum. Deswegen musst Du dem Menü-Baum eine id geben und am Button mit aria-controls="id" angeben, welches Element expanded ist. Das ist etwas, das man gemäß W3C machen SOLL. Sie haben sogar ein Beispiel dazu. Wenn Du aria-controls nicht nutzen willst, dann müsstest Du das aria-expanded für die Submenüs auf die li Elemente legen. Den expanded-Zustand für den ganzen Baum würde ich auf das nav-Element legen, bin aber nicht sicher. Am nav Element hätte es den Vorteil, dass Du es zum Stylen des Hamburger-Buttons nutzen kannst. @Gunnar Bittersmann? Gehört der expanded-Zustand für's ganze Menü an den Baum oder an die Navigation?

                            Die class Zuweisungen KANN man machen, muss man aber nicht. Das tree-ul kannst Du im CSS mit #main-nav [role=tree] identifizieren, die li Elemente mit #main-nav [role=treeitem], die Untergruppen mit #main-nav [role=group]. Es würde etwas schwieriger, wenn Du zwei group-Ebenen hättest, dann KANN man mit class-Attributen arbeiten, es geht aber auch mit gezieltem Einsatz von Child-Kombinatoren (z.B. #main-nav > ul > li > [role=group] für die erste Group-Ebene). Diesen Kopf musst Du Dir aber nicht machen solange Du nur eine group-Ebene hast.

                            Rolf

                            --
                            sumpsi - posui - clusi
                            1. Hallo Rolf B,

                              Derzeit hast Du ein ul mit role="tree" und darunter zwei Ebenen von group Rollen.

                              Meiner Meinung nach sind die Rollen tree und treeitem (ohne Bindestrich, wie du schon schriebst) überflüssig. Sie transportieren keine Information, die nicht auch schon durch die Listenstruktur bekannt ist.

                              Bis demnächst
                              Matthias

                              --
                              Pantoffeltierchen haben keine Hobbys.
                              1. Hallo Matthias,

                                wie gesagt: ARIA ist nicht meine Stärke, aber wenn ich das beim W3C richtig las, dann ist tree und treeitem ist nicht überflüssig, nur unvollständig von Tassilo implementiert. Diese Rollen sind in WAI-Aria für baumoide Widgets vorgesehen. Was fehlt, ist eine bessere Tastatursteuerung für auf/ab und expland/collapse. Die wird vom W3C nämlich für Trees empfohlen.

                                Hauptunterschied zwischen list und tree: Äste eines Baums können eingeklappt werden. Zumindest habe ich die Aria-Kollegen so verstanden.

                                Rolf

                                --
                                sumpsi - posui - clusi
                              2. @@Matthias Apsel

                                Meiner Meinung nach sind die Rollen tree und treeitem (ohne Bindestrich, wie du schon schriebst) überflüssig. Sie transportieren keine Information, die nicht auch schon durch die Listenstruktur bekannt ist.

                                Sie transportieren Information: eben keine Listenstruktur, sondern eine Baumstruktur.

                                Eben darum wurden sie in diesem Beispiel auch gesetzt.

                                LLAP 🖖

                                --
                                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                            2. @@Rolf B

                              Ganz wichtig finde ich, dass die Untermenüs kein div sind, sondern ebenfalls ein ul, und die Einträge darin li. Weil nur dann ein Screenreader daraus eine saubere Listenstruktur abliest.

                              Nei-en. Ein Screenreader soll ja hier gar keine Listenstruktur ablesen – genau dazu ist ja role="tree"/"treeitem"/"group" da: dass der Screenreader daraus eine Baumstruktur abliest.

                              Da macht es keinen Unterschied, ob die ursprüngliche Rolle von Elementen überschrieben oder einem Element eine Rolle gegeben wird, das vorher gar keine hatte.

                              ul/li statt div/div ist natürlich trotzdem angebracht, ganz einfach weil die Menüstruktur eine verschachtelte Liste ist.

                              Was mir zuerst nicht ganz klar war, ist dein aria-expanded am menu-button. Nach etwas Recherche habe ich aber gefunden, dass das ok ist, es fehlt aber was. Der Button selbst ist nicht expanded/collapsed, sondern der Menü-Baum. Deswegen musst Du dem Menü-Baum eine id geben und am Button mit aria-controls="id" angeben, welches Element expanded ist.

                              Aria-Controls is Poop. (in Heydons einzigartiger Ausdrucksweise)

                              Das ist etwas, das man gemäß W3C machen SOLL.

                              WAI-ARIA Authoring Practices 1.1, 3.15 Menu Button spricht von „optionally“.

                              Es schadet aber nicht, wie auch Heydon im Abschnitt Aria-Controls des Inclusive-Components-Artikels „Menus & Menu Buttons“ sagt.

                              Aber wichtiger ist wohl, dass der ein-/ausgeblendete Bereich dem zugehörigen Steuerelement (dem Button) unmittelbar folgt. Sagt auch Marco Zehe in Easy ARIA Tip #5: aria-expanded and aria-controls.

                              Wenn Du aria-controls nicht nutzen willst, dann müsstest Du das aria-expanded für die Submenüs auf die li Elemente legen. Den expanded-Zustand für den ganzen Baum würde ich auf das nav-Element legen, bin aber nicht sicher.

                              Ich hätte gedacht, das aria-expanded-Attrbut gehört immer an das Steuerelement (den Button), nicht an den ein-/ausgeblendeten Bereich. Steht allerorts so zu lesen – außer in WAI-ARIA 1.1 / WAI-ARIA 1.2, wenn ich das richtig verstehe.

                              Auch in diesem Fall wurde das angekreidet.

                              LLAP 🖖

                              --
                              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                              1. Hallo Gunnar,

                                deswegen hatte ich Dich in meiner letzten Antwort erwähnt - ich fand das alles nämlich arg verwirrend.

                                Dass aria-expanded an das kontrollierende Element gehört, hat sich mir erstmal nicht erschlossen. Denn ich klappe ja das Menü auf, nicht den Button. Aber es ergibt schon Sinn, denn der Button hat den Fokus wenn der Screenreader sagen soll, ob das Element auf oder zu ist.

                                Also ok, es ist alles so wie Heydon vorschlägt: aria-expanded am Button und das kontrollierte Menü ist direkt dahinter. Und wenn aria-controls eh nicht sauber tickt, ok, dann wech damit.

                                Weil nur dann ein Screenreader daraus eine saubere Listenstruktur abliest. Nei-en.

                                Jaaa, gut. Ein Treenode hat eine Liste von Treeitems. So war's gemeint 😉. Jedenfalls kam mir eine div gekapselte Folge von a-Elementen mit role=treeitem merkwürdig vor.

                                Rolf

                                --
                                sumpsi - posui - clusi
                          2. Hallo einsiedler,

                            einen gravierenden Bug seh ich gerade: vor der @media screen and (max-width:850px) Zeile fehlt eine schließende geschweifte Klammer. Dadurch wird der vorherige Media-Block nicht beendet.

                            Rolf

                            --
                            sumpsi - posui - clusi
                        2. EDIT 2

                          Habe die fonts im html auf: font-size: 120%; gesetzt (also 19px 1.2em), warum auch immer, weiß nicht mehr wozu es gut war, sollte ich es in 1 em ändern?

                          1. Ich weiß nun das der Breakpunkt bei 90em (also 1440px) liegen muss!

                          gute n8 der einsiedelnde

                          1. Hallo einsiedler,

                            1. Ich weiß nun das der Breakpunkt bei 90em (also 1440px) liegen muss!

                            90em sind nicht immer und überall 1440px.

                            Bis demnächst
                            Matthias

                            --
                            Pantoffeltierchen haben keine Hobbys.
                        3. @@Rolf B

                          1em ist - solange Du den Font nicht änderst - mit 16px gleichsetzbar.

                          Das hängt vom Browser ab. Es gibt Browser, wo das nicht so ist.

                          Es ist die Breite eines m.

                          Das wage ich zu bezweifeln. Das dürfte doch von der Schriftart abhängen. Ein m in Helvetica ist sicher breiter als ein m in Helvetica Condensed.

                          LLAP 🖖

                          --
                          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                          1. Hallo Gunnar,

                            ich sehe mich korrigiert - es ist die Höhe (und damit auch Breite) eines Gevierts. D.h. Helvetica 16px und Helvetica Condensed 16px sollten zum gleichen em führen, richtig?

                            Rolf

                            --
                            sumpsi - posui - clusi
                  2. Ich habe jetzt mal in Zeile 172 folgendes eingesetzt: nav > ul ul.group > li {display:flex; min-width: calc(23em - 0.7rem); flex-flow:row wrap;}

                    Guck mal was er jetzt macht. KOMISCH!!!

                    B) Du meinst: <ul class="tree"> <li class="main-treeitem">

                    Das könne weg?

                    Hmmm ja, wäre wirklich einfacher, müßte nur die einzelnen Pfade zu den Bottons und den li`s neu ausknobeln. Wäre das wirklich wichtig, einfacher , schlanker ...

                    Zuallererst hatte ich es folgendermassen: `<div class="contentspan"> <a class="anzume" href="#main-nav">zum Hauptmenü</a> <nav id="main-nav"> <button aria-expanded=""> </button> <ul>

                    			<li>
                    				<a class="a-link" href="http://tassilosturm.de/aktuell.html">Aktuelles</a>
                    				<button aria-expanded=""> </button>
                    				<div class=nav-group>
                    					<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">aktuelle Ausstellungen</a>
                    							<a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Blog</a>
                    						</div>
                    					</li>
                    
                    					<li>
                    						<a class="a-link" href="http://tassilosturm.de/arbeiten.html">Arbeiten</a>
                    						<button aria-expanded=""> </button>
                    						<div class=nav-group>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit01.html">Drifters, 2012</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit02.html">Waldfrieden, 2006</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit03.html">Eremitage für Paris, 2006</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit04.html">Der Bau, 2007</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit05.html">Utopia Planetia, 2006</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit06.html">Kellerräume, 2012-15</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit07.html">Bunker / Maquetten, 2012-16</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/arbeit08.html">Take Shelter, 2015</a>
                    						</div>
                    					</li>
                    
                    					<li>					
                    						<a class="a-link" href="http://tassilosturm.de/cv.html">Curriculum Vitae</a>
                    						<button aria-expanded=""> </button>
                    						<div class=nav-group>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Lebenslauf</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Studium & Stipendien</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Publikationen (Auswahl)</a>
                    						</div>
                    					</li>
                    					
                    					<li>					
                    						<a class="a-link" href="http://tassilosturm.de/texte.html">Texte</a>
                    						<button aria-expanded=""> </button>
                    						<div class=nav-group>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Bettina Mühlbauer</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Friederike Fast</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/lebenslauf-text.html">Wolfgang Türk</a>
                    						</div>
                    					</li>
                    
                    					<li>					
                    						<a class="a-link" href="http://tassilosturm.de/ausstellungen.html">Ausstellungen</a>
                    						<button aria-expanded=""> </button>
                    						<div class=nav-group>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Einzelausstellungen</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/ausstellungen.html">Gruppenausstellungen</a>
                    						</div>
                    					</li>
                    
                    					<li>					
                    						<a class="a-link" href="http://tassilosturm.de/impressum.html">Impressum</a>
                    						<button aria-expanded=""> </button>
                    						<div class=nav-group>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Kontakt</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Fotodokumentation</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Links</a>
                    							 <a class="a-sublink" href="http://misanthrop.bplaced.net/sturm/impressum.html">Datenschutz & Urheberrecht</a>
                    						</div>
                    					</li>
                    
                    				</ul>
                    			</nav>
                    		<main>
                    			<figure>
                    				<img class="imgA" src="img/indexseite/wohnsarg_bearbeitet_web.jpg" alt="Reiseesel" />
                    					<figcaption>Ich ziehe um!</figcaption>				
                    			</figure>
                    		</main>
                    	</div>`
                    

                    mein CSS

                    /* nav specific */
                    					nav > button {margin-left:auto; display: block; width:3.1rem; }
                    					nav > ul,
                    					nav > ul > li { margin:0; padding:0; display:block; }
                    					nav > ul > li { display:flex; flex-flow:row wrap; }
                    					nav > ul > li > :nth-child(1){display:block; width:calc( 100% - 3.1rem); }
                    					nav > ul > li > :nth-child(2){display:block; width:3.1rem; }
                    					nav > ul > li > :nth-child(3){display:block; width:100%; }
                    
                    					.nav-group{ border: 4px solid black; padding: 0.2em 1.2vw; margin: 0.2em 0;}    /* box-shadow: 0 0 0.2em 0 #666; */
                    					.nav-group a{display:block;}
                    
                    
                    					nav button:hover, nav button:focus {
                    						background: hsla(0, 100%, 100%, 0.8);
                    					}
                    
                    					button[aria-expanded] {    /*  NOTWENDIG? */
                    						font-size: 13px;
                    					}
                    
                    
                    					/* Buttons mit Icons anreichern */
                    
                    					[aria-expanded]::before { content: '\f357'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; } 
                    					nav > [aria-expanded]::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                    					[aria-expanded]::after { content: " "; white-space: normal; }
                    
                    					[aria-expanded="false"]::before { content: '\f354'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                    					nav > [aria-expanded="false"]::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 2.1rem; }
                    					[aria-expanded="false"]::after { content: " "; }
                    
                    					[aria-expanded="false"] + * { display:none !important;}
                    /*media queries*/
                    		@media screen and (min-width: 1440px) {
                    			#main-nav {
                    				flex-grow: auto;
                    				flex-shrink: auto;
                    				flex-basis: 24em;
                    				align-self: flex-start;
                    			}
                    			main {
                    				flex-grow: 1;
                    				flex-shrink: 1;
                    				flex-basis: calc(100% - 14em - 24em);
                    			}
                    			
                    			nav > [aria-expanded="false"]{ display:none; }
                    			nav > [aria-expanded="false"] + * {display:block !important; }
                    		}
                    	
                    		@media screen and (min-width: 850px) and (max-width: 1440px) {
                    			.contentspan {
                    					margin: 0 1.2em 0 1.2em;
                    			}
                                main {
                    				flex-grow: 1;
                    				flex-shrink: 1;
                    				flex-basis: auto;
                    					/*	flex: 1 1 auto; */
                                }
                    			#main-nav {
                    				align-self: flex-start;
                    			}
                    			
                                div.contentspan nav > ul {
                                    display: block !important;
                                    margin-left: -26em;
                                    transition: margin-left 0.15s;
                    				width: 22em;
                    			}
                                nav button[aria-expanded="true"]+ul {
                                    margin-left: 0;
                    				margin-top: 1em;
                                }
                    			
                    			nav button[aria-expanded="false"]+ul > * {
                                    display: none;
                                }			
                            }
                    		
                    		@media screen and (max-width: 850px) {
                    			.contentspan {
                    					display: flex;
                    					flex-direction: column;
                    					flex-wrap: nowrap;
                    					flex-grow: auto;
                    					flex-shrink: auto;
                    					flex-basis: auto;
                    						/*	flex: 0 0 100%; */
                    			}
                    			.fav {
                    				margin: 0;
                    				padding: 0;				
                    			}
                    			.headingspan {
                    				align-self: flex-start;				
                    			}
                    			header {
                    					display: flex;
                    					flex-direction: column;
                    					flex-wrap: wrap;
                    					align-items: center;
                    			}
                    			
                    			header img {
                    					height: 110px; 
                    			}
                    			#main-nav {
                    				flex-grow: auto;
                    				flex-shrink: auto;
                    				flex-basis: auto;	
                    					/*	flex: 1 1 100%; */
                    			}
                    			nav button[aria-expanded="true"]+ul {
                    				margin: 1em 0 0 0;
                    				padding: 0;
                    				width: 100%;
                    			}
                    		}