viereck in div container

[Rolf B]

Hallo Konni,

"irgendwie" ist irgendwie keine Fehlerbeschreibung!

Aber: ich habe deinen Beitrag formatiert (Codeblöcke rahmt man mit einem ~~~ davor und dahinter ein, und hinter dem öffnenden ~~~ kann man angeben, welche Sprache das ist, also hier: ~~~html und ~~~css

Bei diesem Formatieren sehe ich: Die CSS Regel mit dem Selektor .titel wird nicht geschlossen. Deswegen wird die nachfolgende Regel nicht verarbeitet.

Und .viereck wird mit einer runden Klammer statt mit einer geschweiften Klammer geschlossen.

Entweder waren das Kopierfehler beim Übertragen ins Forum, oder das ist eine der Ursachen.

Allerdings reicht das noch nicht. Du verwendest <span> für das Viereck. Spans sind inline-Elemente, d.h. du kannst sie nicht beliebig mit width und height in der Größe festlegen. Wenn Du das willst, brauchst Du ein Element mit Block-Charakteristik.

Welches? Das kann ich noch nicht sagen. Vorher müsstest Du erklären, was Du mit „bündig“ meinst. Bündig hinter dem Text? Oder rechtsbündig in der .title Box?

In beiden Fällen ist ein HTML Element im Titel nicht der richtige Weg, denn die blaue Box ist ja kein Teil des Inhaltes, sondern Dekoration. Deswegen solltest Du die Box als ::after Pseudoelement mittels CSS einsetzen.

Und <div class="titel"> ist mit an Sicherheit grenzender Wahrscheinlichkeit auch nicht das beste HTML. Wenn das die Seitenüberschrift ist, dürfte hier das <h1> Element angemessen sein. Eingebettet in ein <header> Element. Wenn Dich darin Schriftgröße, Margin oder Padding stören, kannst DU das mit CSS anpassen. Aber <h1> hat eine inhaltliche Bedeutung (also Semantik), und semantisch richtiges HTML ist für Leute, die Assistenztechniken zum Lesen deiner Seite benötigen, unumgänglich. Dass Du die Seite gut lesen kannst, bedeutet noch nicht, dass es jeder kann. Aber wer eine Webseite veröffentlicht, sollte sie nicht nur selbst lesen können.

Hier ist ein jsFiddle, das im h1 eine Box am Textende und im h2 am Boxende zeigt:

https://jsfiddle.net/Rolf_b/etyms6pk/

Rolf