nicht angemeldet
Auge
Rolf B
Gunnar Bittersmann
Auge
Gunnar Bittersmann
Auge
Rolf B
Rolf B
Gunnar Bittersmann
Hallo!
ich habe folgendes HTML
Matthias Scharwies<nav>
<details>
<summary class="popover-trigger">Menü ☰</summary>
<a href="HTTPS//:">Startseite</a><br>
<a href="HTTPS//:">Aktuelles</a><br>
<a href="HTTPS//:">Datenschutzhinweise</a><br>
<a href="HTTPS//:">Impressum</a>
</details>
</nav>
Wie kann ich dies unterdrücken und die Texte nebeneinander stellen, wenn Breite des Bildschirms größer xem?
Zusatzfrage: Wie kann ich das <br> vermeiden?
Hallo
ich habe folgendes HTML
<nav> <details> <summary class="popover-trigger">Menü ☰</summary> <a href="HTTPS//:">Startseite</a><br> <a href="HTTPS//:">Aktuelles</a><br> <a href="HTTPS//:">Datenschutzhinweise</a><br> <a href="HTTPS//:">Impressum</a> </details> </nav>Wie kann ich dies unterdrücken und die Texte nebeneinander stellen, wenn Breite des Bildschirms größer xem?
Zusatzfrage: Wie kann ich das <br> vermeiden?
Fangen wir hinten an, weil mit dem Umbrüchen dein Wunsch der horizontalen Darstellung nicht erfüllbar ist. Die Links in einer Liste aufzuführen, macht den HTML-Umbruch obsolet.
<ul>
<li><a href="HTTPS//:">Startseite</a></li>
<li><a href="HTTPS//:">Aktuelles</a></li>
<li><a href="HTTPS//:">Datenschutzhinweise</a></li>
<li><a href="HTTPS//:">Impressum</a></li>
</ul>
Die Links werden nun nachwievor untereinander dargestellt. Die Listenpunktzeichen und die vordefinierte Einrückung lassen sich mit CSS entfernen.
Wenn du die Darstellung ab einer bestimmten Mindestbreite auf horizontal umschalten willst, bietet sich dazu ein Media-Query an.
/* Standardregeln für schmale Viewports und allgemeingültige Regeln */
@media screen and (min-width:38em) {
/* abweichende Regeln für breitere Viewports */
nav li { display: inline; }
}
Die im Beispiel gezeigte Breite(ngrenze) von 38em ist willkürlich gewählt. In dem Block kannst du jedenfalls die Umschaltung vornehmen. Mit display: inline; geht das am einfachsten. Allerdings hat man mit einer Flexbox auf die Liste an sich mehr Einflussmöglichkeiten auf die Darstellung der Listenpunkte. Das kommt dann auf die konkreten Anforderungen für dein Projekt an. Die kennen wir allerdings bis jetzt nicht.
Tschö, Auge
Hallo Auge,
zeitgleicher Post 😀
display:inline geht auch, ja. Die von mir vorgeschlagene Flexbox bietet dazu noch Optionen, wie man die Items in der Breite verteilt.
Rolf
@@Rolf B
display:inline geht auch, ja. Die von mir vorgeschlagene Flexbox bietet dazu noch Optionen, wie man die Items in der Breite verteilt.
Und wie man den Abstand zwischen den Items hinbekommt. Mit gap bei Flexbox (o.a. Grid) ist das einfach gemacht. Wenn man da mit margin-inline rumhantiert, muss man das erste oder letzte gesondert behandeln.
🖖 Live long and prosper
@@Auge
Fangen wir hinten an, weil mit dem Umbrüchen dein Wunsch der horizontalen Darstellung nicht erfüllbar ist.
Doch, das ist es. Ziemlich einfach sogar: br { display: none } ☞ Codepen
Die Links in einer Liste aufzuführen, macht den HTML-Umbruch obsolet.
Ja, die natürlich zu bevorziehende Variante.
🖖 Live long and prosper
Hallo
Fangen wir hinten an, weil mit dem Umbrüchen dein Wunsch der horizontalen Darstellung nicht erfüllbar ist.
Doch, das ist es. Ziemlich einfach sogar:
br { display: none }☞ Codepen
Nichts für Ungut, aber das läuft bei mir unter „Hack“. Undzwar nicht unter „gutem Hack“ oder „interessantem Hack“, sondern unter „das-wird-von-mir-entgegen-seiner-eigentlichen-Funktion-hingebogen-Hack“. Kann man im Einzelfall machen, es wird wohl auch reale Anwendungen geben. Wenn es aber stattdessen, wie im Falle einer Navigation, eine sinnvollere, eingeführte und ausgereifte Technik gibt, sollte man die auch nutzen.
Wir stellen fest, es geht, aber es geht auch sinnvoller.
Tschö, Auge
Hallo Auge,
ich glaube, Gunnar hat da das Ironie-Tag vergessen 😉
Rolf
@@Rolf B
ich glaube, Gunnar hat da das Ironie-Tag vergessen 😉
Nö, wieso?
Auges „mit dem Umbrüchen dein Wunsch der horizontalen Darstellung nicht erfüllbar“ konnte man so nicht stehen lassen. Über „es geht, aber es geht auch sinnvoller“ sind wir uns einig, ganz ohne Ironie.
🖖 Live long and prosper
Hallo
KISS empfiehlt dass <br> und <ul> unterlassen werden, da in beiden Fällen empfohlen wurde, dass ihre Wirkung mit CSS neutralisiert werden sollte.
Eine Liste empfliehlt sich erst dann, wenn eine Form hierarchisierter Bewertung der Links vorliegt. Das ist hier aber nicht der Fall.
Die white-space Eigenschaft ist hilfreich. Die Menge der Links ist durch das details Element adequat gruppiert und durch das summary element sogar betitelt.
mit freundlichen Grüssen Beatovich
In der Kürze ging etwas verloren. Das summary betitelt etwas. Das Betitelte darf durchaus in einem Element (zum Beipiel <p>) zusammengefasst werden. Es wäre dann dieses Element dessen white-space Eigenschaft (oder display:grid , display:flex) bearbeitet werden kann.
mfg Beatovich
@@Beatovich
KISS empfiehlt dass <br> und <ul> unterlassen werden, da in beiden Fällen empfohlen wurde, dass ihre Wirkung mit CSS neutralisiert werden sollte.
Nein. Eine Wirkung von ul-Markup ist, dass eine Liste von Screenreadern als Liste angesagt wird. Die Wirkung wird nicht mit CSS neutralisiert (außer im Safari).
Eine Liste empfliehlt sich erst dann, wenn eine Form hierarchisierter Bewertung der Links vorliegt. Das ist hier aber nicht der Fall.
Du sprichst dem ul-Element (unordered list) generell jegliche Existenzberechtigung ab?
🖖 Live long and prosper
@@Beatovich
Du sprichst dem
ul-Element (unordered list) generell jegliche Existenzberechtigung ab?
Ich bin ein a) notorischer Listenfetischist, der b) Listen innerhalb normaler Paragraphen verwendet und c) es unendlich bedauert dass Listen auf dem Blocklevel definiert sind und d) is Graf Zahl mein zweiter Name.
Alles ist intrinsisch eine Liste, im sprachlichen Kontext sogar eine geordnete Liste. Streng genommen hebe ich mit einem ul jede Ordnung auf. Das hat manchmal durchaus Berechtigung. Aber es ist selten der Fall dass jemand Links ohne alle Prioritäten schreibt.
In Bezug auf Usability: natürlich bieten Listen eine zusätzliche accessibility. Aber die ist ja bei Links bereits vorhanden. Man hüte sich vor Accessibility clutter.
Deshalb: Sähe ich Grund meine Links weiter zu gruppieren, dann wären in der Tat verschachtelte ul das Mittel der Wahl. Denn dazu sind ul Elemente gut: Hierarchien zu bilden ohne Prioritäten vorzuschreiben.
Das Wort "generell" ist hier deplaziert.
mfg Beatovich
Servus!
@@Beatovich
Schön, wieder einmal von Dir zu hören!
Herzliche Grüße
Matthias Scharwies
Servus!
@@Beatovich
Schön, wieder einmal von Dir zu hören!
Herzliche Grüße
Matthias Scharwies
Ach wie schön, hier erinnert zu werden. Darf ich das ganze Team von SelfHTML hier mal begrüssen. Ich gestehe meine oft lange Abstinenzen. Aber es freut mich doch wie sehr SelfHTML immer noch das gleiche*** ist. Hier werden immer noch die besten Korinthen gehackt.
*** Kleinere Änderungen werden von mir durchaus wahrgenommen.
@@Beatovich
b) Listen innerhalb normaler Paragraphen verwendet
Paragraphen? Bist du Anwalt?
In Bezug auf Usability: natürlich bieten Listen eine zusätzliche accessibility. Aber die ist ja bei Links bereits vorhanden. Man hüte sich vor Accessibility clutter.
Ich hab schon Nutzertests mit Blinden gemacht. Und die fanden das Listen-Markup bei Linklisten durchaus hilfreich. Ich will mich aber davor hüten, ‚fragste einen, kennste alle‘ zu denken. Möglicherweise empfinden es andere Blinde als clutter. Vielleicht ist das auch eine Einstellung im Screenreader, wie geschwätzig der ist. Dazu müsste das Listen-Markup aber erst einmal da sein.
🖖 Live long and prosper
Hallo
KISS empfiehlt dass <br> und <ul> unterlassen werden, da in beiden Fällen empfohlen wurde, dass ihre Wirkung mit CSS neutralisiert werden sollte.
Wo soll die „Wirkung“ einer Liste „neutralisiert“ werden?
Eine Liste empfliehlt sich erst dann, wenn eine Form hierarchisierter Bewertung der Links vorliegt. Das ist hier aber nicht der Fall.
Das halte ich für Quatsch. Eine Liste (gerade eine ungeordnete solche) ist per Definition nicht hierarchisch sondern flach. Sie würde erst hierarchisch, wenn verschachtelt. Die im Ausgangsposting gezeigte Navigation ist nicht verschachtelt, hat also keine Hierarchie. Dennoch ist sie eine Liste von Links und sollte mMn auch so ausgezeichnet werden.
Die white-space Eigenschaft ist hilfreich. Die Menge der Links ist durch das details Element adequat gruppiert und durch das summary element sogar betitelt.
Was gruppiert denn das details konkret?
Tschö, Auge
Hallo Das halte ich für Quatsch. Eine Liste (gerade eine ungeordnete solche) ist per Definition nicht hierarchisch sondern flach.
Alles ist eine (flache) Liste. Text isr eine Liste von Sätzen, Sätze sind Listen von Halbsätzern, welche Listen von Worte sind, welche widerum Listen von Buchstaben sind. Du brauchst die Listensicht von Links nicht zu verteidigen. Du musst mir erklären, warum dir alle anderen Listen egal sind.
Was gruppiert denn das details konkret?
Was gruppiert denn ein ul konkret?
Wir benutzen Elemente wie Klammern. Die Klammern bleiben ihrer Aussage nach abstrakt und neutral. Was die Klammern rechtfertigt ist die Idee einer Eigenschaftsmenge. Diese Eigenschaftsmenge wurde im <nav> Element angekündigt. Der split zwischen nav und details ist hier allein technischer Natur.
KISS empfiehlt im übrigen auch, dass du mal deine Wange herhältst.
Also reden wir über listen. Listen an sich sind sinnleeres gerede, weil alles Gerede in Listen vorkommt. Aber nicht alles Gerede is von gleichartiger Logic. Im Falle von von Links stehen mir Optionen zur Verfügung. Ich kann genau eine Option realisieren, nicht alle. Aber ich muss zuerst aller optionen bewusst werden. Das ist der unterschied zwischen geordnet und ungeordnet. Also wie geht das? Zuerst muss ich im vollen Zyklus durch alle Optionen navigieren, dann kann ich mich für eine oder keine Option entscheiden. Wenn du das abbilden willst ist deine ul nicht mal annähernd das richtige Instrument. Als Augentier kann es dir egal sein, welche Elemente der Darstellung einer Menge zugrunde liegen. Aber das Ohrentier muss sorgsam durch eine Liste von Angeboten geführt werden, nicht nur einmal, sondern mehmals, wobei eine Exit Strategie jederzeit verfügbar sein muss. ul greifen hier viel zu kurz.
Also wie soll ich das Ohrentier führen. Das nav Element besagt dass hier Navigationsmöglichkeiten vorliegen. Das summary informiert mich darüber, ob es rentabel ist diesen Irrgarten (in Listenform oder ohne) zu betreten. Das ist das wichtige. Das details als ganzes erlaubt mir aber, den Irrgarten nicht zu betreten. Hast du ihn aber mal betreten spielt das ul keine Rolle mehr. Es ist nur Tünche.
mfg Beatovich
Hallo Beatovich,
Alles ist eine (flache) Liste
Das ist Unsinn. Zumindest, was Listen in HTML angeht. Ich bin sicher, dass du das genau weißt und spare mir die Begründung.
Rolf
Hallo Julian,
das <br> kannst Du vermeiden, indem Du die <a> in eine ul-Liste einrahmst. Aus Sicht der Zugänglichkeit ist das ohnehin eine gute Idee ("Navigation, Liste mit 4 Einträgen, Eintrag 1: Link: Startseite..." und so weiter).
Die Listenpunkte, die Dir das ul beschert, kannst Du mit list-style:none vermeiden, und du musst dem ul-Element das Padding wegnehmen.
Die Anordnung nebeneinander bekommst Du hin, wenn Du dem ul bei genügend breiten Schirm (@media-Abfrage) bzw. bei genügend breitem details-Element (@container Abfrage) ein display: flex gibst.
Reichen diese Hinweise oder brauchst Du mehr How-To Infos?
Rolf
@@Rolf B
Reichen diese Hinweise oder brauchst Du mehr How-To Infos?
Vermutlich reichten sie nicht. Bei breitem Bildschirm will man das Menü nicht nur horizontal darstellen, sondern initial aufgeklapt. „Menü“ und das Hamburger-Icon sollen dann nicht zu sehen sein.
Bei der Realisierung mit details braucht man AFAIS etwas JavaScript, um das Ding auf open zu setzen. Sieht dann bspw so aus: Codepen
🖖 Live long and prosper
@@Gunnar Bittersmann
Bei breitem Bildschirm will man das Menü nicht nur horizontal darstellen, sondern initial aufgeklapt. „Menü“ und das Hamburger-Icon sollen dann nicht zu sehen sein.
Bei der Realisierung mit
detailsbraucht man AFAIS etwas JavaScript
Da habe ich nicht weit genug gesehen. content-visibility heißt das Zauberwort:
::details-content {
content-visibility: visible;
}
Look ma, no JavaScript: Codepen
🖖 Live long and prosper
@@Julian
<summary class="popover-trigger">Menü ☰</summary>
Ein Screenreader sollte sich nicht anschicken, das Hamburger-Icon irgendwie vorzulesen. Also vor Screenreadern verstecken:
<summary class="popover-trigger">
Menü
<span aria-hidden="true">☰</span>
</summary>
🖖 Live long and prosper
PS. Solltest du auf die Idee kommen, nur das Hamburger-Icon anzuzeigen, sollte ein Screenreadern trotzdem „Menü“ ansagen. Das muss also im Markup sein, dann visuell versteckt.
Hallo,
viel Stoff zu verdauen!
Dafür erst einmal Danke. Ich tauche erst einmal ab, um das alles zu sortieren und zu realisieren.
Mit Sicherheit werde ich weitere Hilfe brauchen.
Soll ich dann einen neuen thread aufmachen?
@@Julian
Soll ich dann einen neuen thread aufmachen?
Nö, wenn’s zum gleichen Thema ist, dann nicht. Wir kriegen schon mit, wenn du dich hier wieder meldest.
🖖 Live long and prosper