viereck in div container

[Konni]

hallo,

ich hab eine titelzeile die ich mit css designen möchte.

diese soll blau sein, am ende solle in rotes vierck bündig erscheinen.

<div class="titel">hier steht der titel<span class="viereck"></span></div>

.titel {
   background:#00008B;
   color:#FFF;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding:10px;

.viereck {
   background:#ff0000;
   width:10px;
   height:10px;
)

aber das funktioniert irgendwie nicht so wie es soll.

kann mir jemand bitte sagen was ich da falsch mache.

[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

[Konni]

danke erst mal

.titel{ position:relative;font-size:15px;background:#004888; color:#FFF; white-padding:10px 10px 10px 10px;}

hier habe ich meine version

 .titel:after {
    content:"";
	padding:35px;
    background: #ff0000;
    position: absolute;
    right: 0px;
    top: 0px;
}
 

das ist die aus dem beispiel

.titel::after {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 35px;
  height: 35px;
  top: 0;
  right: 0;
  background-color: green;
}

aber eines haben beide gemeinsam. ich möchte das viereck gleichgross machen wie das div. also habe ich zwei mal padding und die schrift grösse genommen.

10+10+15 =35

das viereck müsste also genauso gross sein. ist es aber nicht. wenn ich den wert manuell auf 43 erhöhe ist es ausfüllend.

aber das kann doch eigentlich nicht sein, oder?

[Rolf B]

Hallo Konni,

die Eigenschaft white-padding gibt es nicht. Du meinst padding. Deswegen wird vermutlich ein vorhandenes Padding greifen und 8px mehr haben.

Solche Dinge findest Du mit den Entwicklerwerkzeugen deines Browsers heraus, die zeigen Dir für jedes Element, welche Style-Regeln gelten, welche nicht verstanden werden und wie die vom Browser berechneten Maße für eine Box sind.

Beachte: es sollte ::after heißen, nicht :after. Der einfache Doppelpunkt kommt aus CSS2, selbst im Update CSS 2.2 steht das noch so, und darum versteht dein Browser das :after auch, aber die seit 20 Jahren entstehende CSS3 Spezifikation verlangt ::after und ::before. Der Grund ist, dass es Pseudoklassen (:hover, :focus, :nth-child, etc) gibt, die ein vorhandenes Element auswählen, und Pseudoelemente (::after, ::before, ::first-letter, ::selection, etc), die so tun, als würden sie dem Dokument ein Element hinzufügen (auch wenn sie es nicht wirklich machen). Man möchte zwischen beiden sauber unterscheiden. Selbst eine tote Altlast wie Internet Explorer 9 versteht die CSS3-Schreibweise, es gibt also keinen Grund, bei :after zu bleiben.

Und hast Du gesehen, dass ich in meinem Beispiel nicht px für die Fontsize verwendet habe, sondern em? Der Browser legt eine Standardschriftgröße für den Text in deiner Seite fest. Normalerweise sind das 16px, aber das kann sich je nach Gerät oder Browser ändern, und auch, wenn ein Anwender die Textgröße ändert. Wenn Du Deine Schriftgröße auf 15px festnagelst, folgt deine Seite nicht mehr den Schriftgrößen-Einstellungen des Anwenders. Mit em schon. Die Größenangabe "1em" bedeutet: Die in diesem Element geltende Schrifthöhe. Ohne eigene font-size Angabe ist es die Schrifthöhe des Elternelements. D.h. wenn Du in einem Container die font-size auf 2em festlegst, verändert sich die Bezugsgröße für alle font-size Angaben in diesem Container.

Es ist hilfreich, auch Paddings und Margins in em festzulegen. Wenn jemand die Schriftgröße ändert, ist es besser, wenn sich auch Abstände anpassen.

Lange Rede, kurzer Sinn:

.title {
   font-size: 0.9em; padding: 0.7em;
}

kommt deinen Pixelangaben relativ nahe, und dies sollte der passende Stil für das ::after-Element sein:

.title::after {
   height: 2.3em; 
   width: 2.3em;
}

Rolf