Hallo
Alle erdenkliche und ach so unmögliche kombinationen!
Die Zeit haben weder Webseitenersteller noch Forenteilnehmer. Als Webseitenersteller solltest du nur die relevanten Browser berücksichtigen und für den Rest ein Fallback bereitstellen. Bei allen anderen Vorgehensweisen bist du ganz schnell verraten und verkauft.
Ist der Code weitgehend ordentlich geschrieben???
Na ja.
Du hast leider die Einheiten vw und vh entdeckt. Die solltest du aber nur dort einsetzen wo es auch Sinn macht.
Für Schriftgrößen sind sie nicht geeignet. Bei kleineren Fenstern eine kleine Schrift zu verwenden ist widersinnig. Es sollte genau anders herum sein. Auf kleinen Monitoren sollte die Schrift etwas größer angezeigt werden.
Tablets und grade auch Smartphones werden in der Regel mobil benutzt. Heißt: Sie haben weder einen gleichbleibenden Abstand zum User noch stehen sie statisch wie Desktop-Monitore. Sie werden häufig in Bus, Bahn oder Auto verwendet, in der Hand oder auf Knien. Dabei sind kleinere Schriften kontraproduktiv.
aus irgendeinem undurchsichtigen Grund möchte mein IE11 meine Seite nicht ordentlich darstellen, es sieht so aus als wenn er das CSS nicht richtig läd
Dass der IE grade bei Flexbox etwas rumzickt ist klar. Bei über 95% aller Beschwerden hat aber der Webseitenersteller Fehler gemacht. Dass andere Browser solche Fehler überspielen ist Glückssache, da die dann einfach nur fehlertoleranter sind als in den Richtlinien vorgeschrieben.
Ein großer Nachteil solcher Fehlertoleranz ist, dass Webseitenersteller ihre Fehler wiederum überhaupt nicht bemerken, sich ein schludrigen Stil angewöhnen (funktioniert doch) und aus allen Wolken fallen, wenn sie erfahren, dass ihr Quelltext eher auf unterem Niveau angesiedelt ist. Häufig geht das so weit, dass sie ihren Besuchern die Wahl ihrer Browser vorwerfen und andere Browser vorschreiben wollen. Insofern ist der IE zur Fehlersuche prima geeignet.
In deinem CSS fehlt zum Beispiel eine schließende Klammer vor dem Kommentar /Farben/ . Da müssen zwei hintereinander folgen.
padding: 0.1vw 0.3vw 0.1vw 0.3vw;
}
Hinweis nebenbei: Auch bei padding ist die Einheit vw eher kritisch zu sehen.
Nicht schön ist auch dass auch bei kleineren Bildschirmen (bis zum Breakpoint) die seitlichen Ränder des body bleiben. Dadurch werden die Bilder unnötig verkleinert. Besser wäre dem body statt width und max-width mit auf den Weg zu geben.
Layouter aus dem Papierbereich arbeiten gerne mit Weißraum (der durchaus nicht immer weiß sein muss). Dies ist aber auf Webseiten nur eingeschränkt übertragbar. Eventuell stammt dein Wunsch nach leeren seitlichen Flächer daher. Dann solltest du für Webseiten deine Layoutvorstellungen auch auf Webseiten umstellen.
im <body> mit flex-direction: column; befinden sich <section> <aside> und <footer>
Deine Beispielseite ist anders aufgebaut. Dort finden sich im body direkt main und footer. Im main dann section und aside. Im section dann h2, nav, figure und nav.
Die Struktur ist soweit in Ordnung. Ich würde nur die h2 über das section stellen, so dass du dich direkt im section nur um nav, figure und nav kümmern musst.
Von der Element-Wahl her würde ich statt der beiden nav eher zu zwei div neigen. nav-Elemente sind für die Hauptnavitation vorgesehen, dazu zählt ein Bilderwechsel nicht. Und statt der h2 eher zu einer h1.
Gruss
MrMurphy