Antworten zum Thema „span, em oder eine noch bessere Lösung?“

tutto · 14.08.2015

Ich möchte Textabschnitte mit einer Headline (groß, fett) beginnen und in der selben Zeile mit dem Fließtext weiter machen.
Als Lösung sind mir der em- und der span-Tag innerhalb eines p eingefallen. Allerdings scheint die semantische Auszeichnung dabei auf der Strecke zu bleiben. Gerne würde ich auch auf h2 hinweisen.

Wie ist die beste Lösung?

_schatzi_ · 14.08.2015

Hallo!

tutto schrieb:
Gerne würde ich auch auf h2 hinweisen.

Wie ist die beste Lösung?

Na, wenn es tatsächlich eine Überschrift ist und die Semantik damit klar ist, dann nimm eine h2 (oder h3, h4, je nach Wichtigkeit).

Ilse_Schnick · 14.08.2015

Wenn du den Text als Überschrift 2.Ordnung haben willst und daneben schon Fließtext, dann beschäftige dich mal mit dem CSS float

Da könntest du neben der <h2> auch noch normalen Text laufen lassen...

_schatzi_ · 14.08.2015

oder "display: inline"

dn3d_fanboy · 15.08.2015

Da stimme ich _schatzi_ zu.
Am besten löst du das mit CSS und display: inline.

Bei <span> oder <em> hätte nachher der Text immer noch den Tag der Überschrift oder umgekehrt.

Float würde auch nicht ganz funktionieren, da die h1-6 Überschriften immer display:block sind und von daher die komplette Breite einnehmen. Hier müsstest du dann der Überschrift noch eine fixe Breite geben.

Orlandoo · 15.08.2015

Ganz eindeutig: Du solltest dazu mit display:inline und/oder display:inline-block experimentieren.

tutto · 15.08.2015

Mit float komme ich nicht weiter, da ich die Schriftlinie nicht übernehmen kann. Mit inline-block funktioniert's in der ersten Zeile wunderbar aber der Zeilenabstand zur 2. Zeile lässt sich nicht festlegen obwohl ich line-height bestimmt habe.

Ilse_Schnick · 15.08.2015

tutto schrieb:
Mit float komme ich nicht weiter, da ich die Schriftlinie nicht übernehmen kann. Mit inline-block funktioniert's in der ersten Zeile wunderbar aber der Zeilenabstand zur 2. Zeile lässt sich nicht festlegen obwohl ich line-height bestimmt habe.

'n bisschen Code ist immer hilfreich

tutto · 15.08.2015

Der erste DIV ist mit diplay-inlineblock

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
.wrapper {
box-sizing: border-box;
height: 800px;
max-width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #CF9;
}
.eins {
box-sizing: border-box;
height: 200px;
max-width: 33.3333%;
min-width: 180px;
background-color: #EEE;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
border-left-style: solid;
border-left-width: 2em;
border-left-color: #E00;
padding: 0.5em;
line-height: 1.4em;
}
.zwei {
box-sizing: border-box;
height: 200px;
max-width: 33.3333%;
min-width: 180px;
background-color: #DDD;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
border-left-style: solid;
border-left-width: 2em;
border-left-color: #0E0;
padding: 0.5em;
line-height: 1.4em;
}
.drei {
box-sizing: border-box;
height: 200px;
max-width: 33.3333%;
min-width: 180px;
background-color: #EEE;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
border-left-style: solid;
border-left-width: 2em;
border-left-color: #00E;
padding: 0.5em;
line-height: 1.4em;
}

h2 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1.4em;
font-style: normal;
float: none;
line-height: 1.4px;
display: inline-block;
}

em {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 1.4em;
font-style: normal;
}

</style>
</head>
<body>

<div class="wrapper">
<div class="eins"><h2>Raum</h2> für den Inhalt von Klasse statt Masse und noch mehr. Blindtext ist kein text für Blinde. class "eins"</div>
<div class="zwei"><em>Zeit</em> für den Inhalt von Klasse statt Masse und noch mehr. Blindtext ist kein text für Blinde. class "zwei"</div>
<div class="drei"><em>Geld</em> für den Inhalt von Klasse statt Masse und noch mehr. Blindtext ist kein text für Blinde. class "drei"</div>
</div>
</body>
</html>

_schatzi_ · 15.08.2015

Hallo!

Nimm "inline" statt "inline-block"!
Und wenn du schon "line-height" mit Einheit verwendest, dann achte darauf, dass dir kein "px" da reinrutscht...

tutto · 15.08.2015

Hallo _schatzi

Ok, das ist die Lösung. Danke!

Das mit height px ist aber mein nächstes Problem.

Die Idee ist, das die Divs variabel sind bis auf eine Mindestbreite und dann umbrochen wird.
Die DIVs würde ich gerne als Quadrate sehen. Da die Breite variiert bin ich ratlos wie das gehen könnte. Irgendwie müsste man die tatsächliche Breite abfragen. Gibt's da was?

_schatzi_ · 15.08.2015

Hallo!

Quadratische (und responsive) DIVs können recht einfach mit der Einheit "vw" zu realisieren sein, wenn es der Gesamtaufbau zulässt.
Wenn er es aber nicht zulässt, dann muss man etwas mehr Aufwand betreiben, wie z.B. hier: http://jsfiddle.net/josedvq/38Tnx/

tutto · 18.09.2015

Hallo!

leider habe ich jetzt erst wieder Zeit gefunden um mich darum zu kümmern.
Die Sache mit "vw" ist ja zu schön um wahr zu sein. Da ich aber eine max-Begrenzung brauche habe ich den wrapper verwendet. "vw" bezieht sich aber auf den ganzen Viewport. Gibt es eine Möglichkeit die Begrenzung anders zu machen?

Die Alternative mit der spare-box verstehe ich nicht wirklich.