CSS Hilfe benötigt

[Gunnar Bittersmann]

@@Passwort

Was ich damit bezweckt habe ist, dass das eingebundene Bild bei 30vh abgeschnitten wird, das Bild ansich geht unten noch weiter.

Da sind wir beim ersten Problem: Das Bild ist mit über 200 kB viel zu groß. Ein Großteil davon wird ja – wie du gerade sagtest – gar nicht angezeigt. Das meiste davon ist als Hintergrundbild auch gar nicht geeignet, weil zu kleinteilig, worauf die Überschrift schlecht zu lesen ist.

Schlecht zu lesen ist sie auch, weil der Farbkontrast zu gering ist; das Bild muss dunkler sein.

Ich habe mal die oberen 320 Pixel ausgeschnitten, Helligkeit und Kontrast vermindert, dafür die Sättigung etwas erhöht. Durch die verminderte Bildgröße und dass der Bildinhalt im verbliebenen Teil unscharf ist (was für ein Hintergrundbild ja gut ist), komme ich locker unter 20 kB.

Ach so, Lesbarkeit und Kontrast: Du musst unbedingt eine Hintergrundfarbe angeben. Das Hintergrundbild kann aus irgendeinem Grund nicht geladen werden, und Weiß auf Weiß liest sich nicht so gut.

Sieht dann so aus: Tösstal spielt.

Zur Schrift: die Lucida Handwriting hab ich nicht installiert, kann ich nichts zu sagen. Bei mir wird die Brush Script MT verwendet, und die sieht auf deiner Seite nicht gut aus, weil die Verbindungen der Buchstaban nicht stimmen. Sollte die Schrift so schlecht gemacht sein? Nein, ist sie nicht.

Die Schrift darf nicht gefettet werden! (Es ist auch generell keine gute Idee, den Browser Schrift fetten zu lassen. Wenn Fettschrift, muss man einen Font dafür haben.)

Genausowenig gut ist, Schrift vom Browser schrägstellen zu lassen. (Wenn Kursivschrift, muss man einen Font dafür haben.) Die Brush Script MT ist bereits von sich aus schräg; noch schräger sieht blöd aus.

Bei der Brush Script MT ist auch der Zeilenabstand zu groß; das ist eins deiner Layoutprobleme. Ich hab den runtergesetzt. Wie das bei Lucida Handwriting aussieht, kann ich nicht sagen. Es keine so gute Idee, zwei ziemlich unterschiedliche Schriften im Fontstack anzugeben.

Apropos Schriftart angeben: Wenn beide Schriftzüge „Tösstal spielt“ und „Das Spiele-Wochenende im Tösstal“ in der selben Schrift gesetzt werden sollen, dann sollte die Angabe nur einmal im CSS auftauchen – für header.

Und einer der beiden muss ein h1-Element sein. Ansonsten hat die Seite keine Überschrift, was nicht nur blöd für Nutzer assistiver Technologien (wie Screenreader) ist, sondern auch für Suchmaschinen. Welchen der beiden Schriftzüge du als Überschrift nimmst, bleibt dir überlassen; es können auch beide sein: Tösstal spielt 2.

Warum absolute Positionierung? Wegen Zentrierung? Die geht anders; hier wohl einfach mit text-align: center.

Nein, mit text-align: center ist das ganz chaotisch, das habe ich probiert.

Ich auch. 😏

Das wird da irgendwie so halb und ganz links angezeigt.

Dann war dir da was im Wege, vermutlich dein Positionierungs-Gedöns.

header hat keine feste Höhe, sondern passt sich seinem Inhalt an. Dafür kriegt etwas padding, bei den Elementen der Schriftzüge kommt der margin weg, Schriftgrößen gesetzt – fertig.

Ah, Schriftgrößen: die große Schrift passt sich der Viewportbreite an – mit clamp(). (Du kannst die Zeile ja mal auskommentieren, um den Unterschied zu sehen.)

Kwakoni Yiquan