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>