Anzeige

span, em oder eine noch bessere Lösung?

span, em oder eine noch bessere Lösung? | PSD-Tutorials.de

Erstellt von tutto, 14.08.2015.

  1. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    span, em oder eine noch bessere Lösung?
    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?
     
    #1      
  2. _schatzi_

    _schatzi_ Lampen-Sau

    Dabei seit:
    07.08.2009
    Beiträge:
    1.660
    Geschlecht:
    männlich
    Software:
    CS6
    span, em oder eine noch bessere Lösung?
    Hallo!
    Na, wenn es tatsächlich eine Überschrift ist und die Semantik damit klar ist, dann nimm eine h2 (oder h3, h4, je nach Wichtigkeit).
     
    #2      
  3. Ilse_Schnick

    Ilse_Schnick Aktives Mitglied

    Dabei seit:
    23.09.2005
    Beiträge:
    435
    Geschlecht:
    weiblich
    Ort:
    Bärlin
    span, em oder eine noch bessere Lösung?
    #3      
  4. _schatzi_

    _schatzi_ Lampen-Sau

    Dabei seit:
    07.08.2009
    Beiträge:
    1.660
    Geschlecht:
    männlich
    Software:
    CS6
    span, em oder eine noch bessere Lösung?
    oder "display: inline"
     
    #4      
    Jamye, dn3d_fanboy und Ilse_Schnick gefällt das.
  5. dn3d_fanboy

    dn3d_fanboy Aktives Mitglied

    Dabei seit:
    04.11.2011
    Beiträge:
    781
    Geschlecht:
    männlich
    Ort:
    Eitorf
    Software:
    VS Code, Notepad++, PS CC, Mapster32
    Kameratyp:
    Dat Teil im Häändy
    span, em oder eine noch bessere Lösung?
    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.
     
    #5      
  6. Orlandoo

    Orlandoo Nicht mehr ganz neu hier

    Dabei seit:
    14.06.2009
    Beiträge:
    122
    Geschlecht:
    männlich
    span, em oder eine noch bessere Lösung?
    Ganz eindeutig: Du solltest dazu mit display:inline und/oder display:inline-block experimentieren.
     
    #6      
  7. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    span, em oder eine noch bessere Lösung?
    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.
     
    #7      
  8. Ilse_Schnick

    Ilse_Schnick Aktives Mitglied

    Dabei seit:
    23.09.2005
    Beiträge:
    435
    Geschlecht:
    weiblich
    Ort:
    Bärlin
    span, em oder eine noch bessere Lösung?

    'n bisschen Code ist immer hilfreich ;)
     
    #8      
  9. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    span, em oder eine noch bessere Lösung?
    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>
     
    #9      
    Ilse_Schnick gefällt das.
  10. _schatzi_

    _schatzi_ Lampen-Sau

    Dabei seit:
    07.08.2009
    Beiträge:
    1.660
    Geschlecht:
    männlich
    Software:
    CS6
    span, em oder eine noch bessere Lösung?
    Hallo!

    Nimm "inline" statt "inline-block"!
    Und wenn du schon "line-height" mit Einheit verwendest, dann achte darauf, dass dir kein "px" da reinrutscht... ;)
     
    #10      
    Ilse_Schnick gefällt das.
  11. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    span, em oder eine noch bessere Lösung?
    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?
     
    #11      
  12. _schatzi_

    _schatzi_ Lampen-Sau

    Dabei seit:
    07.08.2009
    Beiträge:
    1.660
    Geschlecht:
    männlich
    Software:
    CS6
    span, em oder eine noch bessere Lösung?
    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/
     
    #12      
    Ilse_Schnick gefällt das.
  13. tutto

    tutto Nicht mehr ganz neu hier

    Dabei seit:
    21.02.2009
    Beiträge:
    80
    Geschlecht:
    männlich
    Software:
    C4d, AI, PSD, ID
    span, em oder eine noch bessere Lösung?
    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.
     
    #13      
x
×
×