tag:forum.selfhtml.org,2005:/self Responsive Bilder nicht arbeite beim header Tag – SELFHTML-Forum 2019-04-11T14:25:31Z https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746287#m1746287 liebewinter htmlkurss@web.de 2019-04-06T16:13:28Z 2019-04-06T16:13:28Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo , versuche bauen ein responsive image für verschidenen Geräten(desktop, tablet und smartphone) , ich habe versuche mit diesem Code;</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(max-width: 47.9375em)<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>night_smartphone.JPG<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 64.0625em)<span class="token punctuation">"</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>night.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>night.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nachts Bild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</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>Das Probleme der sich verendert ganze header , wie der screenshot zeigt</p> <p><a href="/images/bb46b6fa-56e3-4cb8-8361-6fdbc40e69bd.png" rel="noopener noreferrer"><img src="/images/bb46b6fa-56e3-4cb8-8361-6fdbc40e69bd.png?size=medium" alt="Bild Virtual smartphone" title="Bild Virtual smartphone" loading="lazy"></a></p> <p>Der Große von meinem Bild für Smartphone <code>360x72 px</code> .</p> <p>Wenn schreibe auf der header Tag ,</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'Bilder/night_smartphone.JPG'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat</span><span class="token punctuation">"</span></span></span><span class="token attr-name">;</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>Bekomme alles gut ....</p> <p><a href="/images/83499b40-5f16-4abd-ab43-44cbf0b37f74.png" rel="noopener noreferrer"><img src="/images/83499b40-5f16-4abd-ab43-44cbf0b37f74.png?size=medium" alt="Bild smartphone " title="Bild smartphone " loading="lazy"></a></p> <p>aber als ich möchte verschieden Bilder habe , kann das nicht machen....</p> <p>Kann Bitte jemand helfe , danke !</p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746297#m1746297 Rolf B 2019-04-06T19:28:18Z 2019-04-06T19:28:18Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo Joseba,</p> <p>es ist nicht wirklich sinnvoll, 767 Pixel durch 16 zu teilen und dann 47.9375em als Breitenangabe zu setzen. 1em = 16px ist NICHT garantiert!</p> <p>Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> ?</p> <p>Zu deiner Frage: Das picture Element ist dazu da, einem <img> Element eine Möglichkeit für Medienabfragen zu geben. <img> ist aber nicht für Hintergrundbilder da, sondern für Bilder, die Teil des Inhalts sind. Ein <img> Element hat eventuell Margin oder Padding. Ein <header> Element auch. Und dadurch entsteht dein leerer Raum.</p> <p>Ich glaube, in deinem Header möchtest Du einen Hintergrund verwenden, der mit CSS gesetzt wird.</p> <p>Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden. Das geht so:</p> <pre><code class="block language-css"><span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'Bilder/night_smartphone.JPG'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'Bilder/night.JPG'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>D.h. du setzt night_smartphone.JPG als normalen Hintergrund, und wenn der Bildschirm breit genug ist, ersetzt Du das durch night.JPG.</p> <p>Bitte denke daran, dass diese Abfragen nur richtig funktionieren, wenn Du im <head>-Bereich des HTML</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>stehen hast. Ohne diese Angabe simuliert der Smartphone-Browser einen Desktop-Bildschirm, der 900-1000 Pixel breit ist.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746302#m1746302 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-06T20:24:37Z 2019-04-06T20:24:37Z Responsive Bilder nicht arbeite beim header Tag <p>@@ liebewinter</p> <blockquote> <p>Hallo , versuche bauen ein responsive image für verschidenen Geräten(desktop, tablet und smartphone)</p> </blockquote> <p>„Desktop, Tablet, Smartphone“ hat nichts mit <em lang="en">responsive design</em> zu tun. Das hatten wir doch <a href="https://forum.selfhtml.org/self/2019/feb/17/wie-kann-media-query-ueberschreibung/1743060#m1743060" rel="noopener noreferrer">neulich</a> erst.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746506#m1746506 liebewinter htmlkurss@web.de 2019-04-10T16:19:22Z 2019-04-10T16:19:22Z Responsive Bilder nicht arbeite beim header Tag <p>@ Gunnar Bittersman , brauchst du keine Sorge machen , ich weiss das Probleme für dich ist, weil ich nicht Fachbegriffe (Groß und Klein) benutze... ☺️</p> <p>So , zurück auf meinem Probleme…</p> <p>jetzt benutze für ansammeln meinen CSS Datei, <strong>windows.css</strong> und meine Media Query Datei, **tablet.css **,</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<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>CSS/tablet.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<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>CSS/windows.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Frühz habe mit PHP gemacht,</p> <pre><code class="block language-php"><span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">include</span> <span class="token string single-quoted-string">'CSS/windows.css'</span><span class="token punctuation">;</span> <span class="token keyword">include</span> <span class="token string single-quoted-string">'CSS/tablet.css'</span><span class="token punctuation">;</span> <span class="token delimiter important">?></span></span> </code></pre> <p>und bekomme dieser Screenshot,</p> <p><a href="/images/1cc49249-ef2d-4c18-93c8-65c2ec0cf196.png" rel="noopener noreferrer"><img src="/images/1cc49249-ef2d-4c18-93c8-65c2ec0cf196.png?size=medium" alt="probleme auf meine Smatphone" title="probleme auf meine Smatphone" loading="lazy"></a></p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746300#m1746300 liebewinter htmlkurss@web.de 2019-04-06T20:00:02Z 2019-04-06T20:00:02Z Responsive Bilder nicht arbeite beim header Tag <p>Viele Danke für deine antwort !,</p> <blockquote> <p>Für Dinge, die über CSS eingestellt werden, sind Media-Queries bereits als Teil von CSS vorhanden</p> </blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'Bilder/night.JPG'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>das habe schon auf css datei …</p> <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">min-width</span><span class="token punctuation">:</span> 48em<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> 64em<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> -ms-grid<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eaf6e5<span class="token punctuation">;</span> <span class="token property">grid-row-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">grid-template</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> auto <span class="token string">"nav nav nav"</span> auto <span class="token string">"main main gap1"</span> 1em <span class="token string">"main main werb"</span> 11em <span class="token string">"main main gap2"</span> 3em <span class="token string">"main main info"</span> 1fr <span class="token string">"footer footer footer"</span> auto / 8% 64% 28%<span class="token punctuation">;</span> <span class="token property">-ms-grid-columns</span><span class="token punctuation">:</span> 8% 64% 28%<span class="token punctuation">;</span> <span class="token property">-ms-grid-row</span><span class="token punctuation">:</span> 120px 80px 103px 200px 110px 90px<span class="token punctuation">;</span> <span class="token property">-ms-grid-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"Bilder/view.JPG"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>aber ich möchte haben verschiesen Große Bilder für jeden Geräte ,desktop , tablet , smartphone .</p> <p>Beispiel habe eine gemacht für <strong>creativecommons</strong> Logo…</p> <pre><code class="block language-css"><footer id=<span class="token string">"copry"</span> > <p>My <span class="token property">Website</span><span class="token punctuation">:</span> Computer and More © 2018. All Rights Reserved.</p> <a id=<span class="token string">"img1"</span> href=<span class="token string">"https://creativecommons.org/licenses/by-nc/4.0/"</span>> <picture> <source media=<span class="token string">'(max-width: 20em)'</span> srcset=<span class="token string">'/Bilder/copry-kleine.png'</span>> <source media=<span class="token string">'(max-width: 47.9375em) and (orientation: landscape)'</span> srcset=<span class="token string">'/Bilder/copry-kleine.png'</span>> <source media=<span class="token string">'(min-width: 80em)'</span> srcset=<span class="token string">'/Bilder/copry.png'</span>> <img alt=<span class="token string">"Creative Commons License"</span> src=<span class="token string">"/Bilder/copry-kleine.png"</span> style=<span class="token string">"width:auto;"</span>></a> </picture> <p>This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. Content of this site cannot be republished either online or offline without our permissions. </p> </footer> </code></pre> <p>und alles funzioniert gut...</p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746303#m1746303 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-06T20:35:03Z 2019-04-06T20:35:03Z Responsive Bilder nicht arbeite beim header Tag <p>@@Rolf B</p> <blockquote> <p>Bei Bildern, deren natürliche Größe in Pixeln gerechnet wird, ist es nach meiner Auffassung aber auch durchaus sinnvoll, die Media-Query in Pixeln durchzuführen. Oder verstehe ich da was falsch, <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> ?</p> </blockquote> <p>Bei <em lang="en">responsive design</em> ist die „natürliche Größe“ von Bildern irrelevant – sind doch <em lang="en">flexible images</em> ein Kernstück von <em lang="en">responsive design</em>.</p> <p>Es sollten nur genügend Pixel da sein, damit das Bild scharf ist. Und hier reden wir über ganz andere Pixel: Device-Pixel, nicht CSS-Pixel.</p> <p></p> <p>Und BTW: Nur weil @liebewinter <a href="https://de.wikipedia.org/wiki/Plenk" rel="nofollow noopener noreferrer">plenkt</a>, musst du das nicht nachmanchen.</p> <p></p> <blockquote> <p>night_smartphone.JPG</p> </blockquote> <p>Die Benennung ist wenig sinnvoll.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746304#m1746304 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-06T20:50:30Z 2019-04-06T20:50:30Z Responsive Bilder nicht arbeite beim header Tag <p>@@ liebewinter</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">min-width</span><span class="token punctuation">:</span> 48em<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> 64em<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> </code></pre> </blockquote> <p>Macht der <em lang="en">media query</em> Sinn? Warum soll das zwischen 48em und 64em im <em lang="en">portrait mode</em> nicht auch greifen?</p> <blockquote> <pre><code class="block language-css"> <span class="token property">-ms-grid-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> </code></pre> </blockquote> <p>Das macht keinen Sinn. IE hat kein <em lang="en">gap</em> implementiert, d.h. <code>-ms-grid-gap</code> gibt es nicht.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746305#m1746305 Rolf B 2019-04-06T21:31:08Z 2019-04-06T21:31:08Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo Gunnar,</p> <p>das Plenk kam "automatisch" vom Auswahlmenü des Erwähnungsassistenten. Ich hab's stehen gelassen, es hätte ja nötig sein können, damit die Erwähnung funktioniert.</p> <p>Wenn Device-Pixel relevant sind, ist dann eine Mediaquery auf em sinnvoll? Es gibt zwar Mediaqueries auf device-pixel, aber die haben noch Vendor-Prefixe. Wie stellt man fest, ob ein Bild "genug" Pixel für das Gerät hat?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746329#m1746329 ottogal 2019-04-07T09:15:28Z 2019-04-07T09:15:28Z Responsive Bilder nicht arbeite beim header Tag <blockquote> <p>Und BTW: Nur weil @liebewinter <a href="https://de.wikipedia.org/wiki/Plenk" rel="nofollow noopener noreferrer">plenkt</a>, musst du das nicht nachmanchen.</p> </blockquote> <p>Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.</p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746306#m1746306 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-06T22:32:38Z 2019-04-06T22:32:38Z Responsive Bilder nicht arbeite beim header Tag <p>@@Rolf B</p> <blockquote> <p>Wie stellt man fest, ob ein Bild "genug" Pixel für das Gerät hat?</p> </blockquote> <p>Die gute Nachricht: gar nicht – das erledigt der Browser selbst.</p> <p>Das heißt: bei <code>srcset</code> mit <code>w</code>-Angabe lädt ein Gerät mit HD-Display bei gleicher Viewportbreite (in CSS-Pixel) ggfs. eine andere Bilddatei als ein Gerät mit Nicht-HD-Display.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746317#m1746317 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-07T07:07:16Z 2019-04-07T07:07:16Z Responsive Bilder nicht arbeite beim header Tag <p>@@Rolf B</p> <blockquote> <p>das Plenk kam "automatisch" vom Auswahlmenü des Erwähnungsassistenten. Ich hab's stehen gelassen, es hätte ja nötig sein können, damit die Erwähnung funktioniert.</p> </blockquote> <p>Beim Fragezeichen wird vermutlich nichts passieren. Ansonsten ist U+2060 <em lang="en">word joiner</em> dein Freund, siehe <a href="https://forum.selfhtml.org/self/2019/apr/4/datatables-sortierung-speichern/1746080#m1746080" rel="noopener noreferrer">dieses Posting</a> unten.</p> <p>Brauche ich auch öfter auf Twitter bei diesen @- und #-Dingens.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746336#m1746336 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-04-07T09:36:11Z 2019-04-07T09:36:11Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo ottogal,</p> <blockquote> <p>Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.</p> </blockquote> <p>Zumal es in anderen Sprachen andere Regeln bezüglich der Leerzeichen vor Satzzeichen gibt:</p> <p><em lang="fr">« signe double, espace double »</em> <code>?</code> und <code>!</code> (und auch <code>«</code>, <code>»</code>, <code>:</code>, <code>;</code>) sind zweiteilige Zeichen, deshalb kommt ein Leerzeichen davor und dahinter. <code>.</code> und <code>,</code> sind einteilige Zeichen, deshalb kein zusätzliches Leerzeichen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746339#m1746339 Tabellenkalk 2019-04-07T09:44:00Z 2019-04-07T09:44:00Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo,</p> <blockquote> <blockquote> <p>Und BTW: Nur weil @liebewinter <a href="https://de.wikipedia.org/wiki/Plenk" rel="nofollow noopener noreferrer">plenkt</a>, musst du das nicht nachmanchen.</p> </blockquote> <p>Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.</p> </blockquote> <p>Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746342#m1746342 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-07T10:33:42Z 2019-04-07T10:34:44Z Responsive Bilder nicht arbeite beim header Tag <p>@@Matthias Apsel</p> <blockquote> <p>Zumal es in anderen Sprachen andere Regeln bezüglich der Leerzeichen vor Satzzeichen gibt:</p> </blockquote> <p>Das Französische ist so ziemlich die einzige Sprache, wo vor/nach Satzzeichen geplenkt wird. Und das auch nicht überall; die Schweizer machen da nicht mit.</p> <p>AFAIK wird in iberoromanischen Sprachen nicht geplenkt. Stammt liebewinter nicht von dort?</p> <blockquote> <p><em lang="fr">« signe double, espace double »</em> <code>?</code> und <code>!</code> (und auch <code>«</code>, <code>»</code>, <code>:</code>, <code>;</code>) sind zweiteilige Zeichen, deshalb kommt ein Leerzeichen davor und dahinter. <code>.</code> und <code>,</code> sind einteilige Zeichen, deshalb kein zusätzliches Leerzeichen.</p> </blockquote> <p>Die Bauernregel stößt aber auch schnell an ihre Grenzen.</p> <p>Einfache Guillemets sind einteilig, trotzdem im Französischen (aber s.o.) mit Leerzeichen [<a href="https://fr.wikipedia.org/wiki/Guillemet#Double_ou_triple_niveau_de_citation" rel="nofollow noopener noreferrer">Wikipedia</a>]</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746343#m1746343 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-07T10:40:46Z 2019-04-07T10:40:46Z Responsive Bilder nicht arbeite beim header Tag <p>@@Tabellenkalk</p> <blockquote> <blockquote> <blockquote> <p>Und BTW: Nur weil @liebewinter <a href="https://de.wikipedia.org/wiki/Plenk" rel="nofollow noopener noreferrer">plenkt</a>, musst du das nicht nachmanchen.</p> </blockquote> <p>Ich finde es nicht angebracht, von einem ersichtlich nicht deutsch-sprachigen Teilnehmer zu sagen, dass er plenkt. Irgendwo hat Rechthaberei auch Grenzen.</p> </blockquote> <p>Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.</p> </blockquote> <p>Kalk 1 – Plusdrücker 0.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746344#m1746344 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-04-07T10:45:56Z 2019-04-07T10:45:56Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <p>Gunnar hat eindeutig nur das nachmanchen (sic!) kritisiert.</p> </blockquote> <p>Kalk 1 – Plusdrücker 0.</p> </blockquote> <p>Dennoch trägt der Satz</p> <blockquote> <blockquote> <blockquote> <p>Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.</p> </blockquote> </blockquote> </blockquote> <p>keine positive Botschaft.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746345#m1746345 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-04-07T10:50:55Z 2019-04-07T10:50:55Z Responsive Bilder nicht arbeite beim header Tag <p>@@Matthias Apsel</p> <blockquote> <p>Dennoch trägt der Satz</p> <blockquote> <blockquote> <blockquote> <p>Nur weil @liebewinter plenkt, musst du das nicht nachmanchen.</p> </blockquote> </blockquote> </blockquote> <p>keine positive Botschaft.</p> </blockquote> <p>Bitte nicht sinnentstellend zitieren! Im Original steht da „Und BTW“ dabei. Und die Kirche im Dorf lassen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746352#m1746352 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-04-07T11:19:28Z 2019-04-07T11:19:28Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>Bitte nicht sinnentstellend zitieren! Im Original steht da „Und BTW“ dabei.</p> </blockquote> <p>Ich sehe nicht, dass ein „und Übrigens“ den Sinn der folgenden Aussage entstellt.</p> <blockquote> <p>Und die Kirche im Dorf lassen.</p> </blockquote> <p>Einverstanden.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746508#m1746508 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-04-10T16:25:52Z 2019-04-10T16:25:52Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo liebewinter,</p> <blockquote> <p>jetzt benutze für ansammeln meinen CSS Datei, <strong>windows.css</strong> und meine Media Query Datei, **tablet.css **,</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<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>CSS/tablet.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<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>CSS/windows.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p><code>type="text/css"</code> kann auf weggelassen werden.</p> <p>Benutze nur eine Datei. Und dort @media-Direktiven.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746510#m1746510 liebewinter htmlkurss@web.de 2019-04-10T16:38:53Z 2019-04-10T16:38:53Z Responsive Bilder nicht arbeite beim header Tag <blockquote> <p>Benutze nur eine Datei. Und dort @media-Direktiven.</p> </blockquote> <p>Kannst du Bitte sage wie , ich verstehe nicht alles was du meinst..</p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746511#m1746511 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-04-10T16:43:22Z 2019-04-10T16:43:22Z Responsive Bilder nicht arbeite beim header Tag <p>Hallo liebewinter,</p> <pre><code class="block language-css"> <span class="token comment">/* Festlegungen für alle Geräte, mobile first */</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> 50em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Festlegungen für große Bildschirme */</span> <span class="token punctuation">}</span> </code></pre> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys.<br> ¯\_(ツ)_/¯ </div> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746512#m1746512 liebewinter htmlkurss@web.de 2019-04-10T16:51:01Z 2019-04-10T16:51:01Z Responsive Bilder nicht arbeite beim header Tag <p>aber das ich schon gemacht.. , ich habe auf meine <strong>tablet.css</strong>,</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 320px<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> 568px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span> <span class="token punctuation">:</span> portrait<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eaf6e5<span class="token punctuation">;</span> <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 11% 80% 9%<span class="token punctuation">;</span> <span class="token property">grid-row-gap</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 1.0833em<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">grid-template-areas</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> <span class="token string">"nav nav nav"</span> <span class="token string">"main main main"</span> <span class="token string">"footer footer footer"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > header</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"Bilder/night_hoppe.JPG"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">border-left</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #d2f5c4<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span><span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">flex</span><span class="token punctuation">:</span> 1 0 auto<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px 0px 0px 9px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">nav ul:nth-of-type(2)</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px 30px 0px 25px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#navs</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1px 0px 1px<span class="token punctuation">;</span> <span class="token comment">/* Großer Nav , nur Obern und Unten */</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px 4px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0px 1px 0px 1px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Candara<span class="token punctuation">,</span> Calibri<span class="token punctuation">,</span> Segoe<span class="token punctuation">,</span> <span class="token string">"Segoe UI"</span><span class="token punctuation">,</span> Optima<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body > main</span> <span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> 180vh<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#name</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 0.55em<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#email</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 0.55em<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#text</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 0.3em<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token comment">/* HOVER */</span> <span class="token selector">.dropdown:hover .dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">top</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.link_change ul</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#img1</span> <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 property">margin</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#copry a</span> <span class="token punctuation">{</span><span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span><span class="token punctuation">}</span> <span class="token selector">#copry p</span> <span class="token punctuation">{</span><span class="token property">font-size</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>auch wenn meine Media Query habe jetzt <strong>px</strong> (ich habe so geschrieben um zu sehen ob das probleme mit <strong>em</strong> war..ich habe gesehen das sie spiele keine rolle auf meine Probleme...) , Später will <strong>em</strong> gebe...</p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746518#m1746518 liebewinter htmlkurss@web.de 2019-04-10T17:37:13Z 2019-04-10T17:37:13Z Responsive Bilder nicht arbeite beim header Tag <p>ich habe bemerke die beim Desktop macht Gleich.. , der header Tag nemmt mehr Platz und das Bild bewegt sich nach Rechte Seite , wie der Screeshot zeigt,</p> <p><a href="/images/8945911c-3c46-46f0-9b22-787ffefe9f92.png" rel="noopener noreferrer"><img src="/images/8945911c-3c46-46f0-9b22-787ffefe9f92.png?size=medium" alt="Bild bewegt sich nach Rechte Seite" title="Bild bewegt sich nach Rechte Seite" loading="lazy"></a></p> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746597#m1746597 liebewinter htmlkurss@web.de 2019-04-11T10:16:25Z 2019-04-11T10:17:16Z Responsive Bilder nicht arbeite beim header Tag <p>nur zu fragen... have meine header Tag , gut gemach ?</p> <pre><code class="block language-html"><span class="token prolog"><?php header('Content-Type: text/html; Charset=utf-8'); mb_internal_encoding('UTF-8'); date_default_timezone_set('UTC'); error_reporting(E_ALL); ?></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content-type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html; charset=utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Computer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<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>CSS/windows.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<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>CSS/tablet.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</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>bilder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>(min-width: 320px) and (max-width: 568px) and (orientation: portrait)<span class="token punctuation">'</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/Bilder/night_hoppe.JPG<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>(max-width: 768px) and (orientation: landscape)<span class="token punctuation">'</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/Bilder/night_smartphone.JPG<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>(min-width: 1280px)<span class="token punctuation">'</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/Bilder/night.JPG<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>night_smartphone.JPG<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>night<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2019/apr/6/responsive-bilder-nicht-arbeite-beim-header-tag/1746622#m1746622 liebewinter htmlkurss@web.de 2019-04-11T14:25:31Z 2019-04-11T14:29:23Z Responsive Bilder nicht arbeite beim header Tag <p>So , versuche mein Code vereinfacht , vielleicht ist besser das Fehler zu finde.., weil auf Desktop gleiche Probleme wie Smartphone bekomme , jetzt arbeit mit <strong>http://localhost</strong> .</p> <p>Habe Drei Datei , <strong>hope.php</strong> wo mein html code have,</p> <pre><code class="block language-html"><span class="token prolog"><?php header('Content-Type: text/html; Charset=utf-8'); mb_internal_encoding('UTF-8'); date_default_timezone_set('UTC'); error_reporting(E_ALL); ?></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content-type<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html; charset=utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Computer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<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>/meine/hope/hope_windows.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<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>/meine/hope/hope_query.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>picture</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>bilder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>(min-width: 320px) and (max-width: 568px) and (orientation: portrait)<span class="token punctuation">'</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/meine/hope/night_hoppe.JPG<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>(max-width: 768px) and (orientation: landscape)<span class="token punctuation">'</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/meine/hope/night_smartphone.JPG<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>(min-width: 1280px)<span class="token punctuation">'</span></span> <span class="token attr-name">srcset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/meine/hope/night.JPG<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>/meine/hope/night_smartphone.JPG<span class="token punctuation">'</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>night<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>picture</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> </code></pre> <p>Der Rest vom html Code<a href="https://codepen.io/mezb/pen/eoWLMd" rel="noopener noreferrer"> hier</a></p> <p>dann , <strong>hope_query.css</strong> , wo mein Media Query habe,</p> <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">min-width</span><span class="token punctuation">:</span> 1025px<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> 1280px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> -ms-grid<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #eaf6e5<span class="token punctuation">;</span> <span class="token property">grid-row-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">grid-template</span><span class="token punctuation">:</span> <span class="token string">"header header header"</span> auto <span class="token string">"nav nav nav"</span> auto <span class="token string">"main main gap1"</span> 1em <span class="token string">"main main werb"</span> 11em <span class="token string">"main main gap2"</span> 3em <span class="token string">"main main info"</span> 1fr <span class="token string">"footer footer footer"</span> auto / 8% 64% 28%<span class="token punctuation">;</span> <span class="token property">-ms-grid-columns</span><span class="token punctuation">:</span> 8% 64% 28%<span class="token punctuation">;</span> <span class="token property">-ms-grid-row</span><span class="token punctuation">:</span> 120px 80px 103px 200px 110px 90px<span class="token punctuation">;</span> <span class="token property">-ms-grid-gap</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown-content a</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px 12px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown:hover .dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">top</span><span class="token punctuation">:</span> 28px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">grid-area</span><span class="token punctuation">:</span> header<span class="token punctuation">;</span> <span class="token property">-ms-grid-column</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">-ms-grid-column-span</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span> <span class="token property">-ms-grid-row</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">-ms-grid-row-span</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"Bilder/view.JPG"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 65px<span class="token punctuation">;</span> <span class="token punctuation">}</span> . . . </code></pre> <p>und das letzte ,<strong>hope_windows.css</strong> , weil keine einfluß auf dieser Probleme hat , ist auch in <a href="https://codepen.io/mezb/pen/eoWLMd" rel="noopener noreferrer">codepen </a> .</p> <p>Der Screeshot von meinem Rechner,</p> <p><a href="/images/76610942-2f2b-4738-b7f0-b689a25d5737.png" rel="noopener noreferrer"><img src="/images/76610942-2f2b-4738-b7f0-b689a25d5737.png?size=medium" alt="screenshot von meinem Desktop" title="screenshot von meinem Desktop" loading="lazy"></a></p>