Praktikant baucht hilfe | Responsive Design | Hochkannt

[Rolf B]

Hallo Julian,

ich seh gerade, das scheint ein Wordpress-Machwerk zu sein. Da bist Du für das HTML vermutlich nur zu 10% verantwortlich...

Im Impressum wird - je nach Viewportbreite - das Hersteller-Dropdown vom Inhaltsverzeichnis überlagert. Das liegt daran, dass Du das Inhaltsverzeichnis sticky machst (und zwar gleich doppelt - einmal im scroll-spy-nav Element und in seinem Elternelement auch noch) und ihm einen z-index von 1020 gibst. Viel hilft viel? 1 hätte vermutlich genügt, oder hast Du noch andere z-indexe auf der Seite?

Folge ist jedenfalls, dass das nav Element einen eigenen Stapelkontext bildet und damit über dem Rest der Seite "schwebt", so dass das Dropdown aus dem Header überdeckt wird.

Lösung: gib dem <header> Element position:relative (damit es einen Stapelkontext bildet) und einen z-index, der größer ist als der z-index des Inhaltsverzeichnisses.

Der Bosch-Kundendienst geht kaputt, weil Du einen Link im Text hast, den er nicht umbrechen kann. Wie hab ich das gefunden? Google Chrome, Entwicklerwerkzeuge auf, Viewport-Emulator einschalten (mit Strg+Shift+M). Damit fällt's auf. Der Firefox bricht URLs bei Bedarf am / um, da sieht man das nicht!

URLs im Klartext auszugeben ist immer so eine Sache. "Eine URL, super, die tipp ich ab!" - kein Anwender, jemals. Das sollte ein echter Link sein (meinetwegen mit rel="nofollow") und einem kurzen, klaren Text. Und schon ist das Problem gelöst. Wenn ein Anwender den Link unbedingt kopieren will, kann sie auf einem PC mit rechts klicken und "Link kopieren" - auf einem Touchgerät geht das normalerweise mit einem Long-Touch.

Also bspw. so:

<p>Text text text</p>
<ul>
<li><a href="https://www.bosch-home.com/de/service/tipps-antworten/service-tipps.html">Bosch Servicetipps</a></li>
<li><a href="https://www.bosch-home.com/de/service/tipps-antworten/allgemeine-fragen-und-antworten.html">Bosch Allgemeine Fragen und Antworten</a></li>
</ul>

Liste? Ja, Liste. Weil es eine ist. Dann brauchst Du auch keine <br> Umbrüche. Mach das konsistent bei allen Links, die unter den Abschnitten stehen. Das P Element vorher schließen? Ja, muss so, weil eine Liste in einem <p> nicht erlaubt ist. Wenn Dir der list-style-type:disc (der schwarze Blob) nicht gefällt, nimm circle oder square oder "▸ ". Ja, ein Freistil-String. Unterstützen mittlerweile alle Browser. Das kleine schwarze Dreieck ist das Unicode-Zeichen U+25B8, es gibt unendlich viele geometrische Formen zur Auswahl.

Wenn's denn unbedingt eine URL als Klartext als Linktext sein muss: Leg trotzdem einen Link drumherum, damit man draufklicken kann, und setze auf solchen a Elementen die CSS Eigenschaft word-break:break-all (bspw. mittels einer Klasse "url-link").

Vermutlich ist das jetzt alles zu spät - du scheinst eine Menge Content zu haben (der vermutlich von irgendwoher zusammengeneriert ist), aber anders wird's nichts werden. Die brutale Methode wäre overflow:hidden für die p Elemente, dann zerreißt es das Layout nicht, aber die URLs werden auch abgeschnitten. Dann besser scrollen…

Rolf