tag:forum.selfhtml.org,2005:/self Die Media-Queries bringen mich zum Heulen... – SELFHTML-Forum 2022-03-04T08:11:38Z https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796703?srt=yes#m1796703 MichaelS https://www.kirche-und-wir.de 2022-02-27T18:28:48Z 2022-02-28T00:50:23Z Die Media-Queries bringen mich zum Heulen... <p>Hallo an Euch Alle! Wie schon geschrieben, bin ich erst seit Kurzem wieder daheim und habe die Website sofort wieder auf den "Schreibtisch" zurück bekommen, mit dem freundlichen Hinweis: Die Mobilansicht geht gar nicht ( stimmt!!!!!) und muss /sofort!/ neu gestaltet werden, weil wir ansonsten am 01.03. bei Google aus dem Ranking fallen und ich bin schuld daran. Zudem sei auf einem 10" Pad die Schrift so klein, dass einige Gemeindeglieder diese nicht lesen können, das 3-fache drop- down- Menü nervt und der ausdruckbare Gemeindebote im PDF- Format fehlt. Also habe ich mich seit Freitag mal ran gemacht und das Menü verändert und den Gemeindeboten eingebunden. Die Änderungen habe ich noch nicht auf den Server geladen- sind aber fertig! Dann wollte ich - mal eben schnell- die Mobilansicht ändern! Denkste...</p> <p>Was habe ich vor: Ich möchte 3 verschiedene Viewportgrößen ansprechen. 1. bis 600px; 2. von 600px bis 1370px und 3. von 1370px bis - open end.</p> <p>Um keine ellenlange und damit unübersichtliche .css- Datei zu bekommen, habe ich zuerst im HTML-Text ( zur Probe nur in der index.htm) drei .css Dateien eingebunden.</p> <pre><code class="block">**HTML** <head> ... <link rel="stylesheet" href="css/index_mobile.css"> <link rel="stylesheet" href="css/index_medium.css"> <link rel="stylesheet" href="css/index.css"> `<meta name="viewport" content="width=device-width, initial-scale=1.0"> ` </head> **CSS** mit je einer Angabe: @media (max-width: 600px) { @media (min-width: 600px) and (max-width: 1370px) { @media (min-width: 1370px) { </code></pre> <p>Ergebnis: Nur die index.css wird eingelesen und über alle Größen hinweg angezeigt.</p> <p>Könnt Ihr erkennen, wo mein Denkfehler liegt? In diesem Moment überlege ich gerade, ob ich nicht den Term:</p> <pre><code class="block"><meta name="viewport" content="width=device-width, initial-scale=1.0"> </code></pre> <p>vor die .css- Aufrufe platzieren müßte. Das probiere ich gleich mal aus. Ansonsten hoffe ich auf ein paar freundliche Ideen von Euch.</p> <p>Wenn alle Stränge reißen- dann mach ich "kurzen Prozess" und schreibe a) den Inhaltstext um (mit Grid - oder Flexmodell) oder b),ich schreibe eine "mobile-Version" als 2. Homepage und setze einfach einen Link: " hier gehts zur mobilen Version" auf die index.htm . Das Ganze dann auf einen anderen Server- und fertig bin ich... . Das ist saudoof- und ist ja nur doppelte Pflegearbeit- ich weiß... und evtl. wäre das Google-Ranking dann auch nicht mehr das, was es mal war. Ich sitze bereits gut 24 Stunden daran- und bin keinen einzigen Schritt weiter gekommen.</p> <p>Liebe Grüße von (einem frustrierten) Michael ( und dabei soll ich mich doch nicht aufregen... )</p> <p>P.s.: 1370px ist genau der Wert, wo der 2-spaltige Hauptinhalt der index.htm auf eine Spalte ( unschön) umgebrochen wird.</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796704?srt=yes#m1796704 Rolf B 2022-02-27T19:31:41Z 2022-02-28T00:50:23Z Die Media-Queries bringen mich zum Heulen... <p>Hallo MichaelS,</p> <p>die Responsivität deiner Seite hatte ich bisher noch nicht im Blick. Wenn Du 3 CSS Dateien einbettest und jede einen @media Block hat, sollten sie aber auch alle 3 geladen werden. Prüfe das in den Entwicklerwerkzeugen - im Inspektor (sind die <link> Elemente da) und im Netzwerk-Tab (wird die .css Datei geladen). Je nach Hoster hast Du ggf. veraltete Daten in einem Cache, eliminiere das zur Not durch einen Cache-Buster (hänge sowas wie ?bust=8234723 an die URL an, der Parametername ist frei wählbar, die Zahl ist ein Zufallswert, verändere den Wert um ein Neuladen zu erzwingen. Hintergrund: Caches beachten URL Parameter und cachen nur URLs mit komplett identischer URL, aber dem Webserver ist beim Laden der CSS Datei der Parameter egal).</p> <p>Kannst Du die Seite auf euren Server bringen - z.B. in ein test-Verzeichnis? Dann könnte man sich live anschauen, was da passiert.</p> <p>Es ist allerdings wenig sinnvoll, das komplette CSS für 3 Breiten vorzuhalten. Das meiste wird gleich sein. Baue die Seite deshalb für die minimale Breite auf (mobile first Ansatz) und füge dann CSS für breitere Viewports hinzu, die dann Dinge nebeneinander setzen oder vergrößeren.</p> <p>Gib deinem Body nicht width:100vw. Bei breiten Screens ist das unlesbar. Setze lediglich eine max-width von ca 60em - je nach Vorhandensein von Deko-Elementen auf der Seite kann man das noch etwas variieren. Mit margin:0 auto zentrierst Du den Inhalt dann horizontal; das hast Du schon drin. Ok.</p> <p>Eins stößt mir noch auf: Die font-size Angaben in vw. Die führen in der aktuellen Form dazu, dass auf kleinen Viewports die Schrift viel zu klein ist. Auf einem sehr breiten Bildschirm (und meiner ist 3840px breit!) dagegen ist sie viel zu riesig.</p> <p>Wir hatten das Thema Fontsize basierend auf Viewportbreite früher schon einmal, ich weiß allerdings nicht, ob im Zusammenhang mit Dir. Wenn ich in deinem Body aber <code>font-size: calc(0.8em + 0.6vw);</code> sehe, dann glaube ich, dass es für deine Seite war.</p> <p>Empfehlung: Vergib auf dem :root Element eine Basis-Fontsize. Wenn die basierend auf der Viewportbreite sein soll, dann so, dass es eine Minimal- und Maximalgröße gibt. Dazu kann man die clamp-Funktion verwenden. Die ist ist seit 2 Jahren in allen Browsern außer IE verfügbar, aber der interessiert nicht mehr. Ein älteres iPad, das nicht upgedated wurde, könnte aber schon betroffen sein. Diese Geräte ignoreren clamp und würden die Standardfontgröße des Gerätes verwenden, UND DAS IST OKAY SO.</p> <pre><code class="block language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>0.9rem<span class="token punctuation">,</span> 2vw<span class="token punctuation">,</span> 2rem<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das sind beispielhafte Werte, die Du für Dich prüfen solltest. Angegeben wird Minimum, flexibler Wert und Maximum. Das :root Element ist die höchste Ebene im Elementbaum, d.h. wenn nichts weiter festgelegt wird, gilt diese Angabe für alle. Wenn Du dann für Überschriften oder Textabschnitte andere Fontgrößen haben möchtest, setze sie in rem. Damit stehen sie in Relation zur Basisfontgröße und skalieren genau wie diese mit der Viewportbreite. Ich rate dazu, 1rem als Schriftgröße nicht zu sehr zu unterschreiten, vor allem, wenn Du ein älteres Publikum hast.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796710?srt=yes#m1796710 Auge 2022-02-27T22:03:52Z 2022-02-28T00:50:23Z Die Media-Queries bringen mich zum Heulen... <p>Hallo</p> <blockquote> <p>Wie schon geschrieben, bin ich erst seit Kurzem wieder daheim und habe die Website sofort wieder auf den "Schreibtisch" zurück bekommen, mit dem freundlichen Hinweis: Die Mobilansicht geht gar nicht ( stimmt!!!!!) und muss /sofort!/ neu gestaltet werden, weil wir ansonsten am 01.03. bei Google aus dem Ranking fallen …</p> </blockquote> <p>Wann ist man damit um die Ecke gekommen?</p> <blockquote> <p>… und ich bin schuld daran.</p> </blockquote> <p>Gab's da nicht 'was von Ratiop… ähhm im Vaterunser?</p> <hr> <p>Jetzt mal unabhängig davon, was man an Google nicht mögen kann oder verurteilenswert findet, wir reden hier doch von der Website einer kirchlichen Gemeinde, oder? Eine Gemeinde, die einen geografisch umrissenes Einzugsgebiet hat. Eine Gemeinde, die ihren Gliedern <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Informationen und eventuell Dienstleistungen bietet, die aber vermutlich nicht um neue Seelen wirbt, die nicht sowieso anderweitig über die Adresse der Website informiert werden könnten.</p> <p>Für jemand, der mit seiner Website ein undefiniertes Publikum erreichen will, ist das Google-Ranking hierzulande, aufgrund der marktbeherrschenden Stellung dieser Suchmaschine, essentiell. Aber bei einem eng umrissenen und auch anders erreichbaren und auf die Website aufmerksam gemacht werden könnenden Publikum halte ich das allein selig machende Google-Ranking für das sprichwörtliche Goldene Kalb.</p> <p>Abschläge im Google-Ranking hin oder her, aber auf der wievielten Ergebnisseite sollte eine Gemeinde bei der Suche nach „Kirchengemeinde in Kleinsiehstenich“ <sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> wohl zu finden sein? Es ist ja nun nicht so, dass es für <em>eine</em> Ortschaft beziehungsweise <em>ein</em> Gebiet in einer Stadt üblicherweise mehrere Gemeinden einer Konfession gäbe.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> 200 ist das neue 35. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Wehe, mir kommt jetzt einer mit „Höhö, er hat ‚Glied‘ gesagt.“ <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p>bei größeren und Großstädten mit dem Stadtteil als Ergänzung <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796714?srt=yes#m1796714 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-02-28T00:49:09Z 2022-02-28T06:30:52Z Die Media-Queries bringen mich zum Heulen... <p>@@MichaelS</p> <blockquote> <p>Um keine ellenlange und damit unübersichtliche .css- Datei zu bekommen, habe ich zuerst im HTML-Text ( zur Probe nur in der index.htm) drei .css Dateien eingebunden.</p> </blockquote> <p>Und was ist mit den bei allen Viewportgrößen gemeinsamen Dingen wie Hintergrund, Textfarbe, Schrift, …? Die wiederholst du jeweils? Keine gute Idee.</p> <p>Übrigens lassen sich mit Grid und Flexbox und <code>minmax</code>, <code>min</code>, <code>max</code>, <code>clamp</code> so manche Layouts auch ohne Breakpoints umsetzen. Beispiele: <a href="https://codepen.io/gunnarbittersmann/pen/abwzPJa?editors=0100" rel="noopener noreferrer">Bildergalerie</a>, <a href="https://codepen.io/gunnarbittersmann/pen/XWKvYNa?editors=0100" rel="noopener noreferrer">An die Freude</a></p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">)</span></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> 600px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1370px<span class="token punctuation">)</span></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> 1370px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> </code></pre> </blockquote> <p>Die Breakpoints sind falsch. Bei 600px breitem Viewport gilt sowohl der erste als auch der zweite Block; bei 1370px breitem Viewport gilt sowohl der zweite als auch der dritte Block.</p> <p>Oft ist es auch keine gute Idee, <em lang="en">stacked media queries</em> zu verwenden. ☞ <a href="http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/#mq-overlap-stack" rel="nofollow noopener noreferrer">overlapping vs. stacked</a></p> <p>Breakpoints sollten nie in <code class="bad">px</code>, sondern in <code class="good">em</code> angegeben werden. ☞ <a href="https://zellwk.com/blog/media-query-units/" rel="nofollow noopener noreferrer">PX, EM or REM Media Queries?</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796770?srt=yes#m1796770 Michael_K 2022-03-01T17:41:08Z 2022-03-01T17:41:08Z Die Media-Queries bringen mich zum Heulen... <p>Mal eine dumme Frage: Warum nutzt du nicht fertiges CSS Framework wie Bootstrap 5? Das kommt nun ohne jquery aus und so groß ist es nicht. Dafür kommt es aber mit einem Konzept, das von Anfang an auf responsive Design ausgelegt ist?</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796707?srt=yes#m1796707 MichaelS 2022-02-27T19:45:32Z 2022-02-28T00:50:24Z Die Media-Queries bringen mich zum Heulen... <p>Lieber Rolf, ganz, ganz herzlichen Dank! So wirds jetzt umgesetzt- von mir. Sorry, wenn ich Dir- und Anderen- mit meinem Anliegen den Sonntagabend störe. Ist nicht böse gemeint! Ich bin nur wirklich z.Z. zutiefst verunsichert, weil ich gar keinen " Anfasser" für das Problem zu greifen bekam.</p> <p>Mit "vw" ist das so eine Sache. Ich hatte irgendwo gelesen, daß dies die Rettung von allen Schriftskalierungsproblemen in Webseiten sein soll. Scheint doch vll. etwas zu euphorisch gedacht und geschrieben worden sein.</p> <p>Lange Rede- kurzer Sinn... ich mach mich ans Werk und berichte!</p> <p>Liebe Grüße von Michael</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796859?srt=yes#m1796859 Matthias Scharwies mscharwies@selfhtml.org 2022-03-03T08:31:17Z 2022-03-03T08:31:17Z Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...) <p>Servus!</p> <blockquote> <p>Es ist allerdings wenig sinnvoll, das komplette CSS für 3 Breiten vorzuhalten. Das meiste wird gleich sein. Baue die Seite deshalb für die minimale Breite auf (mobile first Ansatz) und füge dann CSS für breitere Viewports hinzu, die dann Dinge nebeneinander setzen oder vergrößeren.</p> </blockquote> <p>Ich bin ja grad an einem Stylesheet für's Wiki dran und vermisse eigentlich eine beispielhafte Gliederung im SELF-Wiki. Passender Ort wäre wohl hier:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Ausblick" rel="nofollow noopener noreferrer">CSS/Tutorials/Einstieg/Ausblick</a> (Die Seite hieß mal "Guter CSS-Stil")</li> </ul> <p>Auf die Schnelle gefunden habe ich: <a href="https://kulturbanause.de/blog/css-coding-guidelines-css-code-besser-schreiben-formatieren-und-organisieren/" rel="nofollow noopener noreferrer">CSS Coding Guidelines – CSS Code besser schreiben, formatieren und organisieren</a></p> <p>Ungefähr in der Mitte findet sich der Abschnitt „<strong>SMACSS</strong>“</p> <blockquote> <p>SMACSS (Gesprochen: »Smacks«) steht für »Scaleable and modern Architektur for CSS«. In erster Linie ist SMACSS eine Sammlung vom Hilfestellungen und Namenskonventionen zur Organisation von CSS-Projekten.</p> <p>Der CSS-Code wird dabei in folgende Bereiche untergliedert:</p> <ul> <li>Base <ul> <li>Elementares Styling von HTML-Elementen.</li> </ul> </li> <li>Layout <ul> <li>Unterteilung der Website in grobe Sinnabschnitte wie Header, Footer, Content etc.</li> </ul> </li> <li>Module <ul> <li>Wiederverwertbare Bereiche des Layouts – z. B. Boxen, Formulare, Slider etc.</li> </ul> </li> <li>State <ul> <li>Zustände von Elementen – z. B. .is-collapsed für Accordions.</li> </ul> </li> <li>Theme <ul> <li>Styling für eventuelle Themes, bei multimandantenfähigen Projekten.</li> </ul> </li> </ul> </blockquote> <p>Problem ist bei mir, dass ich viele Mediawiki-Einstelungen erst normalisieren muss, um sie dann entsprechend zu formatieren.</p> <p>Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?</p> <p>In einem typischen Layout würde ich im Layout als zweiten Unterpunkt die Media Queries für breitere Viewports (=Elemente nebeneinander) einfügen</p> <p>Das mit dem Theme würde ich doch in die einzelnen Bereiche integrieren und nicht in einen eigenen Punkt bringen. Ich habe viel davon schon in der Farbpalette am Anfang drin.</p> <p>Was haltet ihr davon?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796708?srt=yes#m1796708 Rolf B 2022-02-27T19:47:04Z 2022-02-28T00:50:24Z Die Media-Queries bringen mich zum Heulen... <p>Hallo MichaelS,</p> <blockquote> <p>Sorry, wenn ich Dir- und Anderen- mit meinem Anliegen den Sonntagabend störe.</p> </blockquote> <p>Quatsch. Wenn ich am Sonntagabend ins Forum schaue, bin ich doch selbst schuld, oder? Es ist ja nicht so, dass wir über einen Piepser alarmiert würden, wenn es ein neues Posting im Forum gibt. < >Eher solltest Du Dich dafür entschuldigen, dass Du für eine kirchliche Website den Heiligen Sonntag missachtest und daran arbeitest. Wenn das dein Pastor herausfindet </ ></p> <blockquote> <p>Schriftskalierungsproblemen</p> </blockquote> <p>Wenn man die Schrift denn skalieren möchte. Das ist ein Gimmick, dessen Nutzen man im Einzelfall sehr genau prüfen sollte.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796709?srt=yes#m1796709 MichaelS 2022-02-27T19:47:51Z 2022-02-28T00:50:24Z Die Media-Queries bringen mich zum Heulen... <p>OK,, Danke für den Hinweis!</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796711?srt=yes#m1796711 MichaelS 2022-02-27T22:24:32Z 2022-02-28T00:50:24Z Die Media-Queries bringen mich zum Heulen... <p>Lieber Rolf, liebe Foristen...</p> <p>bitte fragt nicht warum oder wieso- jetzt scheint es zumindest so, als könnte es funktionieren, wie ich es mir vorstelle.</p> <p>Ich habe mal einige wesentliche Seiten auf meinen Versuchsserver geladen. Verkleinert man - aus dem Vollbildmodus heraus- jetzt die Browser, wird zunächst die Desktopvariante der Seite angezeigt. ( Merkmal: Hintergrund Verlauf mit schräg verlaufenden Ortsnamen.)</p> <p>Ab einem festgelegten Punkt dann der nur im HTML formatierte HTML- Text. die dazugehörige CSS habe ich noch nicht neu erstellt und hochgeladen!</p> <p>Auf 7" Tablet und kleiner, verkleinert, dann das pinke Kreuz mit abgeschnittenem Inhaltsfenster.</p> <p>Da ich die von Rolf mit erstellte "Desktopvariante" über alles schätze, bleibt die wie sie ist. Also muss ich die Mobil- und Mediumvariante nachträglich bauen. Das sollte nunmehr hoffentlich kein unlösbares Problem für mich darstellen.</p> <p>Der Versuchsserver ist erreichbar unter:</p> <p><a href="http://michaelschedler.bplaced.net?bust=1" rel="nofollow noopener noreferrer">http://michaelschedler.bplaced.net?bust=1</a></p> <p>(Edit Rolf B: URL zum Link gemacht)</p> <p>Dir, Rolf, nochmals ganz besonders einen herzlichen Dank! Auch für die ?bust= Sache. Wo und wie lernt man das? Die ganze Fülle an Informationen zu HTML,CSS, PHP, JavaScript u.v.m. wie kann man sich das alles nur merken? Ich habe schon mit der Programmierung meines Arduino zu kämpfen- und das ist ganz gewiss für Viele keine Kunst und kein Problem!</p> <p>Herzlichsten Dank sagt Michael</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796732?srt=yes#m1796732 MichaelS 2022-03-01T00:35:20Z 2022-03-01T00:35:20Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Auge!</p> <p>Danke für Deine Nachricht. "Um die Ecke" ist das bei einem Telephonat ( Ich war noch etwas "outside" gestellt)so um den 15...17.02. Da wurde mir gesagt, daß die Änderungen absolut notwendig und unaufschiebbar wären. Das war eine Person, die in einem Werbestudio als Grafik- und Webdesigner arbeitet, aber leider wegen Überarbeitung kein Ansprechpartner für mich sein will in Sachen Website. Dann habe ich meine KollegeInnen informiert- ich brauche ja das OK zu Veränderungen an der Seite. Danach ging das am 19.02. los mit der Überlegung, was das Ziel sein soll und welche Schritte ich dafür zu durchlaufen habe.</p> <p>Allerdings, mit der Schuld... ja, ich habe es gewusst, daß die Seite nicht auf meinem Handy nutzbar ist. Aber, ehrlich... ich habe es einfach laufen lassen, obwohl mich auch einige wenige Gemeindeglieder daraufhin angesprochen haben.</p> <p>Ich habe dann geduckt und habe tatsächlich die Bestätigung im Netz gefunden, dass Google da etwas in dem Crawler- Programm zum 01.03. umstellt.</p> <p>In einer wesentlich früheren Website für eine andere Gemeinde habe ich die Website auf Platz 1 im Ranking gebracht, was angesichts der touristischen Bedeutung auch wichtig war.</p> <p>Ob es bei dieser Seite absolut so wichtig ist, ist Ansichtssache. Manche sehen es als ein MUSS an, auf der ersten Google-Seite zu finden sein, Anderen ist es einfach nur egal. Z.Z. finde ich uns ( bei Duckduckgo) an 2. Stelle und dann mehrfach.</p> <p>Das ist eine psychologische Einstellung. Vielleicht hast Du schon mal etwas Code weitergegeben und versehentlich einen Punkt vergessen. Kein Problem- für 99,998% der Menschheit, denn irren ist menschlich. Nur die 0,002% eröffnen alle Schleusentore, daß es nur so tobt. Und die können dann richtig Rabatz machen, wie wir ja bei Herrn Putin erleben müssen. Die Kunst ist ja - für mich- nicht, die Seite www.ich-weis-nichts.de zu platzieren. Doch, wer gibt das bei einer Suche schon ein. Gesucht wird immer nach konkreten Inhalten. Also z.B.: " Css background-radient". Da möchte SelfHTML gewiss nicht auf Seite 21 zu finden sein.</p> <p>Gruß von MichaelS</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796712?srt=yes#m1796712 Rolf B 2022-02-27T22:28:57Z 2022-02-28T00:50:24Z Die Media-Queries bringen mich zum Heulen... <p>Hallo MichaelS,</p> <blockquote> <p>Wo und wie lernt man das?</p> </blockquote> <p>Wo? Unter anderem hier. Und in den Weiten des Netz, mit viel Hilfe von Tante Google und Onkel Bing.</p> <p>Wie? Unter großen Schmerzen und mit viel Zeitaufwand. Indem man das Thema seit 20 Jahren betreibt, mal intensiv, mal extensiv, und dann geht's einem wie den Jüngern - so blöd sie sich auch immer wieder anstellten, etwas blieb doch hängen. Und das teilt man dann gerne.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796713?srt=yes#m1796713 MichaelS 2022-02-28T00:05:39Z 2022-02-28T00:50:24Z Die Media-Queries bringen mich zum Heulen... <p>Hallo,</p> <p>Rolf schrieb: < >Eher solltest Du Dich dafür entschuldigen, dass Du für eine kirchliche Website den Heiligen Sonntag missachtest und daran arbeitest. Wenn das dein Pastor herausfindet </ ></p> <p>Ich verrate es ihm ja nicht !!!!!! </p> <p>So, ich habe jetzt die ganze Sache hinbekommen. Ursache des Ganzen war ein "and". Im Netz ( https://www.mediaevent.de/css/media-queries.html ) war das so beschrieben: <code>@media only screen and (min-width:600px) (max-width:920px){</code></p> <p>Ich habe das gelesen und erst jetzt ist mir aufgefallen, dass sich der Beitrag gar nicht auf externe CSS- Dateien bezieht, sondern auf die von Dir vorgeschlagene Variante. Jedenfalls habe ich zwischen der Min. und der Max.- Angabe ein "and" eingefügt- und bums... es funktioniert.</p> <p>Ich habe es auf http://michaelschedler.bplaced.net jetzt vollständig hochgeladen. Man beachte die Schriftfarbe von: Evang. Kirche im Süden Anhalts, die von Lila zu rot wechselt.</p> <p>So, jetzt ist Schluss für heute !</p> <p>Gute Nacht und Dank von Michael</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796716?srt=yes#m1796716 Rolf B 2022-02-28T11:52:12Z 2022-02-28T11:52:12Z Die Media-Queries bringen mich zum Heulen... <p>Hallo MichaelS,</p> <p>wenn ich mir das so anschaue, wird eine Smartphone-Ansicht deiner Seite schwierig. Typischerweise verwendet man dann aufklappende Menüs, und die sind bekanntlich ohne JavaScript kaum bedienbar lösbar. Höchtens mit dem <details> Element. Aber dann besteht noch das Problem, dass Du zwei Navigationen hast, eine im Kreuzbalken und eine im Stamm; wie man die in der Mobilansicht gut darstellt ohne zuviel Platz für Inhalt zu vergeuden ist mir noch nicht recht klar.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796733?srt=yes#m1796733 MichaelS 2022-03-01T01:05:55Z 2022-03-01T01:05:55Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Gunnar,</p> <p>es ist schon wieder etwas früh geworden und ich muss in ein paar Stunden wieder loslegen. Daher nur ganz kurz.</p> <p>Ich habe mir erlaubt, Deine Vorlage bei "codepen.io" mal zu verändern- und zwar habe ich Dein Menü in ein schnell gebasteltes Flex-Item, also in eine Flexbox gepackt. Flexbox mit 2 Items bei 2 Spalten in die 1. Spalte (5em breit) habe ich einen ewiglangen Text hineinkopiert. in der Zelle der 2. Spalte dann Dein Entwurf. Fazit: Ein Umbruch unter den langen Text. OK, das hätte ich durch ändern der Spaltenbreite hier ändern können, aber, wenn die Spalte farblich gestaltet ist, läuft die ins unendliche, bzw. ich habe keine Ahnung, wie ich das unterbinden könnte. Genau dies ist auf meiner Seite mit der Klasse "stamm" das Problem.</p> <p>Ich habe, nicht zuletzt auch auf Hinweis und Rat von Rolf versucht, in einer css- Datei alles zu organisieren. Am Ende fand ich mich selber nicht mehr durch. Da wurde was eingeschaltet und ausgeschaltet, neu strukturiert... . Zu jeder Zeit muss ich wissen- und erkennen, was ich wie und warum gemacht habe. Es nützt ja nichts, wenn ich in 2 Monaten ratlos vor der Seite stehe und keinen Schimmer habe, wie ich das zum Laufen gebracht habe. Daher bin ich auch etwas vorsichtig, blind JS einzusetzen, was ich nicht gut nachvollziehen kann. Einfach, logisch, nachvollziehbar muss es sein.</p> <p>Ich habe jetzt nicht die hochgeladene Datei "index_medium.css" kontrolliert, aber auf meinem Rechner ist in dieser Datei vermerkt: @media only screen and (min-width:601px) and (max-width:1439px){</p> <p>Ich glaube, daß gleiche Größenangaben in verschiedenen Dateien gestern zu Problemen geführt haben. Bin mir aber nicht mehr sicher. Das mit px. und em. an dieser Stelle kannte ich noch nicht. Danke: Wieder etwas dazugelernt.</p> <p>Die mobile Ansicht wird ganz einfach gestaltet. Keine großen Farbspielereien Einfach nur Überschrift, dann das Menü als eine Spalte über den Viewport und 5- 6 rows. Dann kommt schon der <main> Teil dran, also die wechselnden Inhalte. Im bereits angelegten Footer dann ein Link zu den Pfarrbereichen. Das wars. Also kurz, knapp und bündig.</p> <p>Gruß von MichaelS</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796729?srt=yes#m1796729 MichaelS 2022-02-28T21:26:56Z 2022-02-28T21:28:40Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Rolf, Ich bin gerade dran... Ich denke, ich werde im Menü ( HTML noch einige Klassen (.sichtbar, . unsichtbar und .box) einfügen, um einen kleinen Button ( keinen Hamburger) als "Menü", zu erstellen, der das Menü ausplappt. Die Box, bzw. das Menü kann ich mit :target ansprechen.</p> <pre><code class="block">.menue(:target) .inhalt, .menue:not(:target) .unsichtbar, .menue:target .sichtbar { display: none; } .menue:target .box {display: block; } .box { /* box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); */ padding: 20px 20px 1px; /* Innenabstand des Menüs */ margin: 30px 100px 10px; /* Aussenabstand des Menüs */ } .sichtbar, .unsichtbar { padding:10px; background: rgb(254, 164, 0); box-shadow:none!important; color:#fff; font-weight:bold; } .sichtbar:hover, .unsichtbar:hover { background: rgb(255, 214, 118); color:#fff!important; transition:0.2s all ease-in-out!important; } Quelltext hier </code></pre> <p>Das Menü besteht einfach aus 5o. 6 rows einer Flexbox.</p> <p>Alles Weitere blende ich mit display: none; aus und nehme dann nur die Inhalte aus <main> auf. Ohne viel Bramborium untereinander und mit Anstand- äh nein... Abstand! Ganz unten dann ( im bereits angelegten footer) ein Link zu den Gemeindeseiten. Dieser Link wird in den anderen CSS- Dateien dann wieder gesperrt.</p> <p>Keine Ahnung ob das funktioniert, aber so ist der Plan.</p> <p>Gruß von Michael</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796730?srt=yes#m1796730 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-02-28T22:08:03Z 2022-02-28T22:08:03Z Die Media-Queries bringen mich zum Heulen... <p>@@MichaelS</p> <blockquote> <p>um einen kleinen Button ( keinen Hamburger) als "Menü", zu erstellen, der das Menü ausplappt. Die Box, bzw. das Menü kann ich mit :target ansprechen. […]<br> Keine Ahnung ob das funktioniert</p> </blockquote> <p>Rolf sagte doch schon, dass das nicht funktioniert. <em>„aufklappende Menüs, und die sind bekanntlich ohne JavaScript kaum bedienbar lösbar.“</em></p> <blockquote> <p>aber so ist der Plan.</p> </blockquote> <p>Kein guter Plan.</p> <p>Besserer Plan: <a href="https://codepen.io/gunnarbittersmann/pen/jYaRJM" rel="noopener noreferrer">responsives Menü</a>. Mit <code>button</code> <em>innerhalb(!)</em> des <code>nav</code>-Elements.</p> <p>Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: <code>display: none</code>; und auch nicht im <em lang="en">accessibility tree</em>, d.h. nicht bei Tastatur erreichbar.</p> <p>Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein <code>aria-expanded</code>-Attribut zwischen <code>"true"</code> und <code>"false"</code> um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.</p> <p>Das Menü verschwindet per <code class="language-css"><span class="token selector">[aria-expanded="false"] + ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none <span class="token punctuation">}</span></code> (prinzipiell; im verlinkten Codepen ist es geringfügig anders gemacht).</p> <p>Weiterhin muss man dafür sorgen, dass das Menü beim Drücken der Esc-Taste schließt.</p> <p>Wenn das Menü nicht wie in diesem Beispiel den Seiteninhalt nach unten schiebt, sondern sich über ihn legt, muss außerdem noch dafür gesorgt werden, dass sich das Menü schließt, wenn mit der Maus außerhalb geclickt wird oder bei Tastatursteuerung der Fokus aus dem Menü herauswandert.</p> <p>Bin zufällig gerade wieder dabei, ein solches Menü umzusetzten …</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796736?srt=yes#m1796736 Rolf B 2022-03-01T07:43:39Z 2022-03-01T07:43:39Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Gunnar,</p> <blockquote> <p>Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.</p> </blockquote> <blockquote> <p>Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein aria-expanded-Attribut zwischen "true" und "false" um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.</p> </blockquote> <p>Das Problem ist hier, dass es zwei Navigationen gibt: im Kreuzbalken und im Stamm. Ich bin seit gestern nachmittag am Basteln, wie man das am besten lösen könnte, und verwende dafür Code-Teile aus einem <a href="https://codepen.io/gunnarbittersmann/pen/jYaRJM" rel="noopener noreferrer">Pen</a> von Dir. Ist das okay?</p> <p>Was ich nicht verstanden habe, ist die Anforderung, dass der Button im nav liegen muss. Ist das für die Bedienbarkeit zwingend? Das macht die Layoutsteuerung deutlich komplizierter.</p> <p>Und im Fall von Michael gibt's zwei Navis - da entsteht die Frage, in welche der Button gehört.</p> <p>Mein Plan ist zur Zeit, im Narrow Viewport das Kreuz-Layout wegzulassen, die beiden Navis nebeneinander zu platzieren und einen Aufklappbutton einzublenden. Ich bin nur gestern nicht so weit gekommen, etwas vorzeigen zu können, und heute muss ich wieder arbeiten. Die Herausforderung ist, das ganze HTML so zu gestalten, dass man im Wide Viewport das Kreuz-Layout (mit Navi in Balken und Stamm) rein per CSS herstellen kann.</p> <p>Nein, ich halte dein Bier nicht dafür </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796749?srt=yes#m1796749 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-03-01T09:40:44Z 2022-03-01T09:40:44Z Die Media-Queries bringen mich zum Heulen... <p>@@Gunnar Bittersmann</p> <blockquote> <p>Bin zufällig gerade wieder dabei, ein solches Menü umzusetzten …</p> </blockquote> <p>Nö, doch nicht. Abgewimmelt.</p> <p>In dem Fall ist das Menü so klein (4 Punkte), dass ein Verstecken hinter Hamburger-Icon nicht sinnvoll ist. Das kann man auch auf kleinen Viewports immer anzeigen.</p> <p>Ein kurzes Gespräch mit der Grafikerin kann einigen Entwicklungsaufwand sparen. Gut, wenn man nicht <a href="https://noti.st/gunnarbittersmann/JyNmig/responsive-mindset#sxPHZGy" rel="nofollow noopener noreferrer">Wasserfall-Entwicklung</a> macht. Nicht Nacheinanderarbeit, sondern <a href="https://noti.st/gunnarbittersmann/JyNmig/responsive-mindset#sfJcOXO" rel="nofollow noopener noreferrer">Zusammenarbeit</a> ist angesagt.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796751?srt=yes#m1796751 Auge 2022-03-01T10:54:39Z 2022-03-01T10:54:39Z Die Media-Queries bringen mich zum Heulen... <p>Hallo</p> <blockquote> <p>Hallo Auge!</p> <p>Danke für Deine Nachricht. "Um die Ecke" ist das bei einem Telephonat ( Ich war noch etwas "outside" gestellt)so um den 15...17.02.</p> </blockquote> <p>Ok, also nicht erst vorgestern oder gestern. So wirkte das nämlich auf mich und das hielte ich für überaus kurzfristig.</p> <blockquote> <p>In einer wesentlich früheren Website für eine andere Gemeinde habe ich die Website auf Platz 1 im Ranking gebracht, was angesichts der touristischen Bedeutung auch wichtig war.</p> <p>Ob es bei dieser Seite absolut so wichtig ist, ist Ansichtssache.</p> </blockquote> <p>Wie gesagt, es gibt gute Gründe, eine Seite möglichst gut in den Suchergebnissen platzieren zu wollen. Es gilt aber eben nicht in jedem</p> <blockquote> <p>Manche sehen es als ein MUSS an, auf der ersten Google-Seite zu finden sein, Anderen ist es einfach nur egal. Z.Z. finde ich uns ( bei Duckduckgo) an 2. Stelle und dann mehrfach. Fall.</p> </blockquote> <p>Ja, das Verlangen, auf Seite 1 zu stehen, ist groß, aber da ist auch nur begrenzt Platz. Egal, wie sehr man quengelt, abseits von Lazy Loading gibt es auf einer Suchergebnisseite halt nur 10 oder 20 Ergebnisse. Und die Betreiber dieser Angebote sind halt auch dran interessiert, dort zu stehen. Das ist wie mit dem Highlander, von dem es nur einen (oder eben 10 oder 20) geben kann oder der recht freien Umschreibung des archimedischen Prinzips, die da sagt, wo ein Körper ist, könne kein anderer sein.</p> <blockquote> <p>Das ist eine psychologische Einstellung. Vielleicht hast Du schon mal etwas Code weitergegeben und versehentlich einen Punkt vergessen. Kein Problem- für 99,998% der Menschheit, denn irren ist menschlich. Nur die 0,002% eröffnen alle Schleusentore, daß es nur so tobt. Und die können dann richtig Rabatz machen …</p> </blockquote> <p>Ja klar, das sind die Gleichen, die früher™️ mit <em>ihrem</em> Browser mit dessen Konfiguration auf <em>ihrem</em> Gerät die neue Website geprüft und alles moniert haben, was bei ihnen nicht wie gewünscht aussieht und funktioniert, obwohl es allerlei gute Gründe gegeben haben mag, es so zu gestalten, damit es <em>bei anderen</em> überhaupt funktioniert.</p> <p>Und von wegen „früher“, das mag heute nicht anders sein, aber ich bin nicht mehr in der Situation, <em>das</em> beurteilen zu können.</p> <blockquote> <p>Die Kunst ist ja - für mich- nicht, die Seite www.ich-weis-nichts.de zu platzieren. Doch, wer gibt das bei einer Suche schon ein.</p> </blockquote> <p>Üblicherweise die Auftraggeber für die Erstellung der Seite und jene tatsächlich vielen Leute, die die Suchmaske des Suchmaschinenbetreibers ihrer Wahl als Adresszeile benutzen.</p> <blockquote> <p>Gesucht wird immer nach konkreten Inhalten. …</p> </blockquote> <p>… mit den oben genannten Abstríchen …</p> <blockquote> <p>… Also z.B.: " Css background-radient". Da möchte SelfHTML gewiss nicht auf Seite 21 zu finden sein.</p> </blockquote> <p>Natürlich nicht. Und wie gesagt, eine möglichst gute Positionierung in Suchergebnissen anzustreben, ist nicht verurteilenswert. Aber es ist einerseits nicht für jeden Platz auf Seite eins und andererseits sollte die Platzierung in den Suchergebnissen, natürlich abhängig von der Art des Abgebots, nicht wie der heilige Gral behandelt werden. Wenn ich meinem Publikum, das an meinen Diensten interessiert sein könnte, die Seite anderweitig ans Herz legen kann<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup>, sollte man auch nicht <em>alle</em> Energie auf eine Platzierung auf Seite eins der Suchergebnisse verschwenden.</p> <p>So, genug der religiösen Anspielungen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> 200 ist das neue 35. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>in einer Kirchengemeinde kann man das <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796738?srt=yes#m1796738 Rolf B 2022-03-01T08:10:10Z 2022-03-01T08:10:10Z Die Media-Queries bringen mich zum Heulen... <p>Hallo MichaelS,</p> <blockquote> <p>Daher bin ich auch etwas vorsichtig, blind JS einzusetzen, was ich nicht gut nachvollziehen kann. Einfach, logisch, nachvollziehbar muss es sein.</p> </blockquote> <p>Ja schon. Aber ein wirklich bedienbares Dropdown-Menü bekommst Du ohne Script nicht hin. Wenn es nur eine Navigation gäbe, dann könnte man das mit einem details-Element lösen. Aber Du hast zwei.</p> <p>Ich bastele gerade mit display:contents für ein details-Element, das scheint vielversprechend.</p> <blockquote> <p>Die mobile Ansicht wird ganz einfach gestaltet. Keine großen Farbspielereien Einfach nur Überschrift, dann das Menü als eine Spalte über den Viewport und 5- 6 rows.</p> </blockquote> <p>Ich bin gespannt, wie Du das mit den beiden Navis löst.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796737?srt=yes#m1796737 JürgenB https://www.j-berkemeier.de 2022-03-01T08:02:41Z 2022-03-01T08:02:41Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Rolf, hallo Gunnar,</p> <blockquote> <p>Was ich nicht verstanden habe, ist die Anforderung, dass der Button im nav liegen muss. Ist das für die Bedienbarkeit zwingend? Das macht die Layoutsteuerung deutlich komplizierter.</p> </blockquote> <p>und was ich immer noch nicht verstanden habe, warum ein Buton mit Aria-Attributen, warum kein Details/Summary?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796739?srt=yes#m1796739 Matthias Scharwies mscharwies@selfhtml.org 2022-03-01T08:10:51Z 2022-03-01T08:10:51Z Die Media-Queries bringen mich zum Heulen... <p>Servus!</p> <blockquote> <p>Hallo Gunnar,</p> <blockquote> <p>Bei großem Viewport ist das Menü permanent sichtbar und der Button nicht sichtbar: display: none; und auch nicht im accessibility tree, d.h. nicht bei Tastatur erreichbar.</p> </blockquote> <blockquote> <p>Bei kleinem Viewport ist der Button sichtbar und schaltet bei jedem Click sein aria-expanded-Attribut zwischen "true" und "false" um, was anzeigt (d.h. im Screereader ansagt), ob das Menü ausgeklappt ist oder nicht.</p> </blockquote> <p>Das Problem ist hier, dass es zwei Navigationen gibt: im Kreuzbalken und im Stamm.</p> </blockquote> <p>Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.</p> <ul> <li>Wer wir sind <ul> <li>PFARRBEREICH GÖRZIG</li> <li>PFARRBEREICH WEISSANDT-GÖLZAU</li> <li>...</li> </ul> </li> <li>Was wir tun <ul> <li>Gottesdienste</li> <li>Gemeindeleben</li> <li>Rückblicke</li> </ul> </li> <li>Kontakt <ul> <li>Impressum</li> <li>Datenschutz</li> </ul> </li> </ul> <blockquote> <p>Die Herausforderung ist, das ganze HTML so zu gestalten, dass man im Wide Viewport das Kreuz-Layout (mit Navi in Balken und Stamm) rein per CSS herstellen kann.</p> </blockquote> <p>Ich würde den horizontalen Balken (ohne Inhalt) als Pseudoelement zum header packen. Der lila Stamm wäre die Navigation, die sich bei breiten Viewports etwas nach rechts schiebt.</p> <blockquote></blockquote> <p>Im Mobilmodus müsste sie sich natürlich über die ganze Breite erstrecken.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796740?srt=yes#m1796740 Rolf B 2022-03-01T08:12:38Z 2022-03-01T08:12:38Z Die Media-Queries bringen mich zum Heulen... <p>Hallo JürgenB,</p> <p>die Platzierbarkeit des Menübuttons relativ zum Menü könnte dann eingeschränkt sein, aber ich bastele gerade mit display:contents auf dem details-Element und damit wird es sehr interessant.</p> <p>Außer für die armen Socken, die vom zombIE verfolgt werden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796743?srt=yes#m1796743 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-03-01T08:23:52Z 2022-03-01T08:23:52Z Die Media-Queries bringen mich zum Heulen... <p>@@JürgenB</p> <blockquote> <p>und was ich immer noch nicht verstanden habe, warum ein Buton mit Aria-Attributen, warum kein Details/Summary?</p> </blockquote> <p>Ich glaube, die Unterstützung in AT ist noch nicht so dolle.</p> <p>Außerdem bin ich mir nicht sicher, ob ein Screenreader die Elemente auch ihrer Funktion entsprechend verständlich ansagt.</p> <p>Und wie willst du es anstellen, dass das Menü bei breitem Viewport immer offen ist und kein Hamburger-Icon zu sehen ist?</p> <p>S.a. <a href="https://forum.selfhtml.org/self/2017/jul/21/css-kniffliges-zum-wochenende/1699724#m1699724" rel="noopener noreferrer">CSS-Kniffliges zum Wochenende</a></p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796741?srt=yes#m1796741 Rolf B 2022-03-01T08:14:50Z 2022-03-01T08:14:50Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Matthias,</p> <blockquote> <p>Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.</p> </blockquote> <p>Das habe ich auch schon überlegt, aber mir kommt das wie eine persönliche Niederlage im Kampf gegen den Browser vor. Das Wide Layout hat eine Navi im Stamm und eine im Balken. Und nur, weil man das mit CSS nicht mobiltauglich umschalten kann, soll man die ganze Navi umbauen? Hmpf!</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796742?srt=yes#m1796742 Matthias Scharwies mscharwies@selfhtml.org 2022-03-01T08:19:15Z 2022-03-01T08:19:15Z Die Media-Queries bringen mich zum Heulen... <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <blockquote> <p>Es gibt nicht so viele Unterseiten - weswegen ich beide zu einer - evtl. sogar ohne Dropdown zusammmenfassen würde.</p> </blockquote> <p>Das habe ich auch schon überlegt, aber mir kommt das wie eine persönliche Niederlage im Kampf gegen den Browser vor. Das Wide Layout hat eine Navi im Stamm und eine im Balken. Und nur, weil man das mit CSS nicht mobiltauglich umschalten kann, soll man die ganze Navi umbauen? Hmpf!</p> </blockquote> <p>Nein, bei den fertigen Layouts gab's schon so einen Fall mit 2 Navigationen: <a href="https://wiki.selfhtml.org/wiki/CSS/fertige_Layouts/Design09" rel="nofollow noopener noreferrer">CSS/fertige_Layouts/Design09</a>. Da wusste/weiß man ja nicht, was dahinter steckt.</p> <p>Hier geht es wie bei einer Schule darum, die einzelnen Unterseiten passend zu gruppieren, damit Inhalte schnell gefunden werden.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796746?srt=yes#m1796746 Rolf B 2022-03-01T08:40:16Z 2022-03-01T08:40:16Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Matthias,</p> <p>hui, das ist das erste Mal, dass ich den Viewport-Emulator zu sehen bekomme </p> <p>Das ist ein Menü, das ständig offen ist, und Quick-Links zu den Teilen der Seite. Ok, auch eine Idee.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796744?srt=yes#m1796744 Rolf B 2022-03-01T08:35:20Z 2022-03-01T08:35:20Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Gunnar,</p> <p><a href="https://jsfiddle.net/Rolf_b/wcme2ptj/" rel="noopener noreferrer">guck mal</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796753?srt=yes#m1796753 JürgenB https://www.j-berkemeier.de 2022-03-01T11:52:40Z 2022-03-01T11:52:40Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Gunnar,</p> <blockquote> <p>Und wie willst du es anstellen, dass das Menü bei breitem Viewport immer offen ist und kein Hamburger-Icon zu sehen ist?</p> </blockquote> <p><a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Menue_mit_details.html" rel="nofollow noopener noreferrer">so</a></p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796747?srt=yes#m1796747 Matthias Scharwies mscharwies@selfhtml.org 2022-03-01T08:41:59Z 2022-03-01T08:41:59Z Die Media-Queries bringen mich zum Heulen... <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>hui, das ist das erste Mal, dass ich den Viewport-Emulator zu sehen bekomme </p> </blockquote> <p>Weil das Bsp so komisch war, haben wir es nicht überarbeitet und unter src/selfhtml.org gehostet.</p> <p>Wsl. ist es das letzte Beispiel mit Viewport-Emulator.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796750?srt=yes#m1796750 Rolf B 2022-03-01T09:43:51Z 2022-03-01T09:43:51Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Gunnar,</p> <p>der Wasserfall ist die Raketentechnik der 60er Jahre. Sprich: Die Idee, das eine Brücke, ein Staudamm, eine Saturn V und eine Software nach den gleichen Designprinzipien konstruiert werden sollten.</p> <p>Als man noch Software in Lochkarten piekste und ein Compile-Job eine Nacht durchlief, mag das gestimmt haben.</p> <p>Gottseidank sind wir seither etwas agiler geworden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796771?srt=yes#m1796771 Rolf B 2022-03-01T17:47:25Z 2022-03-01T17:47:25Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Michael_K,</p> <p>antwortest Du im richtigen Thread? Jörg macht jQuery und kämpft damit, während MichaelS bisher vermieden hat, sich mit JavaScript anzulegen.</p> <p>Und ob Boot[st|c]rap die Lösung oder das Problem ist, darüber gehen die Meinungen weit auseinander…</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796844?srt=yes#m1796844 MichaelS 2022-03-02T20:10:28Z 2022-03-02T20:10:28Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Rolf und alle</p> <p>ja, in der Nacht bin ich nicht mehr so ganz aufnahmefähig, da lässt die Konzentration schon spürbar nach... Danke, dass Du den Text im falschen Thread korrigiert hast. Ich habe soeben nochmals eine mobile Version auf: <code>http://michaelschedler.bplaced.net</code> geladen. Die mobile Version (Handy) sollte stimmen, die mittlere Version ist fast fertig und die Desktopansicht muss in dem <main> Bereich formatiert werden.</p> <p>Und schon gibt es ein neues Problem! Dazu habe ich eine Frage: Es ist möglich, Inhalte auf dem Handy so zu beschreiben, dass diese entweder im Landscape- oder im Portrait-Format angezeigt werde.</p> <p>Aber:</p> <p>Ist es auch möglich, innerhalb einer ganzen Website, die im Portrait-Format angezeigt wird, einzelne Seiten im Landscape-Format anzeigen zu lassen? Ich finde auf die Schnelle nichts, wo ich nachlesen könnte.</p> <p>Gruss an einem wahrlichen " Aschermittwoch" von Michael</p> <p>Hier noch ein kleines Video zu Nachdenken: <code>https://www.youtube.com/watch?v=hRyhfRBm7_Q </code></p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796845?srt=yes#m1796845 Rolf B 2022-03-02T20:20:32Z 2022-03-02T20:20:32Z Die Media-Queries bringen mich zum Heulen... <p>Hallo MichaelS,</p> <p>gerade beim Stammtisch diskutiert - eher nein.</p> <p>Aber wir empfehlen Dir <a href="https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung" rel="nofollow noopener noreferrer">responsive Tabellen</a>, wenn's Dir um die Gottesdienste-Tabelle geht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796848?srt=yes#m1796848 MichaelS 2022-03-02T22:21:23Z 2022-03-02T22:21:23Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Rolf,</p> <p>herzlichsten Dank für diesen wertvollen Hinweis! Ich arbeite das morgen mal durch. Der Ansatz ist sehr klug. Alles in einem Guss, und dennoch so verschiedenen, dass es angepasst werden kann.</p> <p>Danke!!! ( Auch wenn Du damit Dir mittlerweile die Wände tapezieren kannst, es ist ernst und aufrichtig gemeint! )</p> <p>Gruss von Michael</p> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796905?srt=yes#m1796905 Matthias Scharwies mscharwies@selfhtml.org 2022-03-04T08:11:38Z 2022-03-04T08:11:38Z Die Media-Queries bringen mich zum Heulen... <p>Hallo Michael,</p> <p>Ich habe Deine Seite mal ein bisschen aufgeräumt.</p> <p><a href="http://svg.bplaced.net/kirche/kinder.htm" rel="nofollow noopener noreferrer">http://svg.bplaced.net/kirche/kinder.htm</a></p> <p>Das müsste man aber noch optimieren</p> <p>Bei den tabellarischen Daten zur Jugendarbeit habe ich nur 3 Spalten Wo, Wann und Wer verwendet und untereinander notiert.</p> <p>Das könnte man auch beim Gottesdienst so machen:</p> <p>Evtl. könnte das Datum aus der Tabelle raus in eine Überschrift packen.</p> <p>Ich würde auch wieder zuerst den Ort, dann erst die Uhrzeit notieren.</p> <p>10.30 Uhr würde ich als 10:30 notieren.</p> <p>Evtl. könntest Du den Pastor in einen span setzen und per CSS (nicht <b>) fett markieren, das Thema gleich danach. In kleinen Viewports mit <code>table span {display:block;}</code> untereinander, in großen nebeneinander.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796861?srt=yes#m1796861 Rolf B 2022-03-03T08:36:41Z 2022-03-03T08:36:41Z Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...) <p>Hallo Matthias,</p> <blockquote> <p>Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?</p> </blockquote> <p>Schwierige Frage - ich kann die Performance von vielen Mediaqueries nicht einschätzen. Wenn man genau einen @media-Block hat, muss der Browser das nur einmal abfragen und hat auch nur eine Gruppe Regeln, die er bedingt anwenden muss. Macht man das an zweiunddrölfzig Stellen im Stylesheet, könnte das für die Layout-Engine deutlich aufwändiger sein. Ich habe aber keine Ahnung, ob das ein Problem ist.</p> <p><a href="https://stackoverflow.com/questions/42813961/is-it-better-to-have-multiple-media-queries-or-a-single-media-query" rel="noopener noreferrer">Diskussion bei Stackoverflow</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796862?srt=yes#m1796862 Auge 2022-03-03T08:42:42Z 2022-03-03T08:42:42Z Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...) <p>Hallo</p> <blockquote> <blockquote> <p>Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?</p> </blockquote> <p>Schwierige Frage - ich kann die Performance von vielen Mediaqueries nicht einschätzen. Wenn man genau einen @media-Block hat, muss der Browser das nur einmal abfragen und hat auch nur eine Gruppe Regeln, die er bedingt anwenden muss. Macht man das an zweiunddrölfzig Stellen im Stylesheet, könnte das für die Layout-Engine deutlich aufwändiger sein. Ich habe aber keine Ahnung, ob das ein Problem ist.</p> </blockquote> <p>Ich <em>vermute</em>, dass das erst dann zu einem <em>offensichtlichen</em> Problem wird, wenn man es mit dem Hin-und-Her-Geschalte stark übertreibt. Ich würde hier – aus dem Bauchgefühl heraus – der Lesbarkeit des Codes mehr argumentatives Gewicht zugestehen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> 200 ist das neue 35. </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796864?srt=yes#m1796864 Matthias Scharwies mscharwies@selfhtml.org 2022-03-03T08:49:04Z 2022-03-03T08:49:04Z Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...) <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <blockquote> <p>Würdet ihr die Dark Mode-Media-Queries für jeden Selektor einzeln (bzw. für 2-3 Selektoren) oder für jeden Bereich vornehmen?</p> </blockquote> <p>Schwierige Frage - ich kann die Performance von vielen Mediaqueries nicht einschätzen. Wenn man genau einen @media-Block hat, muss der Browser das nur einmal abfragen und hat auch nur eine Gruppe Regeln, die er bedingt anwenden muss. Macht man das an zweiunddrölfzig Stellen im Stylesheet, könnte das für die Layout-Engine deutlich aufwändiger sein. Ich habe aber keine Ahnung, ob das ein Problem ist.</p> <p><a href="https://stackoverflow.com/questions/42813961/is-it-better-to-have-multiple-media-queries-or-a-single-media-query" rel="noopener noreferrer">Diskussion bei Stackoverflow</a></p> </blockquote> <p>Danke, ich schau mal, dass ich es bis zum Wochenende übersichtlich hinkrieg. Dann kann ich das immer noch später zusammenfassen.</p> <p>Viele Festlegungen kommen mir wie <em>magic numbers</em> bzw. doppelt gemoppelt vor, ich trau mich aber nicht, alles auf Standard zu setzen.</p> <pre><code class="block language-css"> <span class="token selector">#selfhtml-navigation</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> .91em <span class="token punctuation">}</span> <span class="token selector">#p-personal h3, #selfhtml-navigation h3</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 selector">#selfhtml-navigation ul</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#p-personal li, #selfhtml-navigation li</span> <span class="token punctuation">{</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.125em<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left <span class="token punctuation">}</span> <span class="token selector">#selfhtml-navigation li</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796865?srt=yes#m1796865 Rolf B 2022-03-03T08:55:40Z 2022-03-03T08:55:40Z Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...) <p>Hallo Matthias,</p> <p>alles ausdrucken, an die Wand pinnen und dann wie ein Kriminalist bunte Fäden spannen </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2022/feb/27/die-media-queries-bringen-mich-zum-heulen/1796867?srt=yes#m1796867 Matthias Scharwies mscharwies@selfhtml.org 2022-03-03T08:59:23Z 2022-03-03T08:59:23Z Stylesheets gliedern (war: Die Media-Queries bringen mich zum Heulen...) <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <p>alles ausdrucken, an die Wand pinnen und dann wie ein Kriminalist bunte Fäden spannen </p> </blockquote> <p>Ich hör jetzt auf, genieße die Sonne und mache zuhaus am großen Bildschirm weiter.</p> <p>Andererseits schien Mitte März im Oktober so weit weg.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div>