Navicon positionieren – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Navicon positionieren Tue, 08 Mar 16 19:40:59 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662682#m1662682 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662682#m1662682 <p>Ich habe das Problem, daß ich das Navicon nicht in die rechte untere Seite bringe sondern es klebt einfach rechts mittig. Bei einem kleinem Monitor verschieben sich Überschrift und Navicon ineinander. Wahrscheinlich ist es wieder nur eine Kleinigkeit die ich übersehe.</p> <pre><code class="block language-html">header h1 { text-align: center; color: white; } #navlink { position: relative; display: block; color: red; text-align: right; padding-right: 10px; padding-bottom: -10px; margin-top: -75px; text-decoration: none; visibility: hidden; } <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>h1</span><span class="token punctuation">></span></span>Buntes Allerlei<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>a</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>navlink<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Zum Menü<span class="token punctuation">"</span></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>#mobilestart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>☰ Menü<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>header</span><span class="token punctuation">></span></span> </code></pre> <p>Wie bringe ich das Navicon in die rechte unterste Ecke ohne Einfluß auf die Überschrift?</p> <p><a href="http://members.aon.at/meine_private_seite/index.html" rel="nofollow noopener noreferrer">Link</a></p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Tue, 08 Mar 16 19:56:05 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662683#m1662683 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662683#m1662683 <p>Servus!</p> <blockquote> <p>Ich habe das Problem, daß ich das Navicon nicht in die rechte untere Seite bringe sondern es klebt einfach rechts mittig. Bei einem kleinem Monitor verschieben sich Überschrift und Navicon ineinander.</p> </blockquote> <p>Bei mir im Firefox sieht es gut aus. Erst ab weniger als 350px liegt es übereinander. Du kannst h1 bei kleinen Viewports mit text-align:left noch weiter links bringen. Ohne das Wort Menü nimmt das navicon noch weniger Platz ein.</p> <p>Deine Seite sieht gut aus, habe sie grad durch den Validator laufen lassen:</p> <p><a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fmembers.aon.at%2Fmeine_private_seite%2FRezepte%2FSuppen%2Fsuppen.html" rel="nofollow noopener noreferrer">https://validator.w3.org/nu/?doc=http%3A%2F%2Fmembers.aon.at%2Fmeine_private_seite%2FRezepte%2FSuppen%2Fsuppen.html</a></p> <p>einige Tipps:</p> <ul> <li> <p>Regel Abstände über margin und padding, nicht über <br></p> </li> <li> <p>Wenn schon <br>, aber nicht </br> (auf der Suppenseite)</p> </li> <li> <p>Innerhalb von ol und ul nur li-Elemente, <h1> kommt davor (auf der Suppenseite)</p> </li> <li> <p>Statt <div id="gesammt"> einfach <main></p> </li> <li> <p>Meinst du mit <abr> <abbr>?</p> </li> </ul> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun - packen wir's an: * <a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> * <a href="http://wiki.selfhtml.org/wiki/Spezial:Gew%C3%BCnschte_Seiten" rel="nofollow noopener noreferrer">gewünschte Seiten</a> </div> Navicon positionieren Wed, 09 Mar 16 20:23:58 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662777#m1662777 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662777#m1662777 <p>Inzwischen habe ich das auch mit dem Navicon erledigt.</p> <blockquote></blockquote> <p>Jetzt habe ich noch eine Frage zur Webseite. Nachdem ich ursprüngliche Fehler bereinigt habe bekomme ich vom Validator noch diese Meldungen:</p> <blockquote></blockquote> <p>Bei der Startseite: „Consider using the h1 element as a top-level heading only“ Soll man eine Sprungmarke nicht in ein Element wie h1 geben? Kann man so wie classen mehrere ids in eine Zeile packen.</p> <blockquote></blockquote> <p>Nachdem ich die Überschriften wie Mathias geraten hat aus den Listen herausgenommen habe, bekomme ich Trotzdem die Meldung bei „http://members.aon.at/meine_private_seite/Rezepte/Suppen/suppen.html“</p> <blockquote></blockquote> <p>„Consider using the h1 element as a top-level heading only“</p> <blockquote></blockquote> <p>Was denkt Ihr über Validome?</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Wed, 09 Mar 16 15:04:55 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662747#m1662747 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662747#m1662747 <blockquote> <p>Bei mir im Firefox sieht es gut aus. Erst ab weniger als 350px liegt es übereinander. Du kannst h1 bei kleinen Viewports mit text-align:left noch weiter links bringen. Ohne das Wort Menü nimmt das navicon noch weniger Platz ein.</p> </blockquote> <p>Nun, ich dachte es läßt sich doch irgendwie das Navicon isoliert vom Titel positionieren. Die drei Balken werden, denke ich, bereits allgemein bekannt sein, daß es sich um einen Navigatoraufruf handelt. Ich könnte daher „Menü“ weg lassen. Habe aber auch schon überlegt die Überschrift an den linken Rand zu schieben.<br> Bei <a href="http://www.viewportemulator.com/devices/" rel="nofollow noopener noreferrer">devices</a> steht „Native Resolution, Virtual Resolution“. Welche Angabe ist für Media Queries maßgebend?</p> <blockquote> <p>Deine Seite sieht gut aus, habe sie grad durch den Validator laufen lassen:</p> <p><a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fmembers.aon.at%2Fmeine_private_seite%2FRezepte%2FSuppen%2Fsuppen.html" rel="nofollow noopener noreferrer">https://validator.w3.org/nu/?doc=http%3A%2F%2Fmembers.aon.at%2Fmeine_private_seite%2FRezepte%2FSuppen%2Fsuppen.html</a></p> </blockquote> <p>So etwas zu hören freut einem. Habe mich bemüht die neue Materie so gut wie möglich anzuwenden.<br> Als Meldung bekomme ich noch: „Element br not allowed as child of element ul in this context.“<br> Wie mache ich eine Leerzeile zwischen zwei Listenelementen? Ich habe es so hingebracht:</p> <pre><code class="block language-html">span { visibility: hidden; } <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>Zeile 1<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>span</span><span class="token punctuation">></span></span>Leerzeile<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>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>Zeile 3<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>Zeile 4<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>Ist das die Methode?</p> <blockquote> <p>einige Tipps:</p> <ul> <li> <p>Regel Abstände über margin und padding, nicht über <br></p> </li> <li> <p>Wenn schon <br>, aber nicht </br> (auf der Suppenseite)</p> </li> </ul> </blockquote> <p>Habe ich inzwischen angepaßt. Wie die reingekommen sind, weiß ich nicht. Habe sonst die anderen alle normal geschrieben.</p> <blockquote> <ul> <li>Innerhalb von ol und ul nur li-Elemente, <h1> kommt davor (auf der Suppenseite)</li> </ul> </blockquote> <p>Habe ich geändert aber bekomme zwar keine Fehlermeldung aber eine Warnung.</p> <blockquote> <ul> <li> <p>Statt <div id="gesammt"> einfach <main></p> </li> <li> <p>Meinst du mit <abr> <abbr>?</p> </li> </ul> </blockquote> <p>Ja, wurde korrigiert. Rechtschreibfehler kommen halt auch hier vor. Da ich keine Beschwerde vom Computer bekommen habe ist es mir nicht aufgefallen.</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Wed, 09 Mar 16 15:14:33 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662748#m1662748 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662748#m1662748 <p>@@franzsen</p> <blockquote> <p>Bei <a href="http://www.viewportemulator.com/devices/" rel="nofollow noopener noreferrer">devices</a> steht „Native Resolution, Virtual Resolution“. Welche Angabe ist für Media Queries maßgebend?</p> </blockquote> <p>Wenn du diese Frage stellst, bist du immer noch <a href="https://forum.selfhtml.org/self/2016/feb/28/media-queries/1661993#m1661993" rel="noopener noreferrer">auf dem falschen Weg</a>.</p> <p>Für Media-Queries sollte <a href="http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/" rel="nofollow noopener noreferrer">der Inhalt maßgeblich</a> sein; nicht irgendwelche Geräte.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Navicon positionieren Wed, 09 Mar 16 18:10:53 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662764#m1662764 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662764#m1662764 <p>Hallo franzsen,</p> <blockquote> <p>Wie mache ich eine Leerzeile zwischen zwei Listenelementen? Ich habe es so hingebracht:</p> <pre><code class="block language-html">span { visibility: hidden; } <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>Zeile 1<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>span</span><span class="token punctuation">></span></span>Leerzeile<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>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>Zeile 3<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>Zeile 4<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>Ist das die Methode?</p> </blockquote> <p>Nein.</p> <p>Was ist der Grund für den Abstand?</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>Zeile 1<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Grund_des_Abstands<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zeile 3<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>Zeile 4<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> <pre><code class="block language-css"><span class="token selector">li.Grund_des_Abstands</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 punctuation">}</span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Navicon positionieren Wed, 09 Mar 16 17:52:31 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662762#m1662762 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662762#m1662762 <blockquote> <blockquote> <p>Bei <a href="http://www.viewportemulator.com/devices/" rel="nofollow noopener noreferrer">devices</a> steht „Native Resolution, Virtual Resolution“. Welche Angabe ist für Media Queries maßgebend?</p> </blockquote> <p>Wenn du diese Frage stellst, bist du immer noch <a href="https://forum.selfhtml.org/self/2016/feb/28/media-queries/1661993#m1661993" rel="noopener noreferrer">auf dem falschen Weg</a>.</p> </blockquote> <p>So falsch kann die Frage nicht sein. Bevor ich den Inhalt an das Gerät „anpassen kann“ muß ich ja vorher wissen welche Werte ich eingeben muß oder soll. 25em, 60em oder was? Natürlich könnte ich alles durchprobieren bzw. gleich mit dem Taschenrechner rechnen und 21em probieren. Wer Erfahrungswerte hat gibt gleich die richtigen Werte ein und erspart sich viel überflüssige Arbeit. Wie Mathias schreibt tritt das Problem erst ab „weniger als 350px“ auf. Das erklärt aber noch immer nicht den Unterschied zwischen Native- und Virtual Resolution.</p> <blockquote> <p>Für Media-Queries sollte <a href="http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/" rel="nofollow noopener noreferrer">der Inhalt maßgeblich</a> sein; nicht irgendwelche Geräte.</p> </blockquote> <p>Soweit ich das beurteilen kann, natürlich als Neuling, habe ich meine Webseite so ziemlich auf verschiedene Geräte gut abgedeckt, also den richtigen Weg eingehalten.<br> Wie Du richtigerweise sagst ist der Inhalt maßgebend. Aber, trotzdem bleibt die Reihenfolge @media screen and (...) und dann erst wird der Inhalt angepaßt. Ich sollte also vorher schon ungefähr wissen was ich in die runden Klammern eingebe, ab welchen Wert (Gerät) ich meine Webseite anpassen muß. Eine Webseite muß vielleicht mit 60em bereits angepaßt werden, eine andere genügt wenn ich sie erst ab 38em anpasse. Ich denke, einerseits ist der Inhalt abhängig vom Gerät, andererseits das Gerät vom Inhalt. Natürlich stehe ich nicht auf den Standpunkt, daß es die alleinige Wahrheit ist und mich irren kann.</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Wed, 09 Mar 16 18:05:00 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662763#m1662763 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662763#m1662763 <p>Hallo franzsen,</p> <blockquote> <p>Bevor ich den Inhalt an das Gerät „anpassen kann“ muß ich ja vorher wissen welche Werte ich eingeben muß oder soll. 25em, 60em oder was? Natürlich könnte ich alles durchprobieren bzw. gleich mit dem Taschenrechner rechnen und 21em probieren.</p> </blockquote> <p>Nö. Am besten, probierst - aber anders als du es beschreibst.</p> <p>Du stellst deine Seite im Browser dar und vergrößerst (mobile first) oder verkleinerst (desktop first) das Browserfenster, bis du den Eindruck hast, die Gestaltung ist nicht mehr passend. Dann lässt du dir von einem Entwicklertool die Größe des Browserfensters sagen und setzt ebenfalls im Entwicklertool die entsprechenden Breakpoints (in em).</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Navicon positionieren Wed, 09 Mar 16 18:39:23 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662767#m1662767 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662767#m1662767 <blockquote> <p>Hallo franzsen,</p> <blockquote> <p>Bevor ich den Inhalt an das Gerät „anpassen kann“ muß ich ja vorher wissen welche Werte ich eingeben muß oder soll. 25em, 60em oder was? Natürlich könnte ich alles durchprobieren bzw. gleich mit dem Taschenrechner rechnen und 21em probieren.</p> </blockquote> <p>Nö. Am besten, probierst - aber anders als du es beschreibst.</p> <p>Du stellst deine Seite im Browser dar und vergrößerst (mobile first) oder verkleinerst (desktop first) das Browserfenster, bis du den Eindruck hast, die Gestaltung ist nicht mehr passend. Dann lässt du dir von einem Entwicklertool die Größe des Browserfensters sagen und setzt ebenfalls im Entwicklertool die entsprechenden Breakpoints (in em).</p> </blockquote> <p>Nun, dann habe ich ja gar nicht so falsch gearbeitet. Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest, dann passe ich den Inhalt an. Mangels an passenden Geräten „desktop first“. Vielleicht war es Zufall, daß ich den richtigen Breackpoint gleich erwischt habe ab den meine Webseite Anpassungsbedarf hat. Gemessen habe ich mit einem digitalem Lineal. Mit dem Emulator konnte ich feststellen, daß alle Kategorien soweit berücksichtigt waren. Eine Änderung ergab sich erst durch das Navicon. Wäre also noch einen Breackpoint einbauen.</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Wed, 09 Mar 16 18:49:32 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662771#m1662771 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662771#m1662771 <p>Was ist der Grund für den Abstand?</p> <blockquote> <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>Zeile 1<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Grund_des_Abstands<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zeile 3<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>Zeile 4<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> <pre><code class="block language-css"><span class="token selector">li.Grund_des_Abstands</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 punctuation">}</span> </code></pre> </blockquote> <p>Wie Du bei der Startseite siehst, möchte ich die Links gruppieren. Erreichen wollte ich dies optisch mit Abständen.</p> <blockquote></blockquote> <p>Danke für Hilfe. Manchmal steht man bei den einfachsten Dingen daneben.</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Wed, 09 Mar 16 18:46:38 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662770#m1662770 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662770#m1662770 <p>Hallo franzsen,</p> <blockquote> <p>Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest, dann passe ich den Inhalt an.</p> </blockquote> <p>Nein, du stellst kein Gerät fest.</p> <blockquote> <p>Mangels an passenden Geräten „desktop first“.</p> </blockquote> <p>Wieso mangels Geräten? Desktop first bedeutet, dass du ausgehend von einem großen Viewport zu kleineren hinarbeitest.</p> <p>Mach das Browserfenster so lange schmaler, bis das Aussehen nicht mehr passt.</p> <blockquote> <p>Eine Änderung ergab sich erst durch das Navicon. Wäre also noch einen Breackpoint einbauen.</p> </blockquote> <p>Du kannst auch für einzelne Elemente viewportabhängige Eigenschaften vergeben.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Navicon positionieren Wed, 09 Mar 16 18:57:39 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662772#m1662772 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662772#m1662772 <p>@@franzsen</p> <blockquote> <p>Nun, dann habe ich ja gar nicht so falsch gearbeitet.</p> </blockquote> <p>Doch.</p> <blockquote> <p>Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest</p> </blockquote> <p>Solange „Gerät“ in deinem Gedankengang vorkommt, hast du falsch gearbeitet.</p> <blockquote> <p>Mangels an passenden Geräten „desktop first“.</p> </blockquote> <p>Schon wieder irgendwas mit „Geräten“. Im Übrigen ist „mobile first“ meist der bessere Ansatz.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Navicon positionieren Wed, 09 Mar 16 19:04:00 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662775#m1662775 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662775#m1662775 <blockquote> <p>Hallo franzsen,</p> <blockquote> <p>Durch Veränderung des Browserfenster stelle ich das betreffende Gerät fest, dann passe ich den Inhalt an.</p> </blockquote> <p>Nein, du stellst kein Gerät fest.</p> </blockquote> <p>Ja, vielleicht drücke ich mich falsch aus. Gerät steht halt in Hinterkopf noch immer für unterschiedliche Viewpoints. Gerät iPhone 5c bzw. iPad Air, etc.</p> <blockquote> <blockquote> <p>Mangels an passenden Geräten „desktop first“.</p> </blockquote> <p>Wieso mangels Geräten? Desktop first bedeutet, dass du ausgehend von einem großen Viewport zu kleineren hinarbeitest.</p> </blockquote> <p>Nun, wenn ich Besitzer eines Tablets oder Smartphones wäre könnte ich es direkt ansehen. Ich habe daher das Browserfenster (iMac 27") verändert. Im Prinzip meinte ich aber sicher das gleiche. Profis und Amateure haben halt doch eine unterschiedliche Ausdrucksweise.</p> <blockquote> <blockquote> <p>Eine Änderung ergab sich erst durch das Navicon. Wäre also noch einen Breackpoint einbauen.</p> </blockquote> <p>Du kannst auch für einzelne Elemente viewportabhängige Eigenschaften vergeben.</p> </blockquote> <p>Das habe ich vor.</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Wed, 09 Mar 16 20:22:53 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662776#m1662776 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662776#m1662776 <p>Hallo franzsen,</p> <blockquote> <p>Wie Du bei der Startseite siehst, möchte ich die Links gruppieren. Erreichen wollte ich dies optisch mit Abständen.</p> </blockquote> <p>Hab ich jetzt mal reingeschaut. Wenn fast jedes Element die Klasse "Abstand" hat, ist das ein untrügliches Zeichen dafür, dass die Klasse überflüssig ist. "Abstand" ist zudem ein präsentationsbezogener Klassenbezeichner. In Screenreadern gibt es keinen Abstand. "neue_gruppe" wäre ein besserer Bezeichner, wenn denn die entsprechenden Elemente gemeinsam eine Gruppe bilden. Dann wäre es vielleicht besser, die zusammengehörenden li-Elemente in eine eigenene Liste zu stecken.</p> <p>Deine Lösung könnte lauten:</p> <pre><code class="block language-css"><span class="token selector">nav > ul > li:not(:first-child)</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 punctuation">}</span> </code></pre> <p>oder besser</p> <pre><code class="block language-css"><span class="token selector">nav > ul > li</span> <span class="token punctuation">{</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>denn der letzte Abstand nach unten wird nicht stören, möglicherweise sogar gewünscht sein.</p> <p>Lesestoff:</p> <ul> <li><code>></code>: <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Kindselektor" rel="nofollow noopener noreferrer">wiki/Kindselektor</a></li> <li><code>:not</code>: <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/not" rel="nofollow noopener noreferrer">wiki/Pseudoklasse not</a></li> <li><code>:first-child</code>: <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/first-child" rel="nofollow noopener noreferrer">wiki/Pseudoklasse first-child</a></li> </ul> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Navicon positionieren Wed, 09 Mar 16 20:33:08 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662780#m1662780 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662780#m1662780 <p>Hi,</p> <blockquote> <p>Bei der Startseite: „Consider using the h1 element as a top-level heading only“</p> </blockquote> <p>also frei übersetzt etwa: Man sollte h1 nur einmal als oberste Überschriftenebene benutzen.<br> Vermutlich verwendest du mehrere h1-Überschriften auf deiner Seite. Das ist nicht verboten, gilt aber als schlechter Stil. Es ist eher üblich, nur eine einzige h1-Überschrift als Überschrift des gesamten Dokuments zu verwenden.</p> <blockquote> <p>Soll man eine Sprungmarke nicht in ein Element wie h1 geben?</p> </blockquote> <p>Nein. Du kannst eine Sprungmarke (sprich: eine ID, die als Sprungziel dienen kann) jedem beliebigen Element geben. Also auch Überschriften zweiter oder dritter Ebene.</p> <blockquote> <p>Kann man so wie classen mehrere ids in eine Zeile packen.</p> </blockquote> <p>Diese Frage ergibt keinen Sinn. Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen. (Übrigens schreibt mal "Klassen" im Deutschen mit 'K'.)</p> <blockquote> <p>Was denkt Ihr über Validome?</p> </blockquote> <p>Keine Ahnung. Sagt mir nichts.</p> <p>So long,<br>  Martin</p> Navicon positionieren Wed, 09 Mar 16 20:46:43 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662785#m1662785 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662785#m1662785 <p>Hallo franzsen,</p> <blockquote> <p>Was denkt Ihr über Validome?</p> </blockquote> <p>Validome ist ein Validator, der den Vorteil hat, deutschsprachige Meldungen zu liefern aber den Nachteil, dass da seit langer Zeit nichts mehr gemacht wurde. Die letzte Version ist vom 16.11.2010.</p> <p>Nimm den <a href="https://validator.nu/" rel="noopener noreferrer">nu-Validator</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini) </div> Navicon positionieren Thu, 10 Mar 16 04:54:34 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662802#m1662802 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662802#m1662802 <p>@@Der Martin</p> <blockquote> <blockquote> <p>Kann man so wie classen mehrere ids in eine Zeile packen.</p> </blockquote> <p>Diese Frage ergibt keinen Sinn.</p> </blockquote> <p>So abwegig finde ich die Frage gar nicht.</p> <blockquote> <p>Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen.</p> </blockquote> <p>Während letzteres selbstverständlich ist, ist es ersteres nicht unbedingt. Du hast ja auch mehrere IDs: die Personalausweisnummer, die Sozialversicherungsnummer, die Steuernummer, …</p> <p>Doch in HTML sind mehrere IDs für ein Element nicht vorgesehen.</p> <p>LLAP </p> <div class="signature">-- <br> „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“<br> „Hat auf dem Forum herumgelungert …“<br> (Wachen in Asterix 36: Der Papyrus des Cäsar) </div> Navicon positionieren Thu, 10 Mar 16 11:17:03 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662843#m1662843 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662843#m1662843 <blockquote> <p>Hi,</p> <blockquote> <p>Bei der Startseite: „Consider using the h1 element as a top-level heading only“</p> </blockquote> <p>also frei übersetzt etwa: Man sollte h1 nur einmal als oberste Überschriftenebene benutzen.<br> Vermutlich verwendest du mehrere h1-Überschriften auf deiner Seite. Das ist nicht verboten, gilt aber als schlechter Stil. Es ist eher üblich, nur eine einzige h1-Überschrift als Überschrift des gesamten Dokuments zu verwenden.</p> </blockquote> <p>Nach dem Ändern der zweiten Überschrift sind alle Fehlermeldungen weg; also auch die wegen der Sprungmarke. Manchmal sind es wirklich nur Kleinigkeiten.</p> <blockquote> <blockquote> <p>Kann man so wie classen mehrere ids in eine Zeile packen.</p> </blockquote> <p>Diese Frage ergibt keinen Sinn. Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen. (Übrigens schreibt mal "Klassen" im Deutschen mit 'K'.)</p> </blockquote> <p>Nun, da habe ich wahrscheinlich wieder mehr wie ein Amateur formuliert. Ich wußte, daß „id“ mehrfach im Dokument vorkommen kann, aber der Name einer id nur einmal. Nicht klar war mir ob pro Element nur eine id vergeben werden kann. Bei Klassen ist das ja anders (<p class="beispiel Hinweis">).</p> <div class="signature">-- <br> LG Franz </div> Navicon positionieren Thu, 10 Mar 16 11:23:19 Z https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662844#m1662844 https://forum.selfhtml.org/self/2016/mar/8/navicon-positionieren/1662844#m1662844 <p>Hallo,</p> <blockquote> <blockquote> <blockquote> <p>Bei der Startseite: „Consider using the h1 element as a top-level heading only“</p> </blockquote> <p>also frei übersetzt etwa: Man sollte h1 nur einmal als oberste Überschriftenebene benutzen.<br> Vermutlich verwendest du mehrere h1-Überschriften auf deiner Seite. Das ist nicht verboten, gilt aber als schlechter Stil. Es ist eher üblich, nur eine einzige h1-Überschrift als Überschrift des gesamten Dokuments zu verwenden.</p> </blockquote> <p>Nach dem Ändern der zweiten Überschrift sind alle Fehlermeldungen weg; also auch die wegen der Sprungmarke. Manchmal sind es wirklich nur Kleinigkeiten.</p> </blockquote> <p>zumal das ja gar keine <em>Fehler</em>meldung war, sondern nur ein Hinweis.</p> <blockquote> <blockquote> <blockquote> <p>Kann man so wie classen mehrere ids in eine Zeile packen.</p> </blockquote> <p>Diese Frage ergibt keinen Sinn. Ein Element kann nur eine einzige ID haben, und eine ID kann nur einmal im Dokument vorkommen. (Übrigens schreibt mal "Klassen" im Deutschen mit 'K'.)</p> </blockquote> <p>Nun, da habe ich wahrscheinlich wieder mehr wie ein Amateur formuliert. Ich wußte, daß „id“ mehrfach im Dokument vorkommen kann, ...</p> </blockquote> <p>Klar, theoretisch kann jedes Element eine ID haben. Aber eben nur eine.</p> <blockquote> <p>aber der Name einer id nur einmal. Nicht klar war mir ob pro Element nur eine id vergeben werden kann. Bei Klassen ist das ja anders (<p class="beispiel Hinweis">).</p> </blockquote> <p>Ja, der Einwand von Gunnar ist berechtigt; mehrere IDs pro Element wären wohl denkbar, sind aber nicht vorgesehen. Ich war übrigens vor allem deshalb verunsichert, weil ich nicht wusste, was du in diesem Zusammenhang mit "Zeile" meinst. Ich hab mal angenommen, du meintest "Element".</p> <p>So long,<br>  Martin</p>