Responsive Probleme mit vertikaler ul

[McDudelsack]

Hi zusammen, stehe vor einem doppelten Problem… Es handelt sich um 2 Seiten die ich gerade versuche responsive tauglich zu machen. Da die beiden Probleme fast identisch sind, schreibe ich mal beide Varianten hier hin.

Variante 1: Ich habe eine vertikale Navigation, umgeben von einem Container. Der Container hat eine Min-Height von 30px. Darin befindet siche eine ul mit dem Attribut list-style-type:none. Die a li elemente stehen auf display:block und haben oben genannte min-height. Nun habe ich ein Icon/Image eingebunden, dieses steht auch per CSS auf display:block. Nun möchte ich das, bei entsprechendem Viewport, auch die Beschriftung in dem darunterliegenden Span erscheint. Das klappt auch, allerdings wird das Element nicht größer (background), sondern geht über das li-element hinaus. Weiß leider gerade nicht wie ich es erklären soll, darum hier der Auszug aus dem CSS.

#navigation{
  min-height:30px;
  width:100%;
  background: #ff670f;
  border-bottom:1px solid #fff;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

#navigation ul{
  list-style-type:none;
  height:auto;
}

#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited, #navigation ul li a:active{
  display:block;
  width:20%;
  min-height:80px;
  box-sizing:border-box;
  border-right:1px solid black;
  float:left;
  transition: background 1s;
}

#navigation ul li a:hover, #navigation ul li a:focus{
  background:#389648
}

#navigation ul li a img{
  display:block;
  height:30px;
  margin:0 auto;
  
}

#navigation ul li a span{
  display:block;
  height:20;
  margin:0 auto;
  display:none;
}

Ein ähnliches Problem habe ich bei einer anderen Seite, wo ich die gleichen Ansätze habe, allerdings soll hier der text bei entsprechend großem Viewport neben dem img angezeigt werden. Hier ist nun das Problem, das der text nicht horizontal zentriertr wird. Dieses aber nur wenn das Icon angezeigt wird (testweise rausgenommen).

ich weiß es ist verwirrend geschrieben, bei Fragen bitte einfach melden. Vorzeige seiten habe ich leider nicht, da es beides geschützte Vereinsseiten sind.

Danke Euch

[MrMurphy1]

Hallo

Ohne den Quelltext läßt sich dein Problem nur allgemein lösen.

Vorzeige seiten habe ich leider nicht, da es beides geschützte Vereinsseiten sind.

Das hindert dich aber nicht daran eine anonymisierte Seite bei einem Freeware-Provider wie bplaced.net bereitzustellen. In die Navigation kannst du zum Beispiel Städtenamen oder Fahrzeugmarken eintragen.

Dein CSS enthält Fehler und Angaben, die so nicht verwendet werden sollten. Das läßt vermuten, dass du dich bislang davor gedrückt hast die Grundlagen von HTML und CSS zu lernen. Das wiederum fliegt dir jetzt bei der Navigation um die Ohren.

Ein Beispiel für Fehler: Durch das Float werden die a-Elemente aus dem Dokumentenfluß genommen. Dadurch musst du dann den a-Elementen eine Breite geben, anstatt den li-Elementen. Float sollte nur verwendet werden wenn auch dessen Nebenwirkungen bekannt sind und berücksichtigt werden.

Float ist zudem dafür gedacht, das Text andere Elemente wie zum Beispiel Bilder umfließten kann. Nicht jedoch, um Elemente auszurichten. Seit der Einführung von Flexbox sollte Float nur noch für seinen eigentlichen Zweck verwendet werden. Zumal Flexbox viel weniger Nebenwirkungen hat.

Ein Beispiel für Angaben, die so nicht verwendet werden sollten: Die height- und min-height-Angaben. Die Höhe von Containern richtet sich nach deren Inhalt. Deshalb sollten height- und min-height-Angaben nur in Ausnahmefällen verwendet werden.

Ein allgemeiner Lösungsvorschlag für dein Problem:

a) Auf die unnötige Liste verzichten.

b) Zum Layout der Navigation (und im Endeffekt nicht nur der Navigation) Flexbox verwenden.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

a) Auf die unnötige Liste verzichten.

Würdest du bitte nicht immer wieder denselben Quatsch erzählen? Danke.

LLAP 🖖

[MrMurphy1]

Hallo

Da es kein Quatsch ist: Nein.

Wenn du bessere Lösungen hast immer her damit.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Da es kein Quatsch ist: Nein.

Dass das Quatsch ist, hatten wir hier desöfteren schon. Zuletzt(?) in diesem Thread.

Wenn du bessere Lösungen hast immer her damit.

<a href="#main" class="skip-link">zum Hauptinhalt</a>
<nav>
  <ol>
    <li><a href="alpha">Alpha</a></li>
    <li><a tabindex="0" aria-current="page">Beta</a></li>
    <li><a href="gamma">Gamma</a></li>
    <li><a href="delta">Delta</a></li>
  </ol>
</nav>
<main id="main">…

(wenn man sich gerade auf Seite Beta befindet)

Beim Menüpunkt der aktuellen Seite könnte als Verweisziel auch der Hautinhalt der aktuellen Seite rein, also:

    <li><a href="#main" aria-current="page">Beta</a></li>

Der Skip-Link „zum Hauptinhalt“ wird visuell versteckt und nur bei .skip-link:focus angezeigt. Beipiel

LLAP 🖖

[MrMurphy1]

Hallo

Ich sehe jetzt keinen Zusammenhang mit dem Problem von McDudelsack.

Aber trotzdem: Also sind alle Lösungen mit einer ul-Liste und list-style-type: none; Unsinn?

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Ich sehe jetzt keinen Zusammenhang mit dem Problem von McDudelsack.

Ich auch nicht. Gibt es denn einen?

Ich bezog mich auf eine Falschaussage in deiner Antwort.

Aber trotzdem: Also sind alle Lösungen mit einer ul-Liste und list-style-type: none; Unsinn?

Äh nein, warum sollten sie?

Meinst du, weil ich in meinem Beispiel ol statt ul verwendet habe? Welche Art von Liste die passende ist, hängt davon ab, ob die Navigationspunkte geordnet sind (was bei „Alpha“, „Beta“, „Gamma“, „Delta“ naheliegend ist) oder eher nicht (was vielleicht sogar in der Mehrheit der Fälle der Fall ist).

LLAP 🖖

[MrMurphy1]

Hallo

Ich auch nicht.

Ach so. Du enterst mal wieder fremde Beiträge um deine Vorstellungen unters Volk zu bringen, ohne dem Fragesteller wirklich helfen zu wollen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Ach so. Du enterst mal wieder fremde Beiträge um deine Vorstellungen unters Volk zu bringen,

Ich korrigiere deine falschen Vorstellungen. Gerne auch immer wieder.

ohne dem Fragesteller wirklich helfen zu wollen.

Mehr Hilfe als du sie bereits mit „Ohne den Quelltext läßt sich dein Problem nur allgemein lösen“ gegeben hattest ließ sich kaum geben. Eventuell noch der Link zu Online-Beispiel, bitte.

LLAP 🖖

[MrMurphy1]

Hallo

Um mit deinem Problem weiterzukommen habe ich mal eine Beispielseite erstellt.

Die enthält die Lösungen für deine Probleme, wie ich sie zur Zeit verstanden habe. Wenn das richtig ist können die CSS-Angaben natürlich auf zwei Seiten verteilt werden.

Bei schmalen Fenstern werden die Menüpunkte und ihr Inhalt untereinander angezeigt.

Bei breiteren Bildschirmen wird der Text rechts neben dem Bild, horizontal zentriert, angezeigt. (Lösung zur zweiten Frage)

Bei noch breiteren Bildschirmen werden die Menüpunkt nebeneinander dargestellt und der Text wird ausgeblendet. (Lösung zur ersten Frage)

Bei noch breiteren Fenstern wird der Text unterhalb der Bilder eingeblendet.

Beispielseite (temporär)

Gruss

MrMurphy