Moderne HTML Umsetzung – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Moderne HTML Umsetzung Sun, 11 Feb 18 14:04:04 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713515#m1713515 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713515#m1713515 <p>Hallo,</p> <p>wie würdet ihr dieses Design (nur BLogartikel) umsetzten?</p> <p><a href="http://x7info.com/html/maroon-preview/maroon/blog.html#home" rel="nofollow noopener noreferrer">http://x7info.com/html/maroon-preview/maroon/blog.html#home</a></p> <p>Die Größe der Bilder habe ich selber in der Hand, der Titel kann man ein mal zwei Zeilig sein. Das Datum un die Tags sind immer einzeilig. Der Text kann man ein wenig mehr, mal ein wenig weniger sein. Der Weiterlesen Link sollte immer ganz unten stehen, wenn möglich immer auf eine Höhe egal wie viel Text darüber geschrieben wurde.</p> <p>Geht da etwas mit Flexbox? Responsive wäre natürlich nicht schlecht.</p> Moderne HTML Umsetzung Sun, 11 Feb 18 14:46:16 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713521#m1713521 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713521#m1713521 <p>Hallo</p> <p>Ich würde das mit Flexbox umsetzen. CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung. Responsive gehört heutzutage einfach dazu.</p> <p>Gruss</p> <p>MrMurphy</p> Moderne HTML Umsetzung Sun, 11 Feb 18 16:35:25 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713543#m1713543 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713543#m1713543 <p>@@Bernd</p> <blockquote> <p>Geht da etwas mit Flexbox?</p> </blockquote> <p>Im Prinzip schon: <a href="https://codepen.io/gunnarbittersmann/pen/JNOQgO" lang="en" rel="noopener noreferrer">flexible grid with media queries</a>.</p> <p>Nur dass es mit Grid noch viel besser geht: <a href="https://codepen.io/gunnarbittersmann/pen/JNvpea" lang="en" rel="noopener noreferrer">flexible grid without media queries</a>.</p> <blockquote> <p>Responsive wäre natürlich nicht schlecht.</p> </blockquote> <p>Ich würde <em lang="en">responsive</em> nicht als „wäre nicht schlecht“-Zusatz bezeichnen, sondern als unabdingbar fordern.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Sun, 11 Feb 18 16:49:28 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713545#m1713545 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713545#m1713545 <p>@@Bernd</p> <blockquote> <p>wie würdet ihr dieses Design (nur BLogartikel) umsetzten?</p> </blockquote> <p>Wenn du das Menü meinst: <strong>so nicht!</strong></p> <p>Es ist unbrauchbar, weil man bei Tastaturbedienung nicht erkennt, wo man sich befindet. Das sollte dir <a href="https://forum.selfhtml.org/self/2018/jan/21/navigation-unterstreichen/1712477#m1712477" rel="noopener noreferrer">nicht neu sein</a>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Sun, 11 Feb 18 17:09:55 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713548#m1713548 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713548#m1713548 <p>@@Bernd</p> <blockquote> <p><a href="http://x7info.com/html/maroon-preview/maroon/blog.html#home" rel="nofollow noopener noreferrer">http://x7info.com/html/maroon-preview/maroon/blog.html#home</a></p> <p>Die Größe der Bilder habe ich selber in der Hand, der Titel kann man ein mal zwei Zeilig sein.</p> </blockquote> <p>Oder dreizeilig …</p> <blockquote> <p>Das Datum un die Tags sind immer einzeilig.</p> </blockquote> <p>Nein, garantiert nicht. Nicht garantiert. Das ist nichts, was du in der Hand hast. Finde dich damit ab, dass Datum und Kategorie auch untereinander stehen können.</p> <blockquote> <p>Der Text kann man ein wenig mehr, mal ein wenig weniger sein. Der Weiterlesen Link sollte immer ganz unten stehen, wenn möglich immer auf eine Höhe egal wie viel Text darüber geschrieben wurde.</p> <p>Geht da etwas mit Flexbox?</p> </blockquote> <p>Ja. Die Boxen sind Grid-Items (wie gesagt) und Flexboxen, damit die Weiterlesen-Links (ohne Deppenleerzeichen) auf einer Höhe stehen.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Sun, 11 Feb 18 20:09:01 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713556#m1713556 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713556#m1713556 <p>Hallo,</p> <p>passt dieser Aufbau für ein Blog-Artikel?</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>categorie<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> </code></pre> Moderne HTML Umsetzung Sun, 11 Feb 18 20:42:11 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713559#m1713559 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713559#m1713559 <p>Hallo! Mir gefällt dein Design und es ist doch responsive. Ich würde aber die Links immer unterstreichen, damit die für Users cklickable waren;)</p> Moderne HTML Umsetzung Sun, 11 Feb 18 14:52:25 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713524#m1713524 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713524#m1713524 <p>Hi there,</p> <blockquote> <p>[...] CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung.</p> </blockquote> <p>Voll Deiner Meinung. Ich war auch immer der Ansicht, daß dieses CSS-Zeugs was Grindiges ist…</p> Moderne HTML Umsetzung Sun, 11 Feb 18 17:13:53 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713550#m1713550 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713550#m1713550 <p>Hallo,</p> <blockquote> <p>Ich würde das mit Flexbox umsetzen. CSS-Grind ginge auch, aber da fehlt mir noch die Browserunterstützung. Responsive gehört heutzutage einfach dazu.</p> </blockquote> <p>Flexbox werde ich auch nutzen, alles andere ist noch Zukunft und wird noch nicht von jedem Browser unterstützt. Ich muss mal schauen wie ich dieses mit Flexbox hinbekomme.</p> Moderne HTML Umsetzung Mon, 12 Feb 18 23:51:09 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713646#m1713646 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713646#m1713646 <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Geht da etwas mit Flexbox?</p> </blockquote> <p>Im Prinzip schon: <a href="https://codepen.io/gunnarbittersmann/pen/JNOQgO" lang="en" rel="noopener noreferrer">flexible grid with media queries</a>.</p> </blockquote> <p>Oops, das hatte ich ja gar nicht mit Flexbox implementiert.</p> <p>Eagleson’s Law: <em>“Any code of your own that you haven’t looked at for six or more months might as well have been written by someone else.”</em> </p> <p>Das ginge aber mit dem Aufwand der vielen <em lang="en">media queries</em> auch mit Flexbox.</p> <p>Aber wie gesagt:</p> <blockquote> <p>Nur dass es mit Grid noch viel besser geht: <a href="https://codepen.io/gunnarbittersmann/pen/JNvpea" lang="en" rel="noopener noreferrer">flexible grid without media queries</a>.</p> </blockquote> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Sun, 11 Feb 18 16:56:24 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713546#m1713546 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713546#m1713546 <p>Hallo,</p> <blockquote> <p>Wenn du das Menü meinst: <strong>so nicht!</strong></p> </blockquote> <p>nein, es geht nur um die Artikel, nicht um die Navigation bzw. den Header.</p> Moderne HTML Umsetzung Sun, 11 Feb 18 17:12:57 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713549#m1713549 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713549#m1713549 <p>Hallo,</p> <blockquote> <p>Oder dreizeilig …</p> </blockquote> <p>nein, das habe ich selber in der Hand, da ich die Beiträge schreiben. Außer einer vergrößert die Seite, dann ja, aber das ist mir dann egal</p> <blockquote> <p>Nein, garantiert nicht. Nicht garantiert. Das ist nichts, was du in der Hand hast. Finde dich damit ab, dass Datum und Kategorie auch untereinander stehen können.</p> </blockquote> <p>Nein, damit finde ich mich nicht ab. Warum denn auch? Es gibt immer ein Datum, da weiß ich wie groß es ist. Und es gibt immer nur EINE Kategorie, auch dieses habe ich in der Hand.</p> <blockquote> <p>Ja. Die Boxen sind Grid-Items (wie gesagt) und Flexboxen, damit die Weiterlesen-Links (ohne Deppenleerzeichen) auf einer Höhe stehen.</p> </blockquote> <p>Was sind Deppenleerzeichen?</p> Moderne HTML Umsetzung Sun, 11 Feb 18 17:19:40 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713551#m1713551 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713551#m1713551 <p>@@Bernd</p> <blockquote> <p>Nein, damit finde ich mich nicht ab. Warum denn auch?</p> </blockquote> <p>Du musst dich damit abfinden. Weil es das Web ist.</p> <blockquote> <p>Es gibt immer ein Datum, da weiß ich wie groß es ist. Und es gibt immer nur EINE Kategorie, auch dieses habe ich in der Hand.</p> </blockquote> <p>Du hast nicht in der Hand, welche Schriftart beim Nutzer letztendlich verwendet wird, wie breit die läuft … also nicht, ob Datum und Kategorie wirklich immer nebeneinander passen.</p> <p>Was aber nicht schlimm ist. Bedenke einfach, wie es aussehen soll, wenn beides nicht nebeneinander passt, und erfreue dich daran, dass der Fall nicht allzu häufig eintreten wird. Aber ignoriere ihn nicht.</p> <blockquote> <p>Was sind Deppenleerzeichen?</p> </blockquote> <p>Was-sind-…-Fragen sind gute Fragen, um sie der Wikipedia zu stellen. „Wikipedia, was sind <a href="https://de.wikipedia.org/wiki/Deppenleerzeichen" rel="nofollow noopener noreferrer">Deppenleerzeichen</a>?“</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Mon, 12 Feb 18 23:46:15 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713645#m1713645 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713645#m1713645 <p>@@Bernd</p> <blockquote> <p>Flexbox werde ich auch nutzen, alles andere ist noch Zukunft und wird noch nicht von jedem Browser unterstützt.</p> </blockquote> <p>Nein, das ist Unsinn. Aus mehreren Gründen:</p> <ol> <li> <p>Grid ist nicht Zukunft, sondern Gegenwart. Es wird <a href="https://caniuse.com/#feat=css-grid" rel="noopener noreferrer">von allen aktuellen relevanten Browsern unterstützt</a>.</p> </li> <li> <p>Mit Flexbox ist folgende Anforderung gar nicht umsetzbar: Die zur Verfügung stehende Breite soll vollständig genutzt werden und gleichmäßig in möglichst viele Spalten aufgeteilt werden, die mindestens <em>x</em> breit sein sollen. Die Items füllen die Spalten in Leserichtung (von links nach rechts; von oben nach unten).</p> <p>(Das wäre mit etlichem Aufwand umsetzbar für eine gewisse maximale Anzahl <em>n</em> von Spalten. Man müsste sich <em>n</em> − 1 Breakpoints berechenen und für diese jeweils Regeln angeben. Den Aufwand will man nicht betreiben, zumal er nicht zu einer allgemeinen Lösung führt.)</p> </li> <li> <p>Für alte IEs u.a. Browser, die Grid nicht unterstützen, wird ein Fallback vorgesehen. Das kann Flexbox sein. Es gibt aber keinen Grund, für fähige Browser nicht das bessere Grid-Layout zu implementieren.</p> </li> </ol> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Tue, 13 Feb 18 10:39:10 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713669#m1713669 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713669#m1713669 <p>Hallo,</p> <p>hier ein Online-Beispiel: <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a> Warum passen sich meine Artikel nicht der Breite an?</p> <pre><code class="block language-css"><span class="token selector">.blog</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 0 1 33% <span class="token punctuation">}</span> </code></pre> Moderne HTML Umsetzung Tue, 13 Feb 18 12:34:08 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713685#m1713685 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713685#m1713685 <p>@@Bernd</p> <blockquote> <p>passt dieser Aufbau für ein Blog-Artikel?</p> </blockquote> <p>Nicht so richtig.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Wenn bei der Artkelübersicht nur Anreißer zu sehen sind, ist das kein eigenständiger Artikel, also kein <code>article</code>-Element.</p> <p>Auf einer Artikelseite ist der Artikel der Hauptinhalt, also auch kein <code>article</code>-Element.</p> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Die Ausschmückung eines Artikels ist kein eigenständiger Bereich, also kein <code>figure</code>-Element.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Tue, 13 Feb 18 10:46:55 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713670#m1713670 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713670#m1713670 <p>@@Bernd</p> <blockquote> <p>hier ein Online-Beispiel: <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a> Warum passen sich meine Artikel nicht der Breite an?</p> </blockquote> <p>Doch, das tun sie. Sie passen sich der Breite des Inhalts an, nämlich der Bilder.</p> <p>Du möchtest den Bildern 100% Breite geben.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Tue, 13 Feb 18 11:01:56 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713673#m1713673 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713673#m1713673 <p>Hallo,</p> <blockquote> <p>Du möchtest den Bildern 100% Breite geben.</p> </blockquote> <p>danke dir. Hat funktioniert: <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a></p> <p>Jetzt habe ich noch eine Frage zum Weiterlesen Link bzw. zum <footer> wie erreiche ich, dass dieser immer unten angezeigt wird?</p> Moderne HTML Umsetzung Tue, 13 Feb 18 11:34:01 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713677#m1713677 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713677#m1713677 <p>Mir ist noch etwas aufgefallen: <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a> Warum stehen die beiden in der zweiten Reihe nicht nebeneinander? Ist es möglich dieses nebeneinander zu platzieren?</p> Moderne HTML Umsetzung Tue, 13 Feb 18 12:57:10 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713688#m1713688 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713688#m1713688 <p>Das Problem konnte ich beheben:<br> <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a></p> <pre><code class="block language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 0 1 <span class="token function">calc</span><span class="token punctuation">(</span>33% - 1em<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #efefef<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Open Sans'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Jetzt bleibt nur noch das Problem, warum sich die letzten nicht nebeneinander anordnen.</p> <p>EDIT: Nein, es hat wohl doch nicht geklappt.</p> Moderne HTML Umsetzung Tue, 13 Feb 18 13:14:27 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713693#m1713693 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713693#m1713693 <p>@@Bernd</p> <blockquote> <p>Jetzt habe ich noch eine Frage zum Weiterlesen Link bzw. zum <footer> wie erreiche ich, dass dieser immer unten angezeigt wird?</p> </blockquote> <p>So nicht: <code class="language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap <span class="token punctuation">}</span></code>.</p> <p>Du möchtest dich aus der Horizontalen erheben und dich in die Vertikale begeben:<br> <code class="language-css"><span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column <span class="token punctuation">}</span></code>.</p> <p>Das <code class="language-css">div.content</code> soll sich ausdehnen: <code class="language-css"><span class="token selector">.card > .content</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 1 <span class="token punctuation">}</span></code>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Tue, 13 Feb 18 13:21:21 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713695#m1713695 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713695#m1713695 <p>@@Bernd</p> <blockquote> <p>Jetzt bleibt nur noch das Problem, warum sich die letzten nicht nebeneinander anordnen.</p> </blockquote> <p>Warum sich die letzten nicht nebeneinander anordnen, ist schnell gesagt: Weil du genau das mit <code>justify-content: space-between</code> gesagt hast.<br> Du möchtest für <code>div.wrapper.blog</code> Grid verwenden.</p> <p>Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:</p> <p><a href="/images/a0d90a7b-93cf-4219-8447-6b4a3650145e.jpg" rel="noopener noreferrer"><img src="/images/a0d90a7b-93cf-4219-8447-6b4a3650145e.jpg?size=medium" alt="" loading="lazy"></a></p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Tue, 13 Feb 18 13:19:22 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713694#m1713694 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713694#m1713694 <p>Hallo,</p> <p>danke auch dieses mal für deine Hilfe, sieht schon sehr viel besser aus:<br> <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a></p> <p>Und dieses ist richtig, dass man mehreren Sachen ein display:flex geben kann / muss?</p> <pre><code class="block language-css"><span class="token selector">.blog</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.card</span> <span class="token punctuation">{</span> <span class="token property">flex</span><span class="token punctuation">:</span> 0 1 <span class="token function">calc</span><span class="token punctuation">(</span>33% - 1em<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #efefef<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Open Sans'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-direction</span><span class="token punctuation">:</span> column <span class="token punctuation">}</span> </code></pre> Moderne HTML Umsetzung Tue, 13 Feb 18 13:46:07 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713702#m1713702 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713702#m1713702 <p>@@Bernd</p> <blockquote> <p>Und dieses ist richtig, dass man mehreren Sachen ein display:flex geben kann / muss?</p> </blockquote> <p>Ein Flexitem kann selbst wieder Flexbox für seine Kinder sein.</p> <p>Dass ein Griditem das auch kann, <a href="https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713548#m1713548" rel="noopener noreferrer">sagte ich schon</a>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung - CSS Grid Tue, 13 Feb 18 13:25:32 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713696#m1713696 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713696#m1713696 <p>Hallo,</p> <blockquote> <p>Du möchtest für <code>div.wrapper.blog</code> Grid verwenden.</p> </blockquote> <p>Grid versteht noch nicht jeder Browser. Außerdem habe ich damit noch überhaupt keine Erfahrung wie ich dieses umsetzten könnte. Ist es denn schwer für diesen Bereich ein Grid zu nutzen? Und was passiert wenn ein Brwoser das nicht versteht?</p> <blockquote> <p>Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:</p> </blockquote> <p>Davon war auch noch nie die Rede.</p> <p>EDI: OK, ich nutze jetzt Grid: <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a></p> <p>Passt das so?</p> <pre><code class="block language-css"><span class="token selector">.blog</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 33% 33% 33%<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> Moderne HTML Umsetzung Tue, 13 Feb 18 13:43:14 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713700#m1713700 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713700#m1713700 <p>@@Bernd</p> <blockquote> <p>Grid versteht noch nicht jeder Browser.</p> </blockquote> <p><a href="https://caniuse.com/#feat=css-grid" lang="en" rel="noopener noreferrer">Jeder relevante aktuelle Browser versteht Grid.</a> Für die anderen: na und? <a href="https://forum.selfhtml.org/self/2015/sep/19/technische-fragen-zu-einer-seite-die-nur-aus-einer-seite-besteht/1650342#m1650342" rel="noopener noreferrer"><em lang="en">Progressive enhancement.</em></a></p> <blockquote> <p>Ist es denn schwer für diesen Bereich ein Grid zu nutzen?</p> </blockquote> <p>Nein, im Gegenteil.</p> <blockquote> <p>Und was passiert wenn ein Brwoser das nicht versteht?</p> </blockquote> <p>Die Boxen sind untereinander.</p> <p>Oder das, was du ansonsten angibst. Das kann ein Fallback auf <code>display: inline-block</code> sein (<a href="https://codepen.io/gunnarbittersmann/pen/qXqEgX" rel="noopener noreferrer">Beispiel</a>) oder auch einer auf Flexbox.</p> <blockquote> <blockquote> <p>Von „nur noch das Problem“ würde ich nicht sprechen. Die Seite hat das Problem, dass sie nicht responsiv ist. 3spaltig bei schmalem Viewport würde ich jedenfalls nicht als responsiv bezeichnen:</p> </blockquote> <p>Davon war auch noch nie die Rede.</p> </blockquote> <p>Doch, das war es: <em>„Responsive wäre natürlich nicht schlecht.“</em> <a href="https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713515#m1713515" rel="noopener noreferrer">Deine Worte.</a></p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> Moderne HTML Umsetzung Tue, 13 Feb 18 13:49:55 Z https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713704#m1713704 https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713704#m1713704 <p>Hallo,</p> <blockquote> <blockquote> <p>Ist es denn schwer für diesen Bereich ein Grid zu nutzen? Nein, im Gegenteil.</p> </blockquote> </blockquote> <p>hab ich eingebaut, hab es mir schwer vorgestellt bzw. in den Videos die ich mir bis jetzt angesehen habe war immer viel mehr Code zu sehen.</p> <blockquote> <blockquote> <p>Davon war auch noch nie die Rede. Doch, das war es: <em>„Responsive wäre natürlich nicht schlecht.“</em> <a href="https://forum.selfhtml.org/self/2018/feb/11/moderne-html-umsetzung/1713515#m1713515" rel="noopener noreferrer">Deine Worte.</a></p> </blockquote> </blockquote> <p>Hab es eingebaut, sieht jetzt besser aus (nur auf die Boxen bezogen)<br> <a href="http://example-website.bplaced.net/" rel="nofollow noopener noreferrer">http://example-website.bplaced.net/</a></p>