Marcel: Span oder div Tags als Blocksatz ausrichten

SELF-Forum

Span oder div Tags als Blocksatz ausrichten

Marcel (Versionen)
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche ein Menü responsive zu machen. In der Ansicht auf dem PC stehen die Menüpunkt alle hintereinander in einer Zeile. Wenn die Ansicht nun schmaler wird, dann sollen die Menüpunkte untereinander rutschen und im Blocksatz angeordnet werden. Das die Menüs untereinander rutschen, ist natürlich kein Problem, aber die Blocksatz Formatierung bekomme ich nicht hin.

Deshalb habe ich es mit dem folgenden Beispiel versucht, aber auch da klappt es nicht. Auch im Netz habe ich keine wirklich hilfreichen Infos dazu gefunden.

Ich hoffe nun, das einer von euch mir hier weiterhelfen kann.

Nachfolgend also nun die Beispielseite mit dem Versuch der Blocksatz Formatierung von normalem Text, von DIV, SPAN und P Tags:

<!DOCTYPE html>

<html>

<head>
  <title>div und text-align</title>
</head>

<body>

<style>

.div-wrapper, .text-wrapper, .span-wrapper, .p-wrapper{
    max-width               : 80em;
    min-width               : 7em;
    width                   : 100%;
    margin-left             : auto;
    margin-right            : auto;
    border                  : 1px solid grey;
    }

.div-wrapper{
    display                 : flex;
    flex-flow               : row wrap;
    flex-direction          : row;
    text-align              : justify;
}

.span-wrapper{
    display                 : flex;
    flex-flow               : row wrap;
    flex-direction          : row;
    text-align              : justify;
}

.p-wrapper{
    display                 : flex;
    flex-flow               : row wrap;
    flex-direction          : row;
    text-align              : justify;
}

.text-wrapper{
    text-align              : justify;
}

</style>




<div class="text-wrapper">

    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4
    Wort1 Wort2 Wort3 Wort4 WortWort5 WortWortWort6 Wort1 Wort2 Wort3 Wort4

</div>




<div style="margin-top: 1em; margin-bottom: 1em;">&nbsp;</div>


<div class="div-wrapper">

    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
    <div class="div-class">|div1</div>
    <div class="div-class">|div2222|</div>
    <div class="div-class">|div33|</div>
    <div class="div-class">|div44444|</div>
    <div class="div-class">|div555555|</div>
</div>


<div style="margin-top: 1em; margin-bottom: 1em;">&nbsp;</div>



<div class="span-wrapper">

    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>
    <span class="span-class">|span-text1</span>
    <span class="span-class">|span-text2222|</span>
    <span class="span-class">|span-text33|</span>
    <span class="span-class">|span-text44444|</span>
    <span class="span-class">|span-text555555|</span>

</div>


<div style="margin-top: 1em; margin-bottom: 1em;">&nbsp;</div>



<div class="p-wrapper">

    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>
    <p class="p-class">|p-text1</p>
    <p class="p-class">|p-text2222|</p>
    <p class="p-class">|p-text33|</p>
    <p class="p-class">|p-text44444|</p>
    <p class="p-class">|p-text555555|</p>

</div>


</body>
</html>

Danke vorab für jeden hilfreichen Hinweis!

Grüße Marcel

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. Span oder div Tags als Blocksatz ausrichten

    MrMurphy1
    – Informationen zu den Bewertungsregeln

    Hallo

    Dein Quelltext hat mit korrektem HTML wenig und mit einer Navigation überhaupt nichts zu tun. Deshalb ist er zum Erklären und Ausprobieren vollkommen ungeeignet.

    Deshalb nur soviel:

    Bei Flexbox (display: flex;) gibt es keine Inline, Inline-Block oder Block-Elemente, sondern Flex-Items.

    Um Flex-Items untereinander zu bekommen ist im CSS

    flex-direction: column;

    beim umgebenden Container (Flex-Container) vorgesehen.

    Für Responsive Layouts haben sich im CSS Media Queries bewährt.

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Span oder div Tags als Blocksatz ausrichten

      Marcel
      – Informationen zu den Bewertungsregeln

      Vielen Dank für deine Bemühungen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Span oder div Tags als Blocksatz ausrichten

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Marcel

    Wenn die Ansicht nun schmaler wird, dann sollen die Menüpunkte untereinander rutschen und im Blocksatz angeordnet werden

    Wie soll das aussehen? So?

            Home

Über              uns

Leistungen und Preise

   Anfahrtsskizze

    Ich wüsste nicht, wie Blocksatz hier irgendwie tauglich wäre, aber Online-Beispiel, bitte.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Span oder div Tags als Blocksatz ausrichten

      Marcel
      – Informationen zu den Bewertungsregeln

      Vielen Dank für deine Bemühungen. Auch wenn es mir absolut nicht darum ging, über Sinn oder Notwendigkeit von dem Vorhaben zu diskutieren. Es geht mir hier ausschließlich um eine technische Lösung.

      Eines habe ich zwischenzeitlich herausgefunden, bei SPAN funktioniert es wenn ich ich Flex komplett weglasse:

      .span-wrapper{
    text-align              : justify;
}

      Es sieht dann so aus: Span Tags im Blocksatz angeordnet

      Genau das werde ich jetzt erst mal versuchen in die Praxis umzusetzen. Wenn ich noch Fragen haben sollte, werde ich mich wieder hier melden.

      Nochmals vielen Dank für deine Antwort!

      Grüße Marcel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Span oder div Tags als Blocksatz ausrichten

        Rolf B
        +2 Informationen zu den Bewertungsregeln

        Hallo Marcel,

        Es war einfach zunächst nicht klar, was Du eigentlich gemeint hast. Mir zumindest nicht.

        Nach deinem umbrochenen Screenshot dann schon eher.

        Du solltest deine span-Elemente (oder was auch immer Du nachher tatsächlich als Navigationselemente verwendest) noch mit white-space:pre versehen (oder mit display:inline-block); es sei denn, es ist deine Absicht, dass deine Navigationspunkte auf mehrere Zeilen verteilt werden.

        Du solltest für deine Navigation auch im Kopf behalten, dass nicht jeder gesunde Augen oder gesunde Hände hat, sie muss auch mit einem Screenreader sowie Touch und Tastatur funktionieren. Ein Span, der mit Javascript klickbar gehext wurde, ist definitiv nicht das richtige Element. Es sollte ein a oder ein button sein. Buttons kann man auch stylen. Beispiel

        Mit persönlich gefällt auch das Aussehen der simulierten Navigation bei schmalen Viewports nicht - manche Menüeinträge sind allein auf der Zeile, andere stehen zu zweit - aber das ist dein Design und deine Entscheidung 😉. Die Mindestbreite deiner Navigation sollte auch nicht so gesetzt werden, sie hängt vom Text deiner Menüpunkte ab und wenn ein breiterer hinzu kommt, hängt er rechts heraus. Verwende statt dessen besser overflow-x:auto (siehe Beispiel).

        Mit Media Queries solltest Du Dich aber auch jeden Fall auch befassen, bei schmalen Viewports wirst Du dein Seitenlayout anders aufbauen wollen als bei breiten.

        Rolf

        --
        Dosen sind silbern
        Beitrag melden
        +2
        Informationen zu den Bewertungsregeln

        1. Span oder div Tags als Blocksatz ausrichten

          Marcel
          – Informationen zu den Bewertungsregeln

          Hallo Rolf,

          vielen, vielen Dank für diese tollen Tipps und die Einrichtung meines Beispiels bei jsfiddle.net. (damit muss ich mich auch mal etwas beschäftigen).

          Zusammen mit deinen Vorschlägen bekomme ich mein Vorhaben nun problemlos umgesetzt.

          Von der Ansicht als Blocksatz (justify) bin ich zwischenzeitlich, zumindest bei diesem Projekt, wieder abgekommen. Das sieht deshalb nicht vorteilhaft aus, weil 2 lange und aus mehreren Worten bestehende Menüpunkte dabei sind. Bei einem anderen Projekt mag das vorteilhafter aussehen. Das werde ich individuell entscheiden.

          Mit Media Queris arbeite ich natürlich. Ohne die geht ja im Bezug auf Responsive überhaupt nichts.

          Du hast dir mit deiner Antwort auf meine Frage wirklich sehr viel Mühe gegeben und hattest mächtig Arbeit damit.

          Nochmals vielen herzlichen Dank dafür!

          Ich wünsche dir und allen anderen hier einen schönen Tag!

          LG Marcel

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. Span oder div Tags als Blocksatz ausrichten

        Gunnar Bittersmann Homepage des Autors
        +1 Informationen zu den Bewertungsregeln

        @@Marcel

        Es sieht dann so aus: Span Tags im Blocksatz angeordnet

        Das ist aber nicht das, was du mit „dann sollen die Menüpunkte untereinander rutschen und im Blocksatz angeordnet werden“ beschrieben hattest.

        „Dann sollen die Menüpunkte untereinander rutschen“ heißt für mich: alle untereinander, also jeweils einer pro Zeile.

        „Im Blocksatz angeordnet werden“ heißt für mich: die Textinhalte der Menüpunkte füllen die geamte Zeilenbreite.

        Du willst aber: die Menüpunkte füllen die geamte Zeilenbreite.

        Was du bei deinen span_text666-Dingern noch nicht siehst: Sobald im Text der Menüpunkte Leerzeichen auftauchen, wird der Text auseinandergezogen und es ist kaum noch zu erkennen, wo ein Menüpunkt aufhört und der nächste anfängt.

        Was du eigentlich willst: nicht text-align: justify, sondern flex-flow: row wrap; justify-content: space-between.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. Span oder div Tags als Blocksatz ausrichten

          Marcel
          +2 Informationen zu den Bewertungsregeln

          Hallo Gunnar,

          Vielen Dank für die Richtigstellung!

          Dabei war ich der Ansicht, das ich mein Vorhaben unmissverständlich beschrieben habe. So kann man sich irren. Dann haben wir wohl aneinander vorbei geschrieben. Sorry.

          Mit Rolfs Hilfe ist das nun aber erfolgreich erledigt. Auch wenn ich mich nun selbst gegen den Blocksatz entschieden habe. Da waren deine Bedenken schon berechtigt!

          Danke + Grüße

          Marcel

          Beitrag melden
          +2
          Informationen zu den Bewertungsregeln