@@FrankMe > ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Als erstes wäre das Markup zu verbessern: > ~~~HTML, bad > <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> > <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> > <h4>Java</h4> > </div> > ~~~ Das sind keine Überschriften; die Auszeichnung als `h4` ist falsch. Ersetze `<h4>` durch `<p>`, `<div>`, `<span>` oder auch gar nichts. End-Tags entsprechend. Bootstrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste: ~~~HTML, good <h2>Software - Technologien</h2> <ul class="row"> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li> ⋮ </ul> ~~~ Bullets bekommst du mit `list-style: none` weg; Abstände mit `margin` und `padding`. Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist `alt=""` zu setzen. > Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht. > Was ist eine gute Lösung, um dieses Verhalten zu umgehen? Die [Bootstrap-Lösung](http://getbootstrap.com/css/#grid-responsive-resets) wäre wohl: * nach jedem 2. `div` ein `<div class="clearfix visible-xs-block"></div>` einfügen, * nach jedem 3. `div` ein `<div class="clearfix visible-sm-block"></div>` einfügen, * nach jedem 4. `div` ein `<div class="clearfix visible-md-block"></div>` einfügen, * nach jedem 6. `div` ein `<div class="clearfix visible-lg-block"></div>` einfügen. # 😱 bzw. als `li` in der Liste. Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat: ~~~HTML <ul class="row"> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-sm-block visible-lg-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> ⋮ </ul> ~~~ Aber du hattest ja nach einer **guten Lösung** gefragt. Und die ist: keine Floats verwenden. Also **kein Bootstrap**. Sondern zur Not (und als Fallback) `display: inline-block` sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine *media queries*{: @en} erforderlich). * [Beispiel Flexbox](https://codepen.io/gunnarbittersmann/pen/NjXYQZ) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/JNvpea) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/qXqEgX) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Als erstes wäre das Markup zu verbessern: > ~~~HTML, bad > <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> > <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> > <h4>Java</h4> > </div> > ~~~ Das sind keine Überschriften; die Auszeichnung als `h4` ist falsch. Ersetze `<h4>` durch `<p>`, `<div>`, `<span>` oder auch gar nichts. End-Tags entsprechend. Bootstrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste: ~~~HTML, good <h2>Software - Technologien</h2> <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li> ⋮ </ul> ~~~ Bullets bekommst du mit `list-style: none` weg; Abstände mit `margin` und `padding`. Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist `alt=""` zu setzen. > Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht. > Was ist eine gute Lösung, um dieses Verhalten zu umgehen? Die [Bootstrap-Lösung](http://getbootstrap.com/css/#grid-responsive-resets) wäre wohl: * nach jedem 2. `div` ein `<div class="clearfix visible-xs-block"></div>` einfügen, * nach jedem 3. `div` ein `<div class="clearfix visible-sm-block"></div>` einfügen, * nach jedem 4. `div` ein `<div class="clearfix visible-md-block"></div>` einfügen, * nach jedem 6. `div` ein `<div class="clearfix visible-lg-block"></div>` einfügen. # 😱 bzw. als `li` in der Liste. Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat: ~~~HTML <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-sm-block visible-lg-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> ⋮ </ul> ~~~ Aber du hattest ja nach einer **guten Lösung** gefragt. Und die ist: keine Floats verwenden. Also **kein Bootstrap**. Sondern zur Not (und als Fallback) `display: inline-block` sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine *media queries*{: @en} erforderlich). * [Beispiel Flexbox](https://codepen.io/gunnarbittersmann/pen/NjXYQZ) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/JNvpea) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/qXqEgX) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Als erstes wäre das Markup zu verbessern: > ~~~HTML, bad > <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> > <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> > <h4>Java</h4> > </div> > ~~~ Das sind keine Überschriften; die Auszeichnung als `h4` ist falsch. Ersetze `<h4>` durch `<p>`, `<div>`, `<span>` oder auch gar nichts. End-Tags entsprechend. Bootstrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste: ~~~HTML, good <h2>Software - Technologien</h2> <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li> ⋮ </ul> ~~~ Bullets bekommst du mit `list-style: none` weg; Abstände mit `margin` und `padding`. Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist `alt=""` zu setzen. > Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht. > Was ist eine gute Lösung, um dieses Verhalten zu umgehen? Die [Bootstrap-Lösung](http://getbootstrap.com/css/#grid-responsive-resets) wäre wohl: * nach jedem 2. `div` ein `<div class="clearfix visible-xs-block"></div>` einfügen, * nach jedem 3. `div` ein `<div class="clearfix visible-sm-block"></div>` einfügen, * nach jedem 4. `div` ein `<div class="clearfix visible-md-block"></div>` einfügen, * nach jedem 6. `div` ein `<div class="clearfix visible-lg-block"></div>` einfügen. # 😱 bzw. als `li` in der Liste. Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat: ~~~HTML <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-sm-block visible-lg-block""></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> ⋮ </ul> ~~~ Aber du hattest ja nach einer **guten Lösung** gefragt. Und die ist: keine Floats verwenden. Also **kein Bootstrap**. Sondern zur Not (und als Fallback) `display: inline-block` sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine *media queries*{: @en} erforderlich). * [Beispiel Flexbox](https://codepen.io/gunnarbittersmann/pen/NjXYQZ) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/JNvpea) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/qXqEgX) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Als erstes wäre das Markup zu verbessern: > ~~~HTML, bad > <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> > <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> > <h4>Java</h4> > </div> > ~~~ Das sind keine Überschriften; die Auszeichnung als `h4` ist falsch. Ersetze `<h4>` durch `<p>`, `<div>`, `<span>` oder auch gar nichts. End-Tags entsprechend. Bootstrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste: ~~~HTML, good <h2>Software - Technologien</h2> <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li> ⋮ </ul> ~~~ Bullets bekommst du mit `list-style: none` weg; Abstände mit `margin` und `padding`. Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist `alt=""` zu setzen. > Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht. > Was ist eine gute Lösung, um dieses Verhalten zu umgehen? Die [Bootstrap-Lösung](http://getbootstrap.com/css/#grid-responsive-resets) wäre wohl: * nach jedem 2. `div` ein `<div class="clearfix visible-xs-block"></div>` einfügen, * nach jedem 3. `div` ein `<div class="clearfix visible-sm-block"></div>` einfügen, * nach jedem 4. `div` ein `<div class="clearfix visible-md-block"></div>` einfügen, * nach jedem 6. `div` ein `<div class="clearfix visible-lg-block"></div>` einfügen. # 😱 bzw. als `li` in der Liste. Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat: ~~~HTML <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> ⋮ </ul> ~~~ Aber du hattest ja nach einer **guten Lösung** gefragt. Und die ist: keine Floats verwenden. Also **kein Bootstrap**. Sondern zur Not (und als Fallback) `display: inline-block` sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine *media queries*{: @en} erforderlich). * [Beispiel Flexbox](https://codepen.io/gunnarbittersmann/pen/NjXYQZ) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/JNvpea) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/qXqEgX) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Als erstes wäre das Markup zu verbessern: > ~~~HTML, bad > <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> > <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> > <h4>Java</h4> > </div> > ~~~ Das sind keine Überschriften; die Auszeichnung als `h4` ist falsch. Ersetze `<h4>` durch `<p>`, `<div>`, `<span>` oder auch gar nichts. End-Tags entsprechend. Bootcrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste: ~~~HTML, good <h2>Software - Technologien</h2> <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li> ⋮ </ul> ~~~ Bullets bekommst du mit `list-style: none` weg; Abstände mit `margin` und `padding`. Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist `alt=""` zu setzen. > Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht. > Was ist eine gute Lösung, um dieses Verhalten zu umgehen? Die [Bootcrap-Lösung](http://getbootstrap.com/css/#grid-responsive-resets) wäre wohl: * nach jedem 2. `div` ein `<div class="clearfix visible-xs-block"></div>` einfügen, * nach jedem 3. `div` ein `<div class="clearfix visible-sm-block"></div>` einfügen, * nach jedem 4. `div` ein `<div class="clearfix visible-md-block"></div>` einfügen, * nach jedem 6. `div` ein `<div class="clearfix visible-lg-block"></div>` einfügen. # 😱 bzw. als `li` in der Liste. Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat: ~~~HTML <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> ⋮ </ul> ~~~ Aber du hattest ja nach einer **guten Lösung** gefragt. Und die ist: keine Floats verwenden. Also **kein Bootcrap**. Sondern zur Not (und als Fallback) `display: inline-block` sowie Flexbox oder Grid (hier wohl besser, weil viel einfacher – keine *media queries*{: @en} erforderlich). * [Beispiel Flexbox](https://codepen.io/gunnarbittersmann/pen/NjXYQZ) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/JNvpea) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/qXqEgX) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ich habe mal wieder ein Anliegen, um meine eigene Site zu verbessern. Als erstes wäre das Markup zu verbessern: > ~~~HTML, bad > <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> > <img src="images/icons/java256_256.png" alt="Java" width="64" height="64" /> > <h4>Java</h4> > </div> > ~~~ Das sind keine Überschriften; die Auszeichnung als `h4` ist falsch. Ersetze `<h4>` durch `<p>`, `<div>`, `<span>` oder auch gar nichts. End-Tags entsprechend. Bootcrap sollte einen nicht davon abhalten, die richtigen HTML-Elemente zu verwenden. Eine Liste ist eine Liste ist eine Liste: ~~~HTML, good <h2>Software - Technologien</h2> <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> <img src="images/icons/java256_256.png" alt="" width="64" height="64" /> Java </li> ⋮ </ul> ~~~ Bullets bekommst du mit `list-style: none` weg; Abstände mit `margin` und `padding`. Beachte: Wenn Alternativtext und vorhandene Bildunterschrift dasselbe sind, dann macht der Alternativtext keinen Sinn. Warum sollte ein Screenreader „Java Java“ vorlesen? In solchen Fällen ist `alt=""` zu setzen. > Leider stehen die letzten zwei Icons oft sehr merkwürdig am rechten Rand oder eines fällt sogar auf eine weitere Zeile. Augenscheinlich hat das mit der Textlänge in den Zeilen darüber zu tun. Das normale Verhalten von Floats. Das kommt davon, wenn man Floats zum Layouten missbraucht. > Was ist eine gute Lösung, um dieses Verhalten zu umgehen? Die [Bootcrap-Lösung](http://getbootstrap.com/css/#grid-responsive-resets) wäre wohl: * nach jedem 2. `div` ein `<div class="clearfix visible-xs-block"></div>` einfügen, * nach jedem 3. `div` ein `<div class="clearfix visible-sm-block"></div>` einfügen, * nach jedem 4. `div` ein `<div class="clearfix visible-md-block"></div>` einfügen, * nach jedem 6. `div` ein `<div class="clearfix visible-lg-block"></div>` einfügen. # 😱 bzw. als `li` in der Liste. Wenn mehrere an einer Stelle eingefügt werden müssen, sollte eins genügen, das alle Klassen hat: ~~~HTML <ul> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-md-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> <li class="clearfix visible-xs-block visible-sm-block"></li> <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</li> ⋮ </ul> ~~~ Aber du hattest ja nach einer **guten Lösung** gefragt. Und die ist: keine Floats verwenden. Also **kein Bootcrap**. Sondern zur Not (und als Fallback) `display: inline-block` sowie Flexbox oder Grid. * [Beispiel Flexbox](https://codepen.io/gunnarbittersmann/pen/NjXYQZ) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/JNvpea) * [Beispiel Grid](https://codepen.io/gunnarbittersmann/pen/qXqEgX) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)