Text hinter Überschrift

Yaslaw

alter Rempler
Moderator
HTML und CSS. Das ist mein Kampf.

Ich habe folgende Anforderung:

Hinter eine Überschrift h1 soll ein grauer Text gelegt werden. Der Text kann ändern, also darf es kein Bild sein. Die Überschrift muss auch als h1 definiert sein.

In dem Beispiel ist III der Text hinter der Überschrift
50547-43f068c8362120d7c90a873c6348de0d.jpg

Ich habe schon diverse Versuche mit position und z-index hinter mir, jedoch bin ich noch nicht mal annähernd zum Ziel gekommen.
 

Anhänge

  • 2016-06-14_124853.jpg
    2016-06-14_124853.jpg
    5 KB · Aufrufe: 18
Hallo

Text auf Grafik ist schon grausam, Text auf Text ist Folter. Da Webseitenersteller ihre Texte kennen lesen sie diese nicht mehr und verlieren das Gefühl dafür, wie sie damit ihre Besucher quälen. Egal wie transparent der hintere Text gemacht wird. Dafür ist dein Beispielbild ein gutes (eigentlich besser: schlechtes) Beispiel.

Trotzdem natürlich eine Lösung für dein Problem, nur meckern (so wirst du meinen guten Ratschlag wohl auffassen) hilft niemanden.

Die beiden Texte werden innerhalb des h1-Elements in span-Elemente geschrieben. Also

Code:
      <h1><span>III</span><span>Titel h1</span></h1>

Das h1-Element bekommt position: relative. Außerdem eine Höhenangabe (height), da der gesamte Inhalt mit position: absolute aus dem Dokumentfluß genommen wird und die Höhe sonst Null ist.

Die span-Elemente bekommen jeweils positon: absolute. Außerdem wird dafür gesorgt, dass beide span-Elemente das h1-Element komplett ausfüllen und der Text in ihnen zentriert ist. Diese Angaben sind für beide span-Elemente gleich.

Dann wird für die beiden span-Elemente einzeln Schriftgröße, Farbe und was sonst noch notwendig ist (zum Beispiel verschiedene Schriftarten, Textschatten) festgelegt. Also:

Code:
      h1 {
         background-color: hsla(210, 100%, 56%, 0.3);
         height: 8rem;
         position: relative;
      }
      h1 span {
         text-align: center;
         position: absolute;
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
      }
      h1 span:nth-child(1) {
         color: gray;
         font-size: 8rem;
      }
      h1 span:nth-child(2) {
         font-size: 4rem;
      }

Gruss

MrMurphy
 
Hi MrMurphy
Das hat bestens funktioniert.

Ich hoffe, die Textfolter hält sich in Grenzen: http://cclxxi.ch/doku.php/beer/cclxxi_024.
Aber so entspricht es den Bierflaschenetiketten am ehesten.

ich werde Morgen noch die Formatierung aus dem style herausnehmen und in das css packen. Aber als Prototyp wollte ich das css noch nicht anfassen.
 
Hallo

Danke für die Rückinfo.

Ich hoffe, die Textfolter hält sich in Grenzen

Der Kontrast ist viel deutlicher als auf dem Beispielbild, von daher - ja.

Allerdings bin ich der falsche Ansprechpartner für solche Fragen. Auch wenn sich das nach meiner Kritik unsinnig anhören mag.

Entscheidend sich deine Besucher.

Hierbei darfst du nicht den üblichen Fehler machen, nur zwischen Sehenden und Blinden zu unterscheiden.

Es gibt eine sehr große Grauzone von Personen dazwischen, mit Seh-Einschränkungen der unterschiedlichsten Art und unterschiedlichsten Auswirkungen. Die protzen nicht mit ihren Seh-Einschränkungen, so dass sie im Alltag untergehen. Sie halten sich auch mit Kritik an schlecht lesbaren Texten zurück, da die Verursacher der Texte in der Praxis häufig die Boten verbal attakieren oder sich gar über sie lustig machen anstatt aus der überbrachten Nachricht zu lernen.

Ich habe gelesen dass dieser Personenkreis über 10 Prozent der Bevölkerung ausmacht, also keine vernachlässigbare Minderheit ist.

Die können Schrift am besten mit dem höchstmöglichen Kontrast lesen. Also schwarze Schrift auf weißem Grund. Deshalb werden längere Texte von Profis auch so erstellt.

Beispiel: Vor etwa 30 Jahren war graues Recycling-Papier ganz groß in Mode. Damit wurden Bücher gedruckt und es wurde im Alltag verwendet, zum Beispiel für Geschäftsschreiben. Die Benutzer zeigten ihr gutes Umweltbewußtsein und es war in der Regel billiger als weißes Papier.

Trotzdem ist es verschwunden. Warum?

Weil Personen mit Seh-Einschränkungen die Texte nur schwierig lesen konnten und selbst für Personen mit gutem Sehvermögen das Lesen anstrengender war und länger dauerte als bei schwarzer Schrift auf weißem Grund. In Betrieben mit damals noch sündhaft teuren Kopierern stiegen die Kopierkosten teilweise merklich an - weil viele Mitarbeiter sich Kopien zum besseren Lesen erstellten.

Deshalb sollte grade bei gewerblichen Texten jede Abweichung vom Prinzip "schwarze Schrift auf weißem Grund" hinterfragt werden. Für viele Besucher erschwert also auch dein Bierdeckeldesign bereits das Lesen deiner Informationen.

Das heißt jetzt nicht, dass du dein Design über den Haufen schmeißen solltest. Das finde ich passend und es wirkt positiv.

Webseiten haben zudem für Besucher ja den Vorteil, dass sie diese mit mehr oder weniger Aufwand ihren Sehgewohnheiten anpassen können.

Nur bei bestimmten Informationen solltest du dir überlegen das Design zu durchbrechen und diese Informationen (nicht die gesamte Seite) schwarz auf weiß darzustellen.

Der unruhige Hintergrund erschwert zum Beispiel bei der Tabelle "Bierliste" auch Personen ohne Seh-Einschränkungen das Lesen deutlich. Die Tabelle werden nur Leute wirklich lesen, die dazu gezwungen wurden. Für die Tabelle wäre ein langweiliger weißer Hintergrund sinnvoll.

Du solltest aber überlegen die Schrift insgesamt zu vergrößern. Damit wird auch vielen Besuchern ohne Seh-Einschränkungen das Lesen vereinfacht.

Gruss

MrMurphy
 
Merci für den berechtigten Hinweis.
Ich muss eh noch ein Template für Smartphones erstellen. Da kann ich auch noch ein relativ farbloses (Schwarz auf Weiss und das Farbzeug eher rundherum).
Das hat aber alles noch Zeit, da das Bier nicht zu kaufen ist und die Seite eher meinem Ego dient.
Denn nebst dem Argument, dass Alle Alles können sollten, muss man sich auch immer überlegen für wen man das ganze macht. In dem Fall für mich und etwa 10 weitere Personen. Wenn jemand anderes mitlesen will, soll er.
 
Zurück