Antworten auf deine Fragen:
Neues Thema erstellen

span, em oder eine noch bessere Lösung?

tutto

Nicht mehr ganz neu hier

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?
 

Ilse_Schnick

Aktives Mitglied

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...
 

dn3d_fanboy

Aktives Mitglied

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.
 

tutto

Nicht mehr ganz neu hier

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.
 

tutto

Nicht mehr ganz neu hier

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>
 

tutto

Nicht mehr ganz neu hier

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?
 

tutto

Nicht mehr ganz neu hier

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben