nicht angemeldet
Rolf B
kai345
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Marc
Rolf B
JürgenB
Liebe Community,
als Laie bin ich dabei meine erste, eigene Website zu programmieren. An einer Stelle komme ich einfach nicht weiter – der Menüleiste. Diese soll sich – bei Abruf der Website vom Smartphone – an das Hochkantformat anpassen.
Skizze siehe Bild anbei.
Würde mich sehr freuen, wenn mir jemand helfen und sich den Code ansehen könnte. 1000 Dank im Voraus!
Viele Grüße,
Theresa
Hallo Theresa,
bist Du sicher, dass Du auf dem Smartphone ein zweispaltiges Layout haben willst? Auf einem Tablet mag das noch gehen, aber Smartphone, das könnte eng werden.
Die Menüleiste ist dieses braun-orange Ding mit "Work" und "Contact"? Die kriegt man natürlich nach unten, aber die Frage wäre: Was passiert, wenn der Anwender die Seite scrollt? Soll sie dann unten bleiben? Und angenommen, du bist auf einem Tablet und hast Platz für 2 Spalten - was ist mit dem Inhalt von Spalte 3?
Ich glaube, dein Layout hat mehr Probleme als nur die Menüleiste.
Grundsätzlich wäre Grid-Layout eine Lösung für Dich. Unser Wiki weiß eine Menge darüber. Zusammen mit @media Queries kannst Du die Anordnung deiner Inhalte damit umgestalten.
Das geht mit Einsatz der "Grid Maltechnik" in etwa so; ich nehme jetzt einfach mal an dass zwei Spalten auf dem Smartphone für dein Layout sinnvoll sind. Die Umschaltung erfolgt, wenn genug Platz ist. "50em" sind um die 800 Pixel, je nach Font. Damit dürfte deine Seite auf Desktop-Monitoren und zumindest auch auf Tablets im Querformat dreispaltig werden.
Matthias Apselbody {
display: grid;
grid-template: "area1 area2" 1fr
"logo logo" auto
"menu menu" auto
/ 1fr 1fr;
}
@media (min-width: 50em) {
body {
grid-template: "area1 area2 area3" 1fr
"empty logo menu" auto
/ 1fr 1fr 1fr;
}
}
/* Festlegen, dass ein HTML Element mit class="area1" im benannten
Gridbereich namens area1 platziert wird */
.area1 {
grid-area: area1;
}
Wie man es genau machen muss, insbesondere die Frage, was mit den Inhalten von Area 3 bei schmalen Bildschirmen ist, wäre noch zu klären. Und die Frage, ob man auf einem Smartphone Logo und Menü nicht besser nach oben legt, möchte ich auf aufwerfen. Mit grid-template ist das kein Problem. Schreib den Bereichsnamen einfach anderswo hin.
Rolf
Die Menüleiste ist dieses braun-orange Ding mit "Work" und "Contact"? Die kriegt man natürlich nach unten [...]
Falls dem so ist: Wichtig wäre hier noch, daß sie zwar im Layout unten stehen darf, im HTML jedoch oberhalb des Seiteninhaltes auftauchen sollte [oder zumindest einen (im Layout unsichtbaren) Skip-Link enthält], um nicht-visuellen Programmen die Anwahl zu ermöglichen, ohne sich den ganzen Seiteninhalt vorlesen lassen zu müssen.
Sollte man auch beachten, bevor man das Layout jetzt zusammenzimmert.
@@kai345
Falls dem so ist: Wichtig wäre hier noch, daß sie zwar im Layout unten stehen darf, im HTML jedoch oberhalb des Seiteninhaltes auftauchen sollte [oder zumindest einen (im Layout unsichtbaren) Skip-Link enthält], um nicht-visuellen Programmen die Anwahl zu ermöglichen, ohne sich den ganzen Seiteninhalt vorlesen lassen zu müssen.
Nö, die Tab-Reihenfolge (Reihenfolge der interaktiven Elemente bei Tastaturbedienung mit Tab-Taste) sollte mit der visuellen Reihenfolge übereinstimmen. Ansonsten sind sehende Tastatur-Nutzer verwirrt.
Das heißt: Menü unten auf dem Bildschirm → Menü unten im HTML. Dann möglicherweise einen Skiplink „zum Menü“ anbieten.
😷 LLAP
ich bin - aus purer Neugier - dem Link, und dort wem weiteren Link nachgegangen. Ich weiß nicht was dort gezeigt werden soll, aber einen sich einblendenden Link habe ich nicht gefunden, und auch nichts was auf einen tab reagiert.
;-(
Hallo michaah,
ich bin - aus purer Neugier - dem Link, und dort wem weiteren Link nachgegangen. Ich weiß nicht was dort gezeigt werden soll, aber einen sich einblendenden Link habe ich nicht gefunden, und auch nichts was auf einen tab reagiert.
;-(
Öffne mal https://cdpn.io/gunnarbittersmann/fullpage/jYaRJM und drücke die Tab-taste.
Bis demnächst
Matthias
Mahlzeit,
Falls dem so ist: Wichtig wäre hier noch, daß sie zwar im Layout unten stehen darf, im HTML jedoch oberhalb des Seiteninhaltes auftauchen sollte [oder zumindest einen (im Layout unsichtbaren) Skip-Link enthält], um nicht-visuellen Programmen die Anwahl zu ermöglichen, ohne sich den ganzen Seiteninhalt vorlesen lassen zu müssen.
Ich hab mich bisher nur rudimentär mit dem Thema befasst, aber ist es nicht eher üblich, per WAI-Aria die Lese-Reihenfolge anzugeben anstatt irgendwelche Klimmzüge zu machen mit unsichtbaren Links o.ä.?
@@m.
ist es nicht eher üblich, per WAI-Aria die Lese-Reihenfolge anzugeben anstatt irgendwelche Klimmzüge zu machen mit unsichtbaren Links o.ä.?
😷 LLAP
Mahlzeit,
Dein Link handelt von visuellen Programmen und ich bezog mich auf nicht-visuelle Programme. Daher mein Zitat. Ein Skiplink ist lediglich ergänzend für visuelle Geräte empfohlen und wirkt sich auf die Notwendigkeit einer strukturellen Navigation nicht aus, die von nicht visuellen Geräten genutzt werden kann.
Oder verstehe ich da die WCAG 2.0 falsch?
@@m.
Dein Link handelt von visuellen Programmen und ich bezog mich auf nicht-visuelle Programme. Daher mein Zitat.
Ich verstehe nicht, was du meisnt. Du willst doch nicht verschiedene Webseiten für Sehende und Screenreader-Nutzer bauen?
😷 LLAP
Mahlzeit,
Ich verstehe nicht, was du meisnt. Du willst doch nicht verschiedene Webseiten für Sehende und Screenreader-Nutzer bauen?
Ich benutze aber verschiedene Techniken innerhalb einer Webseite für verschiedene Endgeräte.
Irgendwie hat sich das hier im Forum in den letzten 20 Jahren immer noch nicht geändert. Wenn ich frage "Wie brate ich ein Ei?", kommt als Antwort "Als erstes musst du das Steak salzen und Pfeffern, weil ein Steak besser schmeckt als ein Ei". Faktisch zwar richtig aber thematisch völlig daneben.
@@m.
Ich verstehe nicht, was du meisnt. Du willst doch nicht verschiedene Webseiten für Sehende und Screenreader-Nutzer bauen?
Ich benutze aber verschiedene Techniken innerhalb einer Webseite für verschiedene Endgeräte.
?? Du hast das Menü zweimal im HTML? Einmal oben visually hidden und einmal unten aria-hidden="true"?
Irgendwie hat sich das hier im Forum in den letzten 20 Jahren immer noch nicht geändert. Wenn ich frage "Wie brate ich ein Ei?", kommt als Antwort "Als erstes musst du das Steak salzen und Pfeffern, weil ein Steak besser schmeckt als ein Ei". Faktisch zwar richtig aber thematisch völlig daneben.
Ich würde den Vergleich anders ziehen: Wenn jemand fragt „Wie brate ich ein veganes Ei?“, dann kommt der Hinweis, dass Eier zwar für Vegetarier akzeptabel sind, nicht aber für Veganer.
Faktisch richtig und voll im Thema.
😷 LLAP
Mahlzeit,
Ich würde den Vergleich anders ziehen: Wenn jemand fragt „Wie brate ich ein veganes Ei?“, dann kommt der Hinweis, dass Eier zwar für Vegatarier akzeptabel sind, nicht aber für Veganer.
Dieser Vergleich trifft es aber nicht mit dem Verhalten hier im Forum.
Auf die Frage "Wie brate ich ein veganes Ei?" kommt hier die Antwort "Um den Wagen zu starten, steckst du den Schlüssel in das Zündschloss und drehst ihn im Uhrzeigersinn"
@@m.
Dieser Vergleich trifft es aber nicht mit dem Verhalten hier im Forum.
Auf die Frage "Wie brate ich ein veganes Ei?" kommt hier die Antwort "Um den Wagen zu starten, steckst du den Schlüssel in das Zündschloss und drehst ihn im Uhrzeigersinn"
Da unterscheiden sich unsere Wahrnehmungen.
Aber wo wir bei Autos sind, passt’s ja wörtlich: YMMV (your mileage may vary).
😷 LLAP
Mahlzeit,
Da unterscheiden sich unsere Wahrnehmungen.
Deshalb bist du regelmässig hier und ich nur alle paar Monate. Mir ist lieber die Realität, die existiert. Hier ist es wieterhin eine Mischung aus Steinzeit und Wunschdenken mit eine Prise Realität, die entweder argwönisch geäugt wird oder versucht wird diese Wegzuargumentieren.
Hej m.,
Ich verstehe nicht, was du meisnt. Du willst doch nicht verschiedene Webseiten für Sehende und Screenreader-Nutzer bauen?
Ich benutze aber verschiedene Techniken innerhalb einer Webseite für verschiedene Endgeräte.
Das ist aber kompliziert. Was ist mit (schlecht) sehenden Nutzern von Screenreadern?
Sehenden Tastaturnutzern, die aufgrund eines schmalen viewports in der mobilen Ansicht landen?
Was mit den vielen Nutzern von VoiceOver auf einem Smartphone?
Alle einzeln ansprechen geht doch gar nicht…?!?
Irgendwie hat sich das hier im Forum in den letzten 20 Jahren immer noch nicht geändert. Wenn ich frage "Wie brate ich ein Ei?", kommt als Antwort "Als erstes musst du das Steak salzen und Pfeffern, weil ein Steak besser schmeckt als ein Ei". Faktisch zwar richtig aber thematisch völlig daneben.
Mag schon sein, dass das vorkommt, aber hier im Thread wird gerade erst einmal versucht zu verstehen, was du meinst, habe ich das Gefühl.
Ich für meinen Teil weiß noch nicht, was du genau tust und wie das konzeptionell einzuordnen ist.
Wenn du magst führe das mal etwas aus.
Marc (marctrix)
Mahlzeit,
Das ist aber kompliziert. Was ist mit (schlecht) sehenden Nutzern von Screenreadern?
Denen wird per Gerichtsbeschluss untersagt, das Internet zu nutzen. Zwingt sie ja keiner, schlecht zu sehen ...
Ich für meinen Teil weiß noch nicht, was du genau tust und wie das konzeptionell einzuordnen ist.
Wenn ich dir das sage, müsste ich dich anschliessend töten
Hallo m.,
irgendwer hat deinen Humor nicht verstanden und den Beitrag als unkonstruktiv zur Moderation gemeldet.
Unkonstruktiv ist er, aber hat Humor öfter mal so an sich. Wenn Du jetzt noch inhaltlich auf die Rückfragen eingehen könntest? Dann hätte mein Edit einen Sinn gehabt.
Rolf
Hallo,
ich mache das so:
https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation
Gruß
Jürgen