Responsive design

[Julian]

Hallo!

ich habe folgendes HTML

<nav>
    <details>
      <summary class="popover-trigger">Menü &#x2630;</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?

[Auge]

Hallo

ich habe folgendes HTML

<nav>
    <details>
      <summary class="popover-trigger">Menü &#x2630;</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

[Rolf B]

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

[Gunnar Bittersmann]

@@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

[Gunnar Bittersmann]

@@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

[Auge]

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

[Rolf B]

Hallo Auge,

ich glaube, Gunnar hat da das Ironie-Tag vergessen 😉

Rolf

[Gunnar Bittersmann]

@@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

[Rolf B]

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

[Gunnar Bittersmann]

@@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]

@@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 details braucht 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

[Gunnar Bittersmann]

@@Julian

      <summary class="popover-trigger">Menü &#x2630;</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">&#x2630;</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.

[Julian]

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?

[Gunnar Bittersmann]

@@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