3 Spalten im Footer responsive gestalten – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 10:20:40 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774028?srt=yes#m1774028 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774028?srt=yes#m1774028 <p>Liebe Forenmitglieder,</p> <p>ich versuche seit einigen Tagen meine Homepage in ein responsives Layout zu überführen. Dabei muss ich gestehen, dass ich nie in meinem Leben programmieren gelernt habe. Vielmehr hatte ich mir in den 90er Jahren das Erstellen von Internetseiten in Tabellenform selber beigebracht. Damit soll nun aber Schluss sein und ein erster, kleiner Entwurf steht bereits. Leider scheitere ich am Footer. Er soll aus drei unterschiedlich breiten Spalten nebeneinander (Desktopansicht) bestehen. In der mobilen Variante soll dann die mittlere Spalte ganz ausgeblendet und die verbleibenden zwei Spalten auf voller Seitenbreite untereinander angezeigt werden).</p> <p><strong>Hier mal mein html-code:</strong></p> <pre><code class="block"><div id="footer"> <div class="row"> <div class="leftfooter"> <h3>Deine Hansa-Park Fanseite</h3> <p>Hier kommt der abschließende Text hin. Ich brauche allerdings noch ein paar mehr Buchstaben um den tatsächlichen Abstand zur Karte zu testen.</p> </div> <div class="mapfooter"> <img src="map_facts.png"/> </div> <div class="rightfooter"> <h3>Links</h3> <p>Eintrittspreise ansehen<br/> Eintrittskarten kaufen</p> </div> </div> </div> </code></pre> <p><strong>Das zugehörige CSS sieht folgendermaßen aus:</strong></p> <pre><code class="block">#footer { padding: 0; background: #bc1014; margin: 0; border: 0; color: #ffffff; } .leftfooter { float: left; width: 40%; padding: 0 20px 10px 20px; margin: 0 auto 0 auto; text-align: left; } .mapfooter { float: left; width: auto; padding: 10px 0 10px 0; margin: 0 auto 0 auto; text-align: center; } .rightfooter { float: left; width: 30%; padding: 0 20px 10px 20px; margin: 0 auto 0 auto; text-align: left; } .row:after { content: ""; display: table; clear: both; } @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn, .leftfooter, .rightfooter { width: 100%; padding: 0; } .mapfooter { display: none; } } </code></pre> <p>Die Seite ist insgesamt auf 1000px Seitenbreite begrenzt. Nun ist es leider so, dass zwar mit schmaler werdender Bildschirmgröße das Bild im Bereich ".map_footer" verschwindet, jedoch bleiben ".leftfooter" und ".rightfooter" nebeneinander liegen und behalten auch ihre Breiten "width" von 40% bzw. 30%, obwohl unter @media anders von mir eingestellt.</p> <p>Kann mir jemand von euch bei meinem Problem weiterhelfen? Danke.</p> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 10:28:48 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774031?srt=yes#m1774031 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774031?srt=yes#m1774031 <p>Hallo Marcel,</p> <p>so ganz grundsätzlich ohne wirklich auf deine Fragestellung einzugehen und vor allem nicht böse oder abwertend gemeint:</p> <p><code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> und Gestaltung per <code>float</code> ist genau so 90er wie Tabellenlayout.</p> <p>Schau dir mal im Wiki unser Einsteiger-Tutorial an, im Anschluss suchst du bitte nach flexbox oder grid.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 14:24:38 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774043?srt=yes#m1774043 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774043?srt=yes#m1774043 <p>@@Marcel</p> <blockquote> <p>Er soll aus drei unterschiedlich breiten Spalten nebeneinander (Desktopansicht) bestehen. In der mobilen Variante soll dann die mittlere Spalte ganz ausgeblendet und die verbleibenden zwei Spalten auf voller Seitenbreite untereinander angezeigt werden).</p> </blockquote> <p>Du solltest bedenken, dass es zwischen breit und schmal auch noch einen großen Bereich gibt, wo weder die eine noch die andere von dir angedachte Darstellung gut aussieht.</p> <p>Und breit und schmal haben recht wenig mit „Desktop“ und „mobil“ zu tun.</p> <blockquote> <p>Kann mir jemand von euch bei meinem Problem weiterhelfen? Danke.</p> </blockquote> <p>Wo kann man sich dein Problem ansehen?</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Sat, 08 Aug 20 14:40:46 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774317?srt=yes#m1774317 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774317?srt=yes#m1774317 <p>Ich habe nun versucht viele eurer Tipps umzusetzen und begonnen die Seitenstruktur noch einmal völlig neu und mit Flexbox aufzubauen. Tatsächlich funktioniert nun auch der Footer so wie er soll. Die Seite ist zunächst auf Smartphones ausgerichtet und passt sich ggf. auf eine Desktopversion an. Bitte stört euch noch nicht an den Schriftgrößen. Das kommt jetzt alles im nächsten Schritt.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</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 special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>head.jpg<span class="token punctuation">)</span></span></span><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>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo<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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<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>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>logo_rw.png<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>Logo HaPaGuide<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>a</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>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation<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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ENTDECKEN<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>PLANEN<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>VERGANGENES<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ZUKÜNFTIGES<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MAGAZIN<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</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">id</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>main</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leftcontent<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>h1</span><span class="token punctuation">></span></span>Willkommen auf HaPaGuide<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</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>Deine Hansa-Park Fanseite ist ab sofort im responsiven Design online. Noch mehr Übersicht für noch mehr Hansa-Park.<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>leftcontent<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>h2</span><span class="token punctuation">></span></span>Entdecke den Hansa-Park<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>p</span><span class="token punctuation">></span></span>Themenwelten, Fahrattraktionen, Spiekmöglichkeiten, Shows, Gastronomie, Shops und Events. Es gibt viel zu entdecken.<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>leftcontent<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>h2</span><span class="token punctuation">></span></span>Plane deinen Parkbesuch<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>p</span><span class="token punctuation">></span></span>Das passende Ticket auswählen, die Anfahrt planen, günstig parken und keine Zeit verlieren. Zahlreiche Tipps helfen dir bei deiner Tagesplanung.<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>rightcontent<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>h3</span><span class="token punctuation">></span></span>Parknews und Updates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Aus dem Newsletter August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar. Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>rightcontent<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>h3</span><span class="token punctuation">></span></span>Die neuesten Fotos<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</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>1. April 2020<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>Nessie<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>rightcontent<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>h3</span><span class="token punctuation">></span></span>Oft angesehen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>rightcontent<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>h3</span><span class="token punctuation">></span></span>Demnächst auf HaPaGuide<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</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>Erste Bilder der Neuheiten 2021<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</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>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leftfooter<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>h2</span><span class="token punctuation">></span></span>HaPaGuide - Deine Hansa-Park Fanseite<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>p</span><span class="token punctuation">></span></span>HaPaGuide ist eine private und unabhängig vom Hansa-Park geführte Seite. Die bereitsgestellten Informationen sollen dir helfen dich noch besser auf deinen Besuch im Park vorbereiten zu können.<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>section</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>centerfooter<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>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>map_facts.png<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rightfooter<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>h2</span><span class="token punctuation">></span></span>Links<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> Eintrittskarten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Öffnungszeiten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Kontakt <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></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>scripts.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>Und die dazugehörige CSS-Datei:</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Verdana<span class="token punctuation">,</span> Geneva<span class="token punctuation">,</span> Tahoma<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #E6E6E6<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.75em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#logo img</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#navigation</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #bc1014<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#navigation a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.75em 1.1em<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 0.8em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#navigation a:hover</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #8f0c0f<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffff00<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#navigation a.active</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #8f0c0f <span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffff00<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.sticky</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.leftcontent, .rightcontent</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.rightcontent</span> <span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.leftcontent</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #bc1014<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#centerfooter</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">#logo img</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#navigation a</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0.75em 1.25em<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#content</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> row<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 punctuation">}</span> <span class="token selector">main</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 70% <span class="token punctuation">}</span> <span class="token selector">aside</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 28% <span class="token punctuation">}</span> <span class="token selector">footer</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> row<span class="token punctuation">;</span> <span class="token property">flex-flow</span><span class="token punctuation">:</span> row nowrap<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#leftfooter</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#centerfooter</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">width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 190px<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#rightfooter</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 30%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Jetzt würde mich natürlich noch einmal eure Meinung interessieren. Meint ihr ich bin auf einem guten/besseren Weg? Habt ihr noch grundlegende Tipps für mich?</p> <p>Ich versuche auch weitestgehend "em" als Maßeinheit zu verwenden.</p> <p>Marcel</p> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 10:34:57 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774032?srt=yes#m1774032 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774032?srt=yes#m1774032 <p>Hallo Matthias,</p> <p>erstmal Danke für deine schnelle Antwort. Ich nehme dir das ganz und gar nicht übel. Ich habe tatsächlich schon die Seiten zu grid und flexbox gelesen, aber nicht so wirklich verstanden. Das alles fällt mir doch eher schwer so ohne wirkliche Grundkenntnisse. Irgendwie gerate ich gerade in eine Sackgasse.</p> <p>Gestern habe ich mir erstmal das Programm weBuilder zugelegt als ich merkte mit Microsoft Expression Web keinen Blumentopf mehr gewinnen zu können .</p> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 10:37:14 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774033?srt=yes#m1774033 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774033?srt=yes#m1774033 <p>Hallo Marcel,</p> <p>bring zuerst mal dein HTML in Ordnung, ohne auch irgendwie nur an die gewünschte Darstellung zu denken. Dann können wir weiter sehen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 11:45:32 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774037?srt=yes#m1774037 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774037?srt=yes#m1774037 <p>Hallo Matthias,</p> <p>was "in Ordnung" ist, soll er nach 10 Stunden Studium der Tutorials erraten? Klingt frustrierend für ein kleines "Hilf mir mal bitte". Die Tutorials sind natürlich lesenswert, aber ein kleines tl;dr kann nicht schaden.</p> <p>Ich ergänze das also mal:</p> <ul> <li> <p>Verwende semantisches Markup, d.h.</p> <ul> <li><code>footer</code> Element statt div</li> <li><code>div class="row"</code> ist Kitsch, keine Kunst, und kann weg. Der einzige Zweck ist, über ein ::after Element die Floats zu clearen, und die Floats sollten ja durch Flex oder Grid ersetzt werden.</li> <li><code>section</code> Elemente statt der left/map/rightfooter <code>div</code></li> <li>ob <code>h3</code> tatsächlich angemessen ist, darüber bin ich mir unsicher. Ja, es ist eine Überschrift. Aber wo ist das <code>h2</code> dazu? Die <code>h…</code> Elemente definieren eine Dokumentgliederung. Wenn zwischen dem <code>h1</code> der Seite und den <code>h3</code> kein <code>h2</code> ist, müsste man im footer <code>h2</code> verwenden, oder ein nicht sichtbares <h2>Seitenfuss</h2> verstecken. Oder?</li> </ul> </li> <li> <p>Verwende mobile first, d.h. drehe die Media-Abfrage um. Auf schmalen Viewports sollten die Media-Abfragen nicht zutreffen. Und wenn sie breiter werden, dann wird das Layout dafür umgebaut.</p> <ul> <li>Heißt für die Karte: <code>display: none;</code> im Normalfall und <code>display:block;</code> wenn genug Platz ist.</li> </ul> </li> <li> <p>Für das Layout ist Grid-Layout am einfachsten. Schau Dir mal an, was <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche#feststehender_Footer_in_der_Desktopansicht" rel="nofollow noopener noreferrer">hier</a> mit der grid-Eigenschaft gehext wird. Internet Explorer Anwender bekommen allerdings keine so schöne Ansicht. Dafür ist Flexbox einfacher.</p> </li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 14:39:23 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774044?srt=yes#m1774044 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774044?srt=yes#m1774044 <p>@@Rolf B</p> <blockquote> <ul> <li>Verwende mobile first, d.h. drehe die Media-Abfrage um. Auf schmalen Viewports sollten die Media-Abfragen nicht zutreffen. Und wenn sie breiter werden, dann wird das Layout dafür umgebaut.</li> </ul> </blockquote> <p>Das kann man so pauschal nicht sagen.</p> <blockquote> <ul> <li>Heißt für die Karte: <code>display: none;</code> im Normalfall und <code>display:block;</code> wenn genug Platz ist.</li> </ul> </blockquote> <p>Ich dem Fall könnte man das so tun. Muss man aber nicht.</p> <p>Bei responsiven Tabellen wäre es irrsinnig, erst alle Tabellenspalten, -zeilen und -zellen auf <code>display: block</code> zu setzen und dann mit Media-Query wieder zurück auf ihre ursprünglichen Werte.</p> <p>Der <em>Gedanke</em> <em lang="en">mobile first</em> ist nicht verkehrt; die <em>Implementierung</em> ist es nicht unbedingt.</p> <blockquote> <ul> <li>Für das Layout ist Grid-Layout am einfachsten. […] Internet Explorer Anwender bekommen allerdings keine so schöne Ansicht.</li> </ul> </blockquote> <p>Wieso das denn nicht? IE kann Grid (mit eigener Syntax) – zumindest die hier benötigten Teile.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Sun, 02 Aug 20 16:07:12 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774084?srt=yes#m1774084 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774084?srt=yes#m1774084 <p>@@Rolf B</p> <blockquote> <p>Für das Layout ist Grid-Layout am einfachsten. […] Dafür ist Flexbox einfacher.</p> </blockquote> <p><em lang="en">“Should I use flexbox or grid? Yes.”</em> —Rachel Andrew (<a href="https://twitter.com/hdv/status/1289877863181643777" rel="nofollow noopener noreferrer">vermutlich</a>)</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 15:26:59 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774046?srt=yes#m1774046 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774046?srt=yes#m1774046 <p>Oh man, ich habe gar nicht so schnell mit so vielen Rückmeldungen gerechnet. Erstmal Danke dafür an euch alle.</p> <p><a href="http://www.hapaguide.de/HaPaGuide_upd/index.html" rel="nofollow noopener noreferrer">http://www.hapaguide.de/HaPaGuide_upd/index.html</a> Der Link zu der bisher von mir gebastelten Seite (und ich war bisher so stolz und zufrieden ).</p> <p>Ich nutze übrigens WeBuilder2020, da es mir mit einem WYSIWYG-Programm deutlich leichter fällt. Allerdings habe ich eben die Befürchtung bekommen, dass grid damit gar nicht darstellbar ist. Ich habe es gerade parallel mit einem YouTube Video versucht und festgestellt, dass bei mir gar keine Tabellenspalten angezeigt werden .</p> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 15:39:56 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774047?srt=yes#m1774047 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774047?srt=yes#m1774047 <p>Hallo Marcel,</p> <p>witzig, mit WYSIWYG wirbt webuilder gar nicht.</p> <p>Aber sie werben mit „Up-to-Date mit modernen Standards in HTML und CSS“, und dazu gehört auch Grid.</p> <p>Eine HTML Seite in WYSIWYG zu realisieren ist übrigens etwas, was mir noch nie gelungen ist. Zumindest nicht mit Visual Studio. WISAGWAC<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> war das.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>What I Saw And Got Was All Crap <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 15:49:18 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774048?srt=yes#m1774048 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774048?srt=yes#m1774048 <p>Würdest du denn sagen, dass ich statt grid auch flex nutzen kann oder entspricht das auch nicht mehr dem aktuellen Stand der Dinge?</p> <p>Kennt hier jemand einen guten WYSIWYG Builder den ich auch für Grid nutzen könnte?</p> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 16:04:53 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774049?srt=yes#m1774049 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774049?srt=yes#m1774049 <p>Hallo Marcel,</p> <p>ja, Flex geht auch. Ich würde die Seite im "schmalen" Modus ohne Flex rendern, dann erscheinen einfach beide Boxen untereinander, und im "breiten" Modus das display:flex am Footer und die flex-Eigenschaften an den 3 Kind-Elementen hinzufügen. Am breiteren Teil <code>flex: 1 1 40%</code>, und den beiden schmaleren <code>flex: 1 1 30%</code>.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Sat, 01 Aug 20 16:16:03 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774050?srt=yes#m1774050 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774050?srt=yes#m1774050 <p>Vielen Dank erstmal. Ich probiere mich mal aus.</p> 3 Spalten im Footer responsive gestalten Sat, 15 Aug 20 17:21:05 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774593?srt=yes#m1774593 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774593?srt=yes#m1774593 <p>@@Gunnar Bittersmann</p> <blockquote> <p><em lang="en">“Should I use flexbox or grid? Yes.”</em> —Rachel Andrew (<a href="https://twitter.com/hdv/status/1289877863181643777" rel="nofollow noopener noreferrer">vermutlich</a>)</p> </blockquote> <p>Gerade in meinen Fotos entdeckt: Rachel Andrew auf der <a href="https://2019.webclerks.at/" rel="nofollow noopener noreferrer">Webclerks 2019</a> in Wien</p> <p><a href="/images/524e00a0-df1b-11ea-a4a3-b42e9947ef30.jpeg" lang="en" rel="noopener noreferrer"><img src="/images/524e00a0-df1b-11ea-a4a3-b42e9947ef30.jpeg?size=medium" alt="Slide: “‘Grid or Flexbox’ This is a terrible question.”" loading="lazy"></a></p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Sat, 08 Aug 20 15:01:19 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774319?srt=yes#m1774319 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774319?srt=yes#m1774319 <p>Hallo Marcel,</p> <p>ich habe nur einen flüchtigen Blick in den Quelltext der Seite geworfen. Das sieht jetzt deutlich besser aus. Du bist auf einem richtigen Weg.</p> <p>Was mir an kleineren Fehlern aufgefallen ist:</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width<span class="token punctuation">"</span></span> <span class="token attr-name">initial-scale</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>1</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>vergleiche <a href="https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen</a></p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>robots<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index, follow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das ist nicht notwendig, das tun die Suchmaschinen ohnehin.</p> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>SCHLÜSSELWÖRTER ZUR WEBSITE EINFÜGEN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das ist nicht notwendig und ggf. sogar kontraproduktiv. Die Suchmaschinen durchsuchen heutzutage die Seiten und nicht nur die Kopfdaten. Google straft möglicherweise sogar ab, wenn die keywords nicht zum Inhalt passen.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</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>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Dieses div-Element ist mit großer Wahrscheinlichkeit überflüssig.</p> <p>Und dann <a href="https://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/aside" rel="nofollow noopener noreferrer">schau mal</a>, ob <code>aside</code> wirklich die richtige Wahl ist.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> 3 Spalten im Footer responsive gestalten Sat, 08 Aug 20 15:18:12 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774323?srt=yes#m1774323 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774323?srt=yes#m1774323 <p>Hallo Marcel,</p> <p>mir ist was anderes aufgefallen. Wenn die Navigation in den Sticky-Mode schaltet, macht der Seiteninhalt einen Ruck nach oben. Das liegt daran, dass die Navigation aus dem Dokumentenfluss herausgenommen wird und der Rest nach oben rutscht. Das ist nur unschön, aber es geht noch schlimmer. Auf einem genügend hohen Bildschirm (ich habe einen 16:10 Monitor mit 1200px vertikal) kommt die sticky-Logik ins Flattern. Weil die Seite nach dem Umschalten zu kurz für den Bildschirm ist, scrollt sie zurück, der pageYOffset unterschreitet die sticky-Schwelle wieder und sticky wird wieder entfernt. Das geht eine Weile hin und her, dann findet er einen stabilen Punkt. Das kann auch in eine Endlosschleife gehen.</p> <p>Die Navigation auf sticky setzen reicht also nicht. Du musst den Platz, den sie einnahm, mit etwas füllen. Eine Möglichkeit ist margin-top des content-Blocks. Das geht allerdings schlecht mit CSS, weil die Höhe des Navigationsbereichs nicht fix ist. Man kann's vielleicht mit calc() irgendwie berechnen, aber ich würde es im Script machen.</p> <pre><code class="block">window.onscroll = function() {myFunction()}; var navigation = document.getElementById("navigation"); var content = = document.getElementById("content"); var sticky = navigation.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { // Klasse und Margin nur setzen wenn Sticky noch nicht da ist, sonst // wird der falsche Margin berechnet! if (!navigation.classList.contains("sticky")) { content.style.marginTop = (content.offsetTop-sticky)+"px"; navigation.classList.add("sticky"); } } else { content.style.marginTop = ""; navigation.classList.remove("sticky"); } } </code></pre> <p>Damit ist's dann smooth.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Sat, 08 Aug 20 22:12:23 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774341?srt=yes#m1774341 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774341?srt=yes#m1774341 <p>Hallo</p> <blockquote> <pre><code class="block language-css"><span class="token selector">#navigation a:hover</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #8f0c0f<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffff00<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Da wo <code>:hover</code> ist, sollte auch <code>:focus</code> sein. Für die Markierung eines Links per Tastaturbedienung kann man üblicherweise die gleichen Regeln wie für die Markierung des Hoverns mit der Maus benutzen. Schreib' den Selektor für <code>:focus</code> einfach zu dem für <code>:hover</code> und das war's.</p> <pre><code class="block language-css"><span class="token selector">#navigation a:focus, #navigation a:hover</span> <span class="token punctuation">{</span> … <span class="token punctuation">}</span> </code></pre> <blockquote> <pre><code class="block language-css"><span class="token selector">#navigation a.active</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <ol> <li>Nicht <code>a.active</code> sondern <code>a:active</code>.</li> <li>Bei den meisten Fonts ändern sich mit dem „umschalten“ von Normal- zu Fettschrft die Abmessungen des Texts derart gravierend, dass sich damit auch die Abmessungen des Elements, in dem sich der Text befindet, ebenfalls ändert. Das führt dann gern zum verspringen des Texts, des Blocks (hier des Links) oder zum Beispiel in einem einzeiligen Navigationsstreifen zur Größenänderung der ganzen Navi-Blocks. Auch wenn die Seite binnen kurzem verschwindet, um der neuen Seite Platz zu machen, sieht das oft unangenehm unruhig aus. Das solltest du mal testen, bevor du das „scharf schaltest“.</li> </ol> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> 3 Spalten im Footer responsive gestalten Sun, 09 Aug 20 05:27:33 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774343?srt=yes#m1774343 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774343?srt=yes#m1774343 <p>@@Marcel</p> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>head.jpg<span class="token punctuation">)</span></span></span><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>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>logo<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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index.html<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>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>logo_rw.png<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>Logo HaPaGuide<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>a</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>header</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Der Alternativtext ist nicht besonders gut gewählt. Hier ist weniger relevant, dass es sich um das Logo handelt; vielmehr, dass es sich um den Link zur Homepage handelt: <code class="good">alt="HaPaGuide Startseite"</code>.</p> <p>Das <code>div</code>-Element ist überflüssig.</p> <hr> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation<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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ENTDECKEN<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>PLANEN<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>VERGANGENES<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ZUKÜNFTIGES<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MAGAZIN<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>VoiceOver liest das richtig vor (bei richtiger Sprachauszeichnung <code>lang="de"</code>, die du ja getätigt hast). Ich bin aber nicht sicher, ob das alle Screereader so tun oder ob einige nicht buchstabieren: <em>e en te de e ce ka e en …</em></p> <p>Lieber im HTML-Quelltext normal schreiben und die Versalien mit CSS <code>text-transform: uppercase</code>.</p> <p>Die Auszeichnung als Liste bietet sich auch an; sie gibt Nutzern assitiver Technologie zusätzliche Hinweise:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>navigation<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>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Entdecken<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Planen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Vergangenes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zukünftiges<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>LINK ZUR SEITE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Magazin<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <hr> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</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> </code></pre> </blockquote> <p>Dass dieses <code>div</code>-Element überflüssig ist, wurde schon gesagt.</p> <hr> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leftcontent<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>h1</span><span class="token punctuation">></span></span>Willkommen auf HaPaGuide<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</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>Deine Hansa-Park Fanseite ist ab sofort im responsiven Design online. Noch mehr Übersicht für noch mehr Hansa-Park.<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>leftcontent<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>h2</span><span class="token punctuation">></span></span>Entdecke den Hansa-Park<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> ⋮ </code></pre> </blockquote> <p>Das ist mitnichten ein eigenständiger Abschnitt, also kein <code class="bad">article</code>. Das ist die Überschrift für die nachfolgenden <code>section</code>s. Wenn du für <code>h1</code> und <code>p</code> ein gruppierendes Element brauchst, dann ein <code>div</code>; aber auch <code class="good">header</code> bietet sich dafür an.</p> <hr> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>rightcontent<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>h3</span><span class="token punctuation">></span></span>Parknews und Updates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Aus dem Newsletter August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar. Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.<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>section</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Die Überschrifthierarchie stimmt hier nicht: Es gibt kein <code>h2</code> zwischen <code>h1</code> und <code class="bad">h3</code></p> <p>Entweder der <code>aside</code>-Bereich bekommt eine eigene Überschrift (die du evtl. <a href="https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/" rel="nofollow noopener noreferrer">visuell verstecken</a> kannst)</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</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>Weitere Informationen<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>section</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>rightcontent<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>h3</span><span class="token punctuation">></span></span>Parknews und Updates<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Aus dem Newsletter August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</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>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar. Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.<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>section</span><span class="token punctuation">></span></span> </code></pre> <p>oder die Überschriften müssen eine Stufe hochrutschen</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>rightcontent<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>h2</span><span class="token punctuation">></span></span>Parknews und Updates<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>h3</span><span class="token punctuation">></span></span>Aus dem Newsletter August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</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>Ab sofort ist nur noch ein Besuch pro Saisonkarte zeitgleich reservierbar. Desweiteren zeigt die Park-App nun freie Kapazitäten der Waschräume an.<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>section</span><span class="token punctuation">></span></span> </code></pre> <p>Anpassung der Schriftgrößen mit Nachfahrenselektor <code>aside h2</code>, <code>aside h3</code>.</p> <hr> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leftfooter<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>h2</span><span class="token punctuation">></span></span>HaPaGuide - Deine Hansa-Park Fanseite<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>section</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>centerfooter<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>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>map_facts.png<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>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rightfooter<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>h2</span><span class="token punctuation">></span></span>Links<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Auch hier: kein <code class="bad">article</code>. Faustregel: <code>article</code>s (und <code>section</code>s) beginnen jeweils mit einer eigenen Überschrift.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Sat, 08 Aug 20 15:11:34 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774321?srt=yes#m1774321 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774321?srt=yes#m1774321 <p>Hallo Matthias,</p> <p>du bist aber auch immer schnell . Besonders deine Hinweise zum <head>-Bereich sind super. Das wusste ich nicht über Google und Co.</p> <p>Mal sehen wie es jetzt weitergeht wenn der richtige Inhalt entsteht?</p> 3 Spalten im Footer responsive gestalten Sun, 09 Aug 20 07:58:42 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774346?srt=yes#m1774346 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774346?srt=yes#m1774346 <p>Hallo Auge,</p> <blockquote> <blockquote> <pre><code class="block language-css"><span class="token selector">#navigation a.active</span> <span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <ol> <li>Nicht <code>a.active</code> sondern <code>a:active</code>.</li> </ol> </blockquote> <p>Vielleicht doch? Weil die aktuelle Seite gemeint ist und nicht ein Link, der gerade angeklickt ist?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 11:45:39 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774409?srt=yes#m1774409 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774409?srt=yes#m1774409 <p>Erstmal wieder vielen Dank für eure Kommentare. Leider ließen sich nicht alle Vorschläge auch umsetzen.</p> <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> mit deinem Script kann ich leider nicht 1:1 mein altes ersetzen. Danach ist die Navigationsleiste bei mir z.B. gar nicht mehr "sticky" .</p> <p><a href="/users/15" class="mention registered-user" rel="noopener noreferrer">@Auge</a> der zusätzliche Befehl "focus" sorgte bei mir dafür, dass bei überfahren der Begriffe der Navigationsleiste diese nicht mehr anders farblich markiert wurden.</p> <p><a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> Der "uppercase"-Befehl war ein guter Hinweis den ich direkt umgesetzt habe. Das mit dem "alt"-Element beim Logo muss ich auch nochmal überdenken. Auf mein "div"-Element im Bereich "header" kann ich nicht verzichten, da ich nur so einen leichten Weißschleier auf das Hintergrundbild gelegt bekomme.</p> <p>Aber ich habe schon ein neues Problem, welches ich mit Flexbox lösen möchte und daran scheitere. Ich möchte gerne innerhalb meines Footers Icons neben untereinander stehenden Textlinks ausrichten.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rightfooter<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>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>titlefooter<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>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>icon_tix.png<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>Eintrittskarten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> Eintrittspreise ansehen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://my.hansapark.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</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>linkfooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tickets online kaufen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>titlefooter<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>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>icon_calendar.png<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>Öffnungszeiten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> Heute ist der<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</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>date.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Die Saison endet am 18. Oktober<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> täglich ab 10 Uhr geöffnet<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Wissenswertes während Corona<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>titlefooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kontakt zum Park<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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://hansapark.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</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>linkfooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Offizielle Internetseite<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Automatische Info-Hotline: 000000<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> Telefonischer Kundenservice: 000000<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> E-Mail-Adresse: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:info@hansapark.de<span class="token punctuation">"</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>linkfooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>info@hansapark.de<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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>section</span><span class="token punctuation">></span></span> </code></pre> <p>Sprich das Icon "icon_tix" soll neben den Begriffen "Eintrittskarten, Eintrittspreise ansehen und Tickets online kaufen" in einer separaten Spalte stehen. Ich würde es nur über eine Tabelle gelöst bekommen. Gleiches soll das mit dem "icon_calendar" für die nächsten 4 Begriffe geschehen, etc.</p> <pre><code class="block language-css"> <span class="token selector">.titlefooter</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.05em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #97CAAC<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.icon</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">align-items</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.linkfooter</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.linkfooter.active</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.linkfooter.hoover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a.linkfooter.visited</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> 3 Spalten im Footer responsive gestalten Sun, 09 Aug 20 08:29:53 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774347?srt=yes#m1774347 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774347?srt=yes#m1774347 <p>@@Matthias Apsel</p> <blockquote> <blockquote> <ol> <li>Nicht <code>a.active</code> sondern <code>a:active</code>.</li> </ol> </blockquote> <p>Vielleicht doch? Weil die aktuelle Seite gemeint ist und nicht ein Link, der gerade angeklickt ist?</p> </blockquote> <p>Um solche Verwechslung zu vermeiden, sollte man eine Klasse nicht <code class="bad">active</code> nennen. <code>current</code> wäre eine sinnvolle Bezeichnung..</p> <p>Wenn es angebracht ist, das <a href="https://tink.uk/using-the-aria-current-attribute/" rel="nofollow noopener noreferrer"><code>aria-current</code>-Attribut</a> zu verwenden, braucht man gar keine solche Klasse zusätzlich.</p> <p>Wenn man die aktuelle Seite nicht verlinkt (wofür es gute Gründe gibt), braucht man eine solche Klasse auch nicht.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Sun, 09 Aug 20 10:56:49 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774353?srt=yes#m1774353 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774353?srt=yes#m1774353 <p>Hallo</p> <blockquote> <p>Wenn man die aktuelle Seite nicht verlinkt (wofür es gute Gründe gibt), braucht man eine solche Klasse auch nicht.</p> </blockquote> <p>Ich würde das heutzutage genau so machen.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/da.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Da<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span><span class="token punctuation">></span></span>Hier<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>… und <a href="https://www.youtube.com/watch?v=1jKSN7Zx9To" rel="nofollow noopener noreferrer">kleine Monster nicht so gnadenlos durch die Gegend scheuchen</a>.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 12:32:40 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774410?srt=yes#m1774410 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774410?srt=yes#m1774410 <p>Hallo Marcel,</p> <blockquote> <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> mit deinem Script kann ich leider nicht 1:1 mein altes ersetzen.</p> </blockquote> <p>Ja, ist ein Typo drin, der zu einem Syntaxfehler führt. Sorry. Aber den findest Du bestimmt selber.</p> <pre><code class="block bad language-js"><span class="token keyword">var</span> content <span class="token operator">=</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"content"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das mit dem Icon kann man unterschiedlich lösen. Entweder über ein Grid-Layout für die <p> Bereiche, oder mit einem Zusatzcontainer und Flexbox, oder Du setzt das Icon einfach vor die Überschrift und schiebst die Zeilen darunter mit margin-left nach rechts. icon_tix.png ist bei Dir dem Anschein nach noch nicht online - wie groß ist das Ding?</p> <p>Ich bin aber nicht sicher, ob dein HTML so ideal ist.</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rightfooter<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>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>titlefooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eintrittskarten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> Eintrittspreise ansehen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://my.hansapark.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</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>linkfooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tickets online kaufen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>br</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>section</span><span class="token punctuation">></span></span> </code></pre> <p>Die Elemente section und article gehören zur Seitenstrukturierung, und eigentlich gehört zu jedem dieser Elemente eine Überschrift. Wenn Du keine Überschrift hast, aber aus technischen Gründen einen Container brauchst, dann ist es einfach nur ein div.</p> <p>Das Markup sollte meiner Meinung nach in diese Richtung gehen.</p> <ul> <li>Sections haben Überschriften</li> <li>Listen werden als Listen ausgezeichet (mit list-style:none kannst Du die Listenpunkte, und mit padding die Einrückung entfernen), damit Screenreader sie auch als Liste ansagen.</li> <li>Das Datum sollte durch unaufdringliches Script eingesetzt werden, und vor allem sollte dieses Script inline sein, damit es unverzüglich läuft.</li> <li>Natürlich wird deine Seite erstmal anders aussehen, wenn Du das umsetzt. Da stehen dann noch ein paar Arbeiten im CSS an, damit das HTML im Footer-Bereich passend dargestellt wird. Aber das ist richtig so. Man wählt die HTML Elemente nach ihrem vorgesehenen Zweck aus, nicht danach, wie das Browser-CSS sie darstellt.</li> </ul> <pre><code class="block good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rightfooter<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>section</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>Eintrittskarten<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>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Eintrittspreise ansehen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://my.hansapark.de/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</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>linkfooter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tickets online kaufen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>Öffnungszeiten<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>p</span><span class="token punctuation">></span></span>Heute ist der <span id="tagesdatum>?<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>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>Die Saison endet am 18. Oktober<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> täglich ab 10 Uhr geöffnet<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>Wissenswertes während Corona<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>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>Kontakt zum Park<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>ul</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</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>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token punctuation">{</span> <span class="token keyword">const</span> mydate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> monate <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"Januar"</span><span class="token punctuation">,</span> <span class="token string">"Februar"</span><span class="token punctuation">,</span> <span class="token string">"März"</span><span class="token punctuation">,</span> <span class="token string">"April"</span><span class="token punctuation">,</span> <span class="token string">"Mai"</span><span class="token punctuation">,</span> <span class="token string">"Juni"</span><span class="token punctuation">,</span> <span class="token string">"Juli"</span><span class="token punctuation">,</span> <span class="token string">"August"</span><span class="token punctuation">,</span> <span class="token string">"September"</span><span class="token punctuation">,</span> <span class="token string">"Oktober"</span><span class="token punctuation">,</span> <span class="token string">"November"</span><span class="token punctuation">,</span> <span class="token string">"Dezember"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> year <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> month <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> daym <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> datumInfo <span class="token operator">=</span> daym <span class="token operator">+</span> <span class="token string">". "</span> <span class="token operator">+</span> monate<span class="token punctuation">[</span>month<span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> year<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tagesdatum"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>text <span class="token operator">=</span> datumInfo<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>Den <script> Block kannst Du bspw. unter die <script> Zeile stellen wo Du scripts.cs einbindest. Aber auf jeden Fall als inline Script.</p> <p>Durch die geschweiften Klammern und die Nutzung von const (oder let) wird erreicht, dass die Variablen aus diesem Script nur innerhalb dieses Blocks gelten und danach wieder gelöscht werden. Sowas ist ziemlich sinnvoll, man möchte keine globalen Variablenleichen herumliegen lassen. Ein paar Variablen könnte man noch wegrationalisieren und beim Zusammenbau der Datumsinfo direkt <code>mydate.getDate()</code> schreiben statt erstmal eine Variable anzulegen. Aber das ist eine Frage der persönlichen Vorlieben für Lesbarkeit. Der JavaScript-Compiler schmeißt es vermutlich eh zusammen, vor allem, wenn man let statt var verwendet.</p> <p>Was bei Dir fehlte, waren Semikolons am Ende der Anweisungen. JavaScript ist eine der wenigen Sprachen, die sowas automatisch (und gelegentlich auch falsch) korrigieren. Aber man sollte sie trotzdem setzen.</p> <p>Die <code>getYear</code>-Methode des <code>Date</code>-Objekts ist missbilligt (deprecated), weil sie nur zweistellige Jahre liefert. Statt dessen ist <code>getFullYear</code> zu verwenden.</p> <p><code>new Array(a,b,c)</code> um ein Array zu erzeugen ist umständlich. Dafür ist <code>[a,b,c]</code> gebräuchlich.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 12:51:04 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774411?srt=yes#m1774411 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774411?srt=yes#m1774411 <p>Hallo,</p> <blockquote> <pre><code class="block language-javascript"><span class="token punctuation">{</span> <span class="token keyword">const</span> mydate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> monate <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token string">"Januar"</span><span class="token punctuation">,</span> <span class="token string">"Februar"</span><span class="token punctuation">,</span> <span class="token string">"März"</span><span class="token punctuation">,</span> <span class="token string">"April"</span><span class="token punctuation">,</span> <span class="token string">"Mai"</span><span class="token punctuation">,</span> <span class="token string">"Juni"</span><span class="token punctuation">,</span> <span class="token string">"Juli"</span><span class="token punctuation">,</span> <span class="token string">"August"</span><span class="token punctuation">,</span> <span class="token string">"September"</span><span class="token punctuation">,</span> <span class="token string">"Oktober"</span><span class="token punctuation">,</span> <span class="token string">"November"</span><span class="token punctuation">,</span> <span class="token string">"Dezember"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">const</span> year <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> month <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> daym <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> datumInfo <span class="token operator">=</span> daym <span class="token operator">+</span> <span class="token string">". "</span> <span class="token operator">+</span> monate<span class="token punctuation">[</span>month<span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> year<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tagesdatum"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>text <span class="token operator">=</span> datumInfo<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>ich glaube,</p> <pre><code class="block language-javascript"><span class="token punctuation">{</span> <span class="token keyword">const</span> mydate <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">weekday</span><span class="token operator">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token string">'numeric'</span><span class="token punctuation">,</span> <span class="token literal-property property">month</span><span class="token operator">:</span> <span class="token string">'long'</span><span class="token punctuation">,</span> <span class="token literal-property property">day</span><span class="token operator">:</span> <span class="token string">'numeric'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">const</span> datumInfo <span class="token operator">=</span> mydate<span class="token punctuation">.</span><span class="token function">toLocaleDateString</span><span class="token punctuation">(</span><span class="token string">'de-DE'</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"tagesdatum"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>text <span class="token operator">=</span> datumInfo<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>macht das selbe.</p> <p>Siehe <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Date/toLocaleString#toLocaleDateString_und_toLocaleTimeString" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Date/toLocaleString#toLocaleDateString_und_toLocaleTimeString</a><br> und <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString" rel="nofollow noopener noreferrer">https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString</a></p> <p>Gruß<br> Jürgen</p> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 13:06:35 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774412?srt=yes#m1774412 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774412?srt=yes#m1774412 <p>Hallo JürgenB,</p> <p>super, hätte ich dran denken müssen.</p> <p><code>weekday: "long"</code> ist aber ein Addon und passt nicht in den Satzbau.</p> <p>"Heute ist der Montag, 10. August 2020"</p> <p>Da müsste man den Wochentag getrennt vom Datum ermitteln und setzen, oder das "der" einfach weglassen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 15:34:54 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774427?srt=yes#m1774427 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774427?srt=yes#m1774427 <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> spitze! Du hast mir jetzt sehr weitergeholfen. Den Fehler im Script der Navigationsleiste hatte ich gar nicht gesehen. Jetzt klappt es super!</p> <p>Sektionen mit Listen zu erstellen macht tatsächlich auch Sinn. Das versuche ich evtl. gleich nochmal an anderer Stelle. Dein Tipp mit den margin-Werten hat auch funktioniert, auch wenn es nicht bei jeder Displaygröße ganz optimal aussehen wird. Trotzdem bin ich froh um diese "einfache" Variante, zumal mein Editor nicht Grid-fähig ist.</p> <p>Das mit dem Script für das Datum verstehe ich allerdings nicht so ganz. Warum ist es denn besser das direkt im html-Quelltext einzubinden statt in einer separate .js-Datei?</p> <p><a href="http://www.hapaguide.de/HaPaGuide_upd/index.html" rel="nofollow noopener noreferrer">Hier</a> kannst du mein bisheriges Werk sehen .</p> <p>Danke nochmal!</p> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 16:39:56 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774432?srt=yes#m1774432 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774432?srt=yes#m1774432 <p>Hallo Marcel,</p> <blockquote> <p>Warum ist es denn besser das direkt im html-Quelltext einzubinden statt in einer separate .js-Datei?</p> </blockquote> <p>Weil eine separate .js Datei einen separaten Serverzugriff durchführt, und zwar in dem Moment, wo der Browser das <script src="..."></script> Element antrifft (andernfalls könnte das document.write nicht funktionieren). Ggf. wird die Seite bis dahin bereits dargestellt und blockiert für einen Moment, während der Browser auf das Script wartet. Während dieser Zeit ist die Darstellung ggf. kaputt.</p> <p>Weil eine separate Datei ggf. gar nicht geladen wird (Netzwerkfehler, Datei fehlt, weißdergeierwassonst) und dann das Datum nicht initialisiert wird.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 17:15:18 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774438?srt=yes#m1774438 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774438?srt=yes#m1774438 <p>Hallo Marcel,</p> <pre><code class="block language-html"><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>icon_tix.png<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>h5</span><span class="token punctuation">></span></span>Eintrittskarten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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>list<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>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Whoa - so bitte nicht.</p> <ul> <li> <p>h5? Wo sind die Überschiften h2 bis h4? Überschriften erzeugen eine Gliederung. Das muss h2 sein. Wenn Du im CSS sicher sein willst, dass Du nur die h2 im Footer und die h2 im main Bereich korrekt separierst, bau die Selektoren entsprechend (also <code>main h2</code> und <code>footer h2</code> statt einfach nur h2).</p> </li> <li> <p>Das <img> vor die Überschrift und dann mit der Margin-Axt die Überschrift zurechtzimmern sieht zwar irgendwie passend aus. Aber auch nur irgendwie. Nimm das img in die Überschrift hinein.</p> </li> </ul> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</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>icon_tix.png<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>Eintrittskarten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> </code></pre> <p>Damit das img auf der richtigen Höhe ist, gibt's vertical-align:</p> <pre><code class="block language-css"><span class="token selector">footer h2 img</span> <span class="token punctuation">{</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die Margins vom h2 setzt Du auf 0 - den bottom-margin meinetwegen auch leicht ins Minus, und das margin-top vom ul geht auch auf 0. Dann ist es wieder so kompakt wie vorher.</p> <pre><code class="block language-css"><span class="token selector">footer h2</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 0 -0.2em 0<span class="token punctuation">;</span> <span class="token comment">/* oben rechts unten links */</span> <span class="token punctuation">}</span> <span class="token selector">footer ul.links</span> <span class="token punctuation">{</span> <span class="token comment">/* Anpassumg im HTML nicht vergessen :) */</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Warum <code>footer ul.links</code> statt <code>.list</code>? Klassen sollten eine fachliche Beschreibung des Elements liefern. Man könnte den Selektor schon als zu genau ansehen (was man lassen sollte), aber nach meiner Meinung drückt dieser Selektor genau den fachlichen Zusammenhang aus. Liste der Links im Footer.</p> <p>Da die Icons reiner Schmuck sind, könnte man auch sagen: Die gehören gar nicht ins HTML. Das geht auch, mit dem ::before Pseudoelement:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</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>tickets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eintrittskarten<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>ul</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">footer h2</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 0 -0.1em 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer h2.tickets::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" "</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>icon_tix.png<span class="token punctuation">)</span></span> no-repeat center/contain<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Die Angaben in der background-Eigenschaft sind etwas magisch. url() ist klar, no-repeat sicher auch. <code>center/contain</code> ist merkwürdig. Ich brauche eigentlich nur <code>contain</code>, was das Bild so verkleinert, dass es verzerrungsfrei in die Box eingepasst wird, aber die background-size Angabe lässt sich nur kombiniert mit background-position (hier: center) angeben. Die CSS Syntax will es nicht anders.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 16:52:26 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774433?srt=yes#m1774433 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774433?srt=yes#m1774433 <p>Hallo Rolf,</p> <blockquote> <p>[...] Natürlich können Features wie HTTP/2</p> <p>Weil eine separate Datei ggf. gar nicht geladen wird (Netzwerkfehler, Datei fehlt, weißdergeierwassonst) und dann das Datum nicht initialisiert wird.</p> </blockquote> <p>beim Sex ist meistens der Zauber kaputt, wenn <em>mann</em> zu früh kommt. Hier hast du aber gern die Gelegenheit, dein verfrüht abgeschicktes Posting noch zu ergänzen. </p> <p>Live long and <s>pros</s> healthy,<br>  Martin</p> <div class="signature">-- <br> Home is where my beer is. </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 18:19:04 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774444?srt=yes#m1774444 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774444?srt=yes#m1774444 <p>@@Rolf B</p> <blockquote> <blockquote> <p>Warum ist es denn besser das direkt im html-Quelltext einzubinden statt in einer separate .js-Datei?</p> </blockquote> <p>Weil eine separate .js Datei einen separaten Serverzugriff durchführt, und zwar in dem Moment, wo der Browser das <script src="..."></script> Element antrifft (andernfalls könnte das document.write nicht funktionieren).</p> </blockquote> <p>Ähm, <code>async</code>? <code>defer</code>?</p> <ul> <li><a href="https://javascript.info/script-async-defer" rel="nofollow noopener noreferrer">https://javascript.info/script-async-defer</a></li> <li><a href="https://bitsofco.de/async-vs-defer/" rel="nofollow noopener noreferrer">https://bitsofco.de/async-vs-defer/</a></li> </ul> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> <em>“Turn off CSS. If the page makes no sense, fix your markup.”</em> —fantasai </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 17:19:11 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774439?srt=yes#m1774439 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774439?srt=yes#m1774439 <p>Hallo Martin,</p> <p>argh. Postatio praecox, das arme Forum. Ich hatte kurz recherchieren wollen, ob HTTP/2 überall verfügbar ist, bin in den Varianten abgesoffen und hab dann irgendwann einfach gesendet. Hatten wir das Thema Vergesslichkeit nicht heute schon? </p> <p>Hab's einfach gelöscht...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 18:01:46 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774442?srt=yes#m1774442 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774442?srt=yes#m1774442 <p>Hi,</p> <blockquote> <ul> <li>Das <img> vor die Überschrift und dann mit der Margin-Axt die Überschrift zurechtzimmern sieht zwar irgendwie passend aus. Aber auch nur irgendwie. Nimm das img in die Überschrift hinein.</li> </ul> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h5</span> <span class="token attr-name"><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>icon_tix.png<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>Eintrittskarten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h5</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Aber nicht übertreiben - ins öffnende Tag der Überschrift gehört das img auch nicht rein ;-)</p> <p>cu,<br> Andreas a/k/a MudGuard</p> 3 Spalten im Footer responsive gestalten Tue, 11 Aug 20 10:00:24 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774458?srt=yes#m1774458 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774458?srt=yes#m1774458 <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> du bist eine Granate . Ich bin völlig begeistert was ich von dir alles dazulernen kann. Ich muss ja nochmal betonen, dass ich mir programmieren gerade erst neu und selbst beibringe.</p> <p>Der Sinn der Java-Einbindung direkt in der html-Datei ist mir nun etwas klarer. Die Icons mit in die Überschriften einzubeziehen finde ich eine super Lösung. Das wirkt gleich alles viel klarer und sauberer. Die Durchnummerierung der Überschriften passe ich später auf jeden Fall noch an.</p> <p>Zwischenzeitlich habe ich mir selber noch eine weitere Leiste unter meinen Footer gesetzt. Jetzt arbeite ich daran Text auf Bilder zu bekommen. Das klappt auch schon recht gut, nur geht die Navigationsleiste unter den Bildern hindurch statt weiterhin oben drüber zu fahren?? Das bringt mich zur Verzweiflung.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</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>textonpic<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>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>new_2020.jpg<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>Die Neuheiten 2020<span class="token punctuation">"</span></span> <span class="token attr-name">stlye</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-width: 100%<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>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>texttopleft<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>Neuheiten 2020<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>Die Hanse in Europa wächst und das Piratenmädchen Awilda zieht mit Familienfreifall und Wasserbahn in die Reiche des Nordens.<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>section</span><span class="token punctuation">></span></span> </code></pre> <pre><code class="block language-css"><span class="token selector">.textonpic</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.texttopleft</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #ffffff<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Hast du bzw. habt ihr für das Problem auch eine Lösung für mich?</p> <p>Ich bin mega dankbar für die ganze Unterstützung hier! Marcel</p> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 18:17:16 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774443?srt=yes#m1774443 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774443?srt=yes#m1774443 <p>Hallo MudGuard,</p> <p>grrr. Fixed.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Mon, 10 Aug 20 18:55:58 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774445?srt=yes#m1774445 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774445?srt=yes#m1774445 <p>Hallo Gunnar,</p> <blockquote> <p>Ähm, async? defer?</p> </blockquote> <p>generell: ja.</p> <p>Konkret: Um das Tagesdatum zu injizieren, würd' ich es doch eher inline tun statt dafür eine externe Ressource zu laden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Tue, 11 Aug 20 10:26:38 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774462?srt=yes#m1774462 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774462?srt=yes#m1774462 <p>Hallo Marcel,</p> <blockquote> <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> du bist eine Granate</p> </blockquote> <p>Das stimmt. Ich explodiere ziemlich schnell…</p> <blockquote> <p>nur geht die Navigationsleiste unter den Bildern hindurch</p> </blockquote> <p>Willkommen in der Welt der Stapel. Der Browser gliedert die HTML Elemente, die er anzeigen soll, in Stapelkontexte. Jeder Stapelkontext bildet eine Anzeigeebene. Welche Ebene unten oder oben ist, hängt am Wert der Eigenschaft z-index und…</p> <blockquote> <p>…aber die verwende ich doch gar nicht</p> </blockquote> <p>...<strong>und</strong> an der Reihenfolge im Dokument. Alle deine Stapelkontexte haben den z-index 0 (wenn ich keinen übersehen habe). Bei gleichem z-index werden die Kontexte in der Reihenfolge, wie sie im Dokument stehen, übereinander gelegt. Und darum liegt dein <code>textonpic</code> Section über der Navigation.</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context" rel="nofollow noopener noreferrer">Mozilla weiß was über die Regeln, nach denen Stapelkontexte erstellt werden</a>.</p> <p>Die Navigation ist sticky, bekommt also ebenfalls einen Stapelkontext. Darum reagiert sie auf z-index. Setze ihn auf 1, und das Problem ist weg. Ältere Desktop-Browser legen bei sticky allerdings <strong>keinen</strong> Stapelkontext an (z.B. IE11, der kennt sticky gar nicht), was Dir hier aber egal sein kann. Wenn sticky ignoriert wird, hast Du das Problem eh nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> 3 Spalten im Footer responsive gestalten Tue, 11 Aug 20 18:42:39 Z https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774488?srt=yes#m1774488 https://forum.selfhtml.org/self/2020/aug/01/3-spalten-im-footer-responsive-gestalten/1774488?srt=yes#m1774488 <p><a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> ist mir noch gar nicht aufgefallen, dass du so schnell hochgehst . Das Problem war ja nun wirklich schnell gelöst. Was mich ein wenig ärgert: als ich heute Nachmittag unterwegs war kam mir selber noch der Z-Index in den Kopf. Trotzdem super so. Danke nochmals. Ich garantiere während meines Projektes kommen bestimmt noch mehr Fragen auf </p>