tag:forum.selfhtml.org,2005:/selfLeere Fläche kann ich nicht entfernen – SELFHTML-Forum2017-11-10T06:27:43Zhttps://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707933#m1707933Khan2017-11-08T11:58:49Z2017-11-08T11:58:49ZLeere Fläche kann ich nicht entfernen<p>Moin Leute,</p>
<p>ich habe da eine Responsive Seite und sobald ich auf einem Mobilgerät Querformat mache, dann erscheint in dort eine leere Fläche und ich bekomme die nicht entfernt.
Dieser Bereich ist mit CSS und einer JS Datei bestückt und in der JS befinden sich auch einige CSS Befehle. Alles ist recht überschaubar aber ich konnte es nicht lösen, vielleicht hat jemand eine Idee.</p>
<p><a href="/images/b32e1830-94e3-4c88-b241-a1b445aa6246.jpg" rel="noopener noreferrer"><img src="/images/b32e1830-94e3-4c88-b241-a1b445aa6246.jpg?size=medium" alt="" loading="lazy"></a></p>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707937#m1707937MudGuardhttp://www.andreas-waechter.de/2017-11-08T12:42:30Z2017-11-08T12:42:30ZLeere Fläche kann ich nicht entfernen<p>Hi,</p>
<blockquote>
<p>ich habe da eine Responsive Seite und sobald ich auf einem Mobilgerät Querformat mache, dann erscheint in dort eine leere Fläche und ich bekomme die nicht entfernt.
Dieser Bereich ist mit CSS und einer JS Datei bestückt und in der JS befinden sich auch einige CSS Befehle. Alles ist recht überschaubar aber ich konnte es nicht lösen, vielleicht hat jemand eine Idee.</p>
<p><a href="/images/b32e1830-94e3-4c88-b241-a1b445aa6246.jpg" rel="noopener noreferrer"><img src="/images/b32e1830-94e3-4c88-b241-a1b445aa6246.jpg?size=medium" alt="" loading="lazy"></a></p>
</blockquote>
<p>Das Problem befindet sich in Zeile 17 im Quellcode. Oder in Zeile 42.</p>
<p>Oder sonst irgendwo.</p>
<p>Wie soll man anhand eines Screenshots erkennen, wo im Code das Problem versteckt ist?</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707940#m1707940Rolf B2017-11-08T13:15:23Z2017-11-08T13:15:23ZLeere Fläche kann ich nicht entfernen<p>Hallo Khan,</p>
<p>zusätzlich zum Link auf die Seite wäre noch wichtig zu wissen: Welche leere Fläche stört genau - welches Aussehen ERWARTEST Du? Kannst Du den störenden Bereich irgendwie markieren?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707961#m1707961Khan2017-11-08T22:25:47Z2017-11-08T22:27:45ZLeere Fläche kann ich nicht entfernen<p><a href="/images/3bcb0b17-9e60-4b6e-9406-d03c20bd5f76.jpg" rel="noopener noreferrer"><img src="/images/3bcb0b17-9e60-4b6e-9406-d03c20bd5f76.jpg?size=medium" alt="" loading="lazy"></a></p>
<p>Blöd beschrieben von mir aber ich sag mal so, es soll so aussehen:</p>
<p><a href="/images/e7add350-b931-4cb0-962d-89c943332dde.jpg" rel="noopener noreferrer"><img src="/images/e7add350-b931-4cb0-962d-89c943332dde.jpg?size=medium" alt="" loading="lazy"></a></p>
<p>Aber der jetzige Bereich rechts von der Schrift ist mit irgendeinem Code besetzt und welchen Code soll ich da posten wenn ich nicht weiss welcher das ist? Und da sind mehrere Klassen verwiesen und dazu eine JS Datei.</p>
<p><a href="http://mediterran-halstenbek.de/neu/#gallery" rel="nofollow noopener noreferrer">http://mediterran-halstenbek.de/neu/#gallery</a></p>
<p>Ist nur in der Mobilansicht so!</p>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707962#m1707962Khan2017-11-08T22:52:55Z2017-11-08T22:52:55ZLeere Fläche kann ich nicht entfernen<p>Mobil aber auch nur wenn Querformat. Also z. B. Telefon horizontal.</p>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707975#m1707975Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2017-11-09T09:53:34Z2017-11-10T04:45:26ZLeere Fläche kann ich nicht entfernen<p>@@Khan</p>
<blockquote>
<p>Aber der jetzige Bereich rechts von der Schrift ist mit irgendeinem Code besetzt und welchen Code soll ich da posten wenn ich nicht weiss welcher das ist? Und da sind mehrere Klassen verwiesen und dazu eine JS Datei.</p>
</blockquote>
<p>Mit dem Entwicklerwerkzeug deines Browsers kannst du umgehen? Wenn nicht, wäre jetzt die Zeit, das zu erlernen.</p>
<p>Bspw. im Firefox: Reiter „Inspektor“, links davon „Ein Element der Seite auswählen anclicken“, dann mit der Maus das betreffende Element suchen. Sieht dann so aus:</p>
<p><a href="/images/da4fb93d-53c8-4bef-99af-80c199e6cbfc.png" rel="noopener noreferrer"><img src="/images/da4fb93d-53c8-4bef-99af-80c199e6cbfc.png?size=medium" alt="" loading="lazy"></a></p>
<p>Im linken Feld siehst du im DOM (HTML) das betreffende Element. Anclicken. Rechts siehst du dann die CSS-Regeln dafür:</p>
<p><a href="/images/d83510da-cd93-4a29-bc0a-70918c6cd52c.png" rel="noopener noreferrer"><img src="/images/d83510da-cd93-4a29-bc0a-70918c6cd52c.png?size=medium" alt="" loading="lazy"></a></p>
<p>Da siehst du <code>float: left</code>, deshalb steht das Ding links. Haken wegnehmen – steht immer noch links. Jetzt kannst du das Ding aber <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren" rel="nofollow noopener noreferrer">horizontal zentrieren</a>. Da es ein Block ist bspw. mit <code>margin: auto</code>.</p>
<p>Außerdem siehst du, dass da ein <code>`</code> ist, das da nicht hingehört. Die Änderungen übernimmst du dann in dein Stylesheet.</p>
<p>LLAP </p>
<div class="signature">-- <br>
“When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a>
</div>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1708035#m1708035Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2017-11-10T05:38:33Z2017-11-10T05:38:33ZFehlerberichtigungen<p>@@Khan</p>
<blockquote>
<p><a href="http://mediterran-halstenbek.de/neu/#gallery" rel="nofollow noopener noreferrer">http://mediterran-halstenbek.de/neu/#gallery</a></p>
</blockquote>
<p>Ein paar Dinge, die du noch berichtigen solltest:</p>
<pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1, user-scalable=no<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Nutzern das Vergrößern der Seite zu untersagen, ist überhaupt keine gute Idee. (Manche Browser unterstützen das auch gar nicht mehr.) Das muss auf <code class="good">yes</code> gesetzt werden! Oder die <code>user-scalable</code>-Angabe ganz weglassen.</p>
<hr>
<pre><code class="block bad language-css"><span class="token selector">.linkEffects a:hover,
.linkEffects a:focus</span> <span class="token punctuation">{</span>
<span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Dadurch ist das Menü unbenutzbar. Bei Navigation mit Tastatur erkennt man nicht, bei welchem Menüpunkt man sich befindet. Wenn du den vorhandenen Stil für <code class="language-css"><span class="token punctuation">:</span>focus</code> wegnimmst, musst du einen anderen dafür vorsehen. Aufgrund des (ohnehin zweifelhaften) Hovereffekts ist das etwas tricky, aber <code class="language-css"><span class="token selector">.linkEffects li a:focus span</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> thick solid <span class="token punctuation">}</span></code> erfüllt seinen Zweck.</p>
<p>BTW, den Hovereffekt bei „Speisen“ solltest du dir nochmal genauer ansehen.</p>
<hr>
<pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</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<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Vorname<span class="token punctuation">"</span></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>Vorname<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<p>Nein! <a href="http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/" rel="nofollow noopener noreferrer"><strong>Placeholder sind kein Ersatz für Labels!</strong></a> – <a href="http://mentalized.net/journal/2010/08/05/dont-use-placeholder-text-as-labels/" rel="nofollow noopener noreferrer">Wirklich nicht!</a> Sämtliche Eingabefelder benötigen eine <a href="https://wiki.selfhtml.org/wiki/HTML/Formulare/Gestaltung#label" rel="nofollow noopener noreferrer">Beschriftung</a>.</p>
<p>Vielleicht ist <a href="https://codepen.io/gunnarbittersmann/pen/qbMGmK" rel="noopener noreferrer">solch ein Label</a> was für dich.</p>
<hr>
<p><a href="/images/c9a29b0d-1291-4b9e-b0ed-418d8b71b48e.png" rel="noopener noreferrer"><img src="/images/c9a29b0d-1291-4b9e-b0ed-418d8b71b48e.png?size=medium" alt="<!--<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--// Meta tag Keywords -->" loading="lazy"></a></p>
<p>Ein Fehler (deshalb in der Quelltextansicht rot hervorgehoben), der sich nicht auf Nutzer auswirkt: Ein <a href="https://w3c.github.io/html/syntax.html#comments" rel="nofollow noopener noreferrer">Kommentar</a> darf nicht <code><!--</code> enthalten.</p>
<p>LLAP </p>
<div class="signature">-- <br>
“When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a>
</div>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707974#m1707974Rolf B2017-11-09T09:27:00Z2017-11-09T09:27:59ZLeere Fläche kann ich nicht entfernen<p>Hallo Khan,</p>
<p>grundsätzlich sehe ich das Problem hier (neu/css/style.css:1585):</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">max-width</span><span class="token punctuation">:</span> 991px<span class="token punctuation">)</span>
style.<span class="token property">css</span><span class="token punctuation">:</span>1585
.portfolio-grids</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 45%<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Die Breite von 45% löst den Leerraum aus. Wenn ich Chrome in den "Mobil-Emulationsmodus für iPhone 6" schalte (das macht man in den Entwicklerwerkzeugen oben links, da ist so ein Handy-ähnliches Icon), zeigt er mir eine Breite von 667 CSS-Pixeln an, deswegen greift diese Media-Regel. Ein iPad beispielsweise hat 1024 CSS Pixel, da sieht es richtig aus.</p>
<p>Welchen Usecase hat diese Media-Regel überhaupt? Wann ist es sinnvoll, die Breite von portfolio-grids auf 45% zu setzen? Zeig Dir mal die Seite im Desktop-Browser an und mach langsam das Fenster schmaler. Irgendwann hast Du die 992 Pixel unterschritten, dann schnurrt die Anzeige zusammen, irgendwann unterschreitest Du die nächste Schwelle, dann wird's wieder breit. Ist diese Regel ein Unfall?</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1707976#m1707976Gunnar Bittersmannselfhtml@bittersmann.dehttp://bittersmann.de2017-11-09T09:56:41Z2017-11-09T09:56:41ZLeere Fläche kann ich nicht entfernen<p>@@Rolf B</p>
<blockquote>
<pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 991px<span class="token punctuation">)</span>
style.<span class="token property">css</span><span class="token punctuation">:</span>1585
.portfolio-grids</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 45%<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Die Breite von 45% löst den Leerraum aus.</p>
</blockquote>
<p>Es soll ja nur diese Breite haben. Die <em>andere</em> Deklaration ist die, die stört.</p>
<p><a href="/images/e7add350-b931-4cb0-962d-89c943332dde.jpg" rel="noopener noreferrer"><img src="/images/e7add350-b931-4cb0-962d-89c943332dde.jpg?size=medium" alt="" loading="lazy"></a></p>
<p>LLAP </p>
<div class="signature">-- <br>
“When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a>
</div>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1708029#m1708029Khan2017-11-09T20:42:44Z2017-11-09T20:42:44ZLeere Fläche kann ich nicht entfernen<p>Ok Leute ihr habt mir alle sehr geholfen, die Klasse .portfolio-grids war dafür zustaendig bloß habe ich diese nicht eigenstaendig gefunden.</p>
<p>Jetzt ist es so wie ich es mir vorgestellt habe.</p>
<p>Danke und Gruß aus Hamburg!!</p>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1708011#m1708011Rolf B2017-11-09T14:22:00Z2017-11-09T14:22:00ZLeere Fläche kann ich nicht entfernen<p>Hallo Gunnar,</p>
<blockquote>
<p>Es soll ja nur diese Breite haben.</p>
</blockquote>
<p>Dem Augenschein nach kann ich deiner Annahme nicht folgen. Wenn ich mir die Seite für andere Breiten betrachte, wird eigentlich immer die Viewport-Breite ausgenutzt. Eine Sonderlocke mit 45% Breite für den Breitenbereich 601-990 Pixel erschließt sich mir nicht (und ja, das liegt natürlich daran, dass ich keine Locken mehr habe).</p>
<blockquote>
<p>Die <em>andere</em> Deklaration ist die, die stört.</p>
</blockquote>
<p>Der float:left stört auch und bewirkt, dass die Preisliste ihre natürliche Breite hat statt der Viewportbreite, da hast Du natürlich recht. Der ist ebenfalls nur in diesem Breitenbereich gesetzt.</p>
<p>Dass man bei diesem am Stiefelriemen aufgehängten CSS-Monster den Überblick verliert, ist aber auch kein Wunder. Und ich frage mich, warum Bootstrap den Speisekartencontainer unbedingt in der Breite springen lassen muss - sich sogar extra Mühe gibt, die Margins anzupassen um das zu erreichen. Warum nicht einfach eine max-width setzen und innerhalb dessen einfach Text und Preis links/rechts ausrichten? Entweder mit float oder mit flexbox, aber ich hätte hier auch keine Skrupel, eine Tabelle einzusetzen. Eine Speisekarte würde ich als tabellarische Daten betrachten wollen, und eine responsive Ansicht bei der irgendwann Name, Preis und Beschreibung untereinander stehen sollten braucht man hier wohl auch nicht.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - clusi
</div>
https://forum.selfhtml.org/self/2017/nov/8/leere-flaeche-kann-ich-nicht-entfernen/1708037#m1708037MudGuardhttp://www.andreas-waechter.de/2017-11-10T06:27:43Z2017-11-10T06:27:43ZFehlerberichtigungen<p>Hi,</p>
<blockquote>
<p><strong>Placeholder sind kein Ersatz für Labels!</strong></p>
</blockquote>
<p>In letzter Zeit habe ich einige User gesehen, die versucht haben, den Placeholder-Text mit der Maus zu markieren, um ihn löschen zu können. Oder nachdem der Cursor im Eingabefeld war, wiederholt auf die Delete-Taste gedrückt haben, um den Text wegzulöschen, was natürlich nicht funktioniert hat.</p>
<p>Die wollten ja nicht den "vorgegebenen" Text in der Eingabe mit drin haben …</p>
<p>cu,<br>
Andreas a/k/a MudGuard</p>