"Button" überlappen und verlassen Box

[Kralle]

Moin,

könnt Ihr Euch mal die Website im ZIP anschauen ****
// Link entfernt, Rolf b //

Wenn ich diese Seite z.B. in Firefox mit der Funktion zum Überprüfen der Bildschirmgrößen teste, dann überlappen sich die Button, wenn ich die Website verkleiner und wenn ich noch weiter verkleinere verlassen die "Button" Ihren Rahmen.

Wo ist mein Fehler?

Gruß Heiko

[Gunnar Bittersmann]

@@Kralle

könnt Ihr Euch mal die Website im ZIP anschauen

Nein, ganz gewiss nicht. Ich werde ganz gewiss kein ZIP aus dem Web downloaden und auspacken. Wenn du willst, dass man sich dein Zeugs ansieht, finde einen anderen Weg.

Jolan tru

[Felix Riesterer]

Liebe(r) Kralle,

der Link führt auf eine Website, die kein HTTPS unterstützt. Das macht keinen guten Eindruck. Dann soll man sich eine ZIP-Datei herunterladen... als ob es noch nie ZIP-Bomben oder wesentliche Sicherheitsprobleme mit Packprogrammen gegeben hätte.

Bestimmt kannst Du eine Testseite mit einem Tool wie jsFiddle oder dabblet aufsetzen und dann hier verlinken.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

Heise kann man auch nicht mehr brauchen. Ein paar Kekse zur Reichweitenmessung würde ich von denen ja kaufen. Aber:

We and our up to 182 partners use cookies and tracking technologies.

WHAT THE UNHOLY F**K? Ich muss wohl mein c't Abo beenden, wenn der Verlag dermaßen auf die dunkle Seite der Macht gewechselt ist. Die 182 ist kein Scherz, sie müllen alles raus. LocalStorage, SessionStorage, Cookies, alles Werbeschleudern, die sich da breit machen. Als c't Abonnent könnte ich ein Pur-Abo für 2€/Monat kaufen. Soso.

Zum Zip: Es ist keine Archivbombe und der Inhalt sieht unauffällig aus, soweit meine ersten forensischen Betrachtungen das feststellen konnten.

Dennoch ist das gewählte Medium untauglich. Es gibt einen Internetauftritt, dort kann man die Sachen in einen Unterordner stellen.

Rolf

[Felix Riesterer]

Lieber Rolf,

der Verlag dermaßen auf die dunkle Seite der Macht gewechselt ist.

ich verwende das Script, welches ich im Blog-Artrikel Wir erzwingen Ihre Einstimmung! vorgestellt habe. Da ich also nie auf das Overlay reagiere, darf die Seite mir auch keine Kekse (und auch sonst keine Sauereien) unterjubeln. Und für die Abo-Sachen (heise plus) ist es mir das Geld auch nicht wert.

Liebe Grüße

Felix Riesterer

[Kralle]

Moin,

so ich habe die Seite Online gestellt: Testseite

Gruß Heiko

[Felix Riesterer]

Lieber Heiko,

Testseite

prima! Jetzt kann man sehen, dass Du Deine Navi-Links in Listenpunkte gesetzt hast (richtig so!) und diese Listenpunkte mit display:inline formatierst. Würdest Du stattdessen ein Flexbox- oder noch besser ein Grid-Layout verwenden, hättest Du dieses Problem nicht.

Mir fällt auf, dass ich die Texte nicht mehr lesen kann, wenn ich das Fenster mittes [Shift][Strg][M] verkleinere, weil sich dann auch die Schriften verkleinern. Das sollte so nicht sein. Die Ursache ist font-size: 2vw was für mich völliger Unsinn ist.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Kralle,

das Problem tritt bei schmalen Viewports auf, unter 300px oder so. Nicht nur im Firefox, auch in Chrome.

Ich habe erstmal diese Fehler gefunden:

<meta name="viewport" content="width=device-width", initial-scale=1.0">

Das " hinter device-width muss weg, das Space hinter dem Komma würde ich auch wegnehmen.

Und dann hast Du im CSS einige Angaben wie 0.5 em drin. CSS folgt nicht der DIN für richtige Typographie von Einheiten. Die Einheit muss immer bündig an der Zahl stehen: 0.5em.

Weiter sollte man immer eine Mindestschriftgröße setzen. font-size: 2vw ist kritisch bei kleinen Viewports. Da muss etwas hin wie clamp(12px,2vw,24px);. Für Adleraugen. Für alte Säcke wie mich besser 16px bis 32px oder so. 😂 Was ist clamp()?

Jetzt der Grund für die Überlappung:

Deine li sind display:inline. Damit liegen sie auf der Baseline für Text und der Rahmen schiebt sich drumherum. Nimm display:inline-block, oder mach aus dem ul eine Flexbox, so:

ul {
   display: flex;
   flex-flow: row wrap;
   list-style: none;
}

Mit Flexbox nimm dann den display:irgendwas vom li weg und die list-style Angabe dort auch. Beim ul reicht die. Eine Einführung zu Flexbox findest Du im Selfhtml Wiki.

Rolf