tag:forum.selfhtml.org,2005:/self Frage zum Wiki-Artikel „dropdown“ – SELFHTML-Forum 2016-12-14T11:32:13Z https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681189#m1681189 Tim TimOchsendorf984@aol.com 2016-11-25T11:41:34Z 2016-12-02T11:48:21Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo,<br> Ich habe mir von dieser Seite http://www.w3schools.com/css/css_dropdowns.asp den Quelltext für ein Dropdown Button kopiert. Nach langem suchen und ausprobieren schaffe ich es jedoch nicht den Grünen Hintergrund auf ein Bild zu setzen das ich erstellt habe um den Button besser aussehen zu lassen. Ich schaffe es die Hintergrundfarbe durch die .css Datei zu ändern, ich habe auch schon versucht background-image: url("link.png"); zu benutzen jedoch passiert da nichts. Ich hoffe jemand kann mir bei dem Problem helfen.<br> lg. Tim</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681190#m1681190 Matthias Scharwies mscharwies@selfhtml.org 2016-11-25T11:48:34Z 2016-12-02T15:56:03Z Frage zum Wiki-Artikel „dropdown“ <p>Servus!</p> <blockquote> <p>Hallo, Ich habe mir von dieser Seite http://www.w3schools.com/css/css_dropdowns.asp den Quelltext für ein Dropdown Button kopiert. Nach langem suchen und ausprobieren schaffe ich es jedoch nicht den Grünen Hintergrund auf ein Bild zu setzen das ich erstellt habe um den Button besser aussehen zu lassen.</p> </blockquote> <p>Hier ist ein Tutorial auf Deutsch: <a href="https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Dropdown-Men%C3%BCs_mit_CSS_gestalten" rel="nofollow noopener noreferrer">CSS/Anwendung und Praxis/Dropdown-Menüs mit CSS gestalten</a></p> <blockquote> <p>Ich schaffe es die Hintergrundfarbe durch die .css Datei zu ändern, ich habe auch schon versucht background-image: url("link.png"); zu benutzen jedoch passiert da nichts.</p> </blockquote> <ul> <li> <p>Seite für die CSS-Eigenschaft <a href="https://wiki.selfhtml.org/wiki/Background-image" rel="nofollow noopener noreferrer">background-image</a></p> </li> <li> <p>Wenn das Bild nicht geladen wird, ist oft <a href="https://wiki.selfhtml.org/wiki/HTML/Referenzieren_in_HTML" rel="nofollow noopener noreferrer">falsch referenziert worden</a>.</p> </li> </ul> <blockquote> <p>Ich hoffe jemand kann mir bei dem Problem helfen. lg. Tim</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681540#m1681540 Tim 2016-12-02T07:31:30Z 2016-12-02T15:52:59Z Frage zum Wiki-Artikel „dropdown“ <p>Also ich schicke euch mal meinen gesamten quelltext:</p> <p>HTML:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</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>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>pos.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>style.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>script</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>dropdown.js<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/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</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>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>wiki<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>div</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>dropdown<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>button</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></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>dropbtn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>WIKI<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myDropdown<span class="token punctuation">"</span></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>dropdown-content<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>a</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>main_test1.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>main_test2.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>test2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>homepage.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>CSS:</p> <pre><code class="block language-css"> <span class="token comment">/* Dropdown Button */</span> <span class="token selector">.dropbtn</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\wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Dropdown button on hover & focus */</span> <span class="token selector">.dropbtn:hover, .dropbtn:focus</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* The container <div> - needed to position the dropdown content */</span> <span class="token selector">.dropdown</span> <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">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Dropdown Content (Hidden by Default) */</span> <span class="token selector">.dropdown-content</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f9f9f9<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 8px 16px 0px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Links inside the dropdown */</span> <span class="token selector">.dropdown-content 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">padding</span><span class="token punctuation">:</span> 12px 16px<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> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Change color of dropdown links on hover */</span> <span class="token selector">.dropdown-content a:hover</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">}</span> <span class="token comment">/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */</span> <span class="token selector">.show</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span><span class="token punctuation">}</span> </code></pre> <p>javascript:</p> <pre><code class="block language-js"><span class="token comment">/* When the user clicks on the button, toggle between hiding and showing the dropdown content */</span> <span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"myDropdown"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">"show"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Close the dropdown menu if the user clicks outside of it</span> window<span class="token punctuation">.</span><span class="token function-variable function">onclick</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">matches</span><span class="token punctuation">(</span><span class="token string">'.dropbtn'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> dropdowns <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">"dropdown-content"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> i<span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> dropdowns<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> openDropdown <span class="token operator">=</span> dropdowns<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>openDropdown<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> openDropdown<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'show'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Und diese Bild "Bilder\wiki" soll halt der Button sein das Bild ist auch in der richtigen Größe für den Button etc.</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681192#m1681192 Tim TimOchsendorf984@aol.com 2016-11-25T12:37:34Z 2016-12-02T15:55:42Z Frage zum Wiki-Artikel „dropdown“ <p>Ich habe jetzt</p> <pre><code class="block language-css"><span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token string">"Bilder\wiki.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681194#m1681194 Matthias Scharwies mscharwies@selfhtml.org 2016-11-25T12:44:13Z 2016-12-02T15:55:36Z Frage zum Wiki-Artikel „dropdown“ <p>Servus!</p> <blockquote> <p>Ich habe jetzt</p> <pre><code class="block language-css"><span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token string">"Bilder\wiki.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.</p> </blockquote> <p>Dann lädt deine Grafik nicht. Hast du richtig referenziert? Das bedeutet, dass der Ordner Bilder im gleichen Verzeichnis wie deine CSS-Datei ist. Der Ordner muss groß geschrieben sein, Bildname und typ klein.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681195#m1681195 Tim TimOchsendorf984@aol.com 2016-11-25T12:47:20Z 2016-12-02T15:55:29Z Frage zum Wiki-Artikel „dropdown“ <p>Ja in meinem Hauptordner "Alles" ist die CSS sowie die HTML sowie die JS Datei und der Ordner Bilder.</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681197#m1681197 Matthias Scharwies mscharwies@selfhtml.org 2016-11-25T12:53:02Z 2016-12-02T15:55:23Z Frage zum Wiki-Artikel „dropdown“ <p>Servus! OOOOOps, jetzt erst gesehen:</p> <blockquote> <blockquote> <pre><code class="block bad language-css"><span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token string">"Bilder\wiki.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> <p>probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.</p> </blockquote> </blockquote> <pre><code class="block good language-css"> <span class="token selector">.dropbtn</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 punctuation">)</span></span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681199#m1681199 Tim TimOchsendorf984@aol.com 2016-11-25T13:02:17Z 2016-12-02T15:55:14Z Frage zum Wiki-Artikel „dropdown“ <p>Trotzdem keine Veränderung :/</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681202#m1681202 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-11-25T15:36:25Z 2016-12-02T15:54:53Z Frage zum Wiki-Artikel „dropdown“ <p>@@Matthias Scharwies</p> <blockquote> <blockquote> <blockquote> <pre><code class="block bad language-css"><span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token string">"Bilder\wiki.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> <p>probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.</p> </blockquote> </blockquote> <pre><code class="block good language-css"> <span class="token selector">.dropbtn</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 punctuation">)</span></span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Mit den drei Punkten hast du dir die Berechtigung für die grüne Farbe erschlichen‽ ;-)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681201#m1681201 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-11-25T15:32:39Z 2016-12-02T15:55:07Z Frage zum Wiki-Artikel „dropdown“ <p>@@Tim</p> <blockquote> <p>Trotzdem keine Veränderung :/</p> </blockquote> <p>Beachte den Unterschied zwischen :/ und :\</p> <p>Dein Webserver läuft vermutlich nicht auf Windows.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681223#m1681223 Camping_RIDER janosch.zoller@gmx.de http://www.campingrider.de 2016-11-25T23:12:21Z 2016-12-02T15:55:01Z Frage zum Wiki-Artikel „dropdown“ <p>Aloha ;)</p> <blockquote> <blockquote> <p>Trotzdem keine Veränderung :/</p> </blockquote> <p>Beachte den Unterschied zwischen :/ und :\</p> </blockquote> <p>Hihi, okay, bei der Vorlage...</p> <blockquote> <p>Dein Webserver läuft vermutlich nicht auf Windows.</p> </blockquote> <p>...frag ich mich trotzdem, ob das einen Unterschied macht. Auch unter Windows haben URLs / und nie \ - oder irre ich da? \ findet man allenfalls in absoluten Pfadangaben auf Windows-Rechnern, aber die sollten mMn in CSS auch keine Rolle spielen.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">Facebook</a> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681222#m1681222 Camping_RIDER janosch.zoller@gmx.de http://www.campingrider.de 2016-11-25T22:10:19Z 2016-12-02T15:54:45Z Frage zum Wiki-Artikel „dropdown“ <p>Aloha ;)</p> <p>Jetzt kommt Farbception :P</p> <blockquote> <blockquote> <blockquote> <blockquote> <pre><code class="block bad language-css"><span class="token selector">.dropbtn</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token string">"Bilder\wiki.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> <p>probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.</p> </blockquote> </blockquote> <pre><code class="block good language-css"> <span class="token selector">.dropbtn</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 punctuation">)</span></span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> </blockquote> </blockquote> <pre><code class="block language-css"><span class="token selector">.dropbtn</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/wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Mit den drei Punkten hast du dir die Berechtigung für die grüne Farbe erschlichen‽ ;-)</p> </blockquote> <p>Wo bleibt das Dunkelgrün für noch-richtiger? :P In Ermangelung habe ich weiß gewählt.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="http://www.tsviewer.com/index.php?page=ts_viewer&ID=1060332" rel="nofollow noopener noreferrer">Facebook</a> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681229#m1681229 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-11-26T07:48:15Z 2016-12-02T15:54:37Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo Camping_RIDER,</p> <blockquote> <pre><code class="block language-css"><span class="token selector">.dropbtn</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/wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> ... <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Mit den drei Punkten hast du dir die Berechtigung für die grüne Farbe erschlichen‽ ;-)</p> </blockquote> <p>Wo bleibt das Dunkelgrün für noch-richtiger? :P In Ermangelung habe ich weiß gewählt.</p> </blockquote> <pre><code class="block language-css"><span class="token selector">.dropbtn</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/wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* ggf. weitere Eigenschaften */</span> <span class="token punctuation">}</span> </code></pre> <p>Du erkennst das Problem? ;-P</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681231#m1681231 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-11-26T08:18:17Z 2016-12-02T15:52:48Z Frage zum Wiki-Artikel „dropdown“ <p>@@Matthias Apsel</p> <blockquote> <pre><code class="block language-css"><span class="token selector">.dropbtn</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/wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token comment">/* ggf. weitere Eigenschaften */</span> <span class="token punctuation">}</span> </code></pre> <p>Du erkennst das Problem? ;-P</p> </blockquote> <p>Das Problem besteht auch jetzt schon. Einige der von Syntax-Highlighter gesetzten Farben haben gegenüber dem Hintergrund zu wenig Kontrast<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> und erfüllen nicht Level AA der WCAG.</p> <p>Deshalb <a href="https://forum.selfhtml.org/meta/2016/nov/15/code-bloecke-in-markdown-mit-rotem-hintergrund/1680076#m1680076" rel="noopener noreferrer">schrub</a> ich ja auch hsl(…, <strong>95%</strong>), nicht 90%.</p> <p>Ich hatte schon mal erwogen, ein Ticket zu erstellen, das aber auf später verschoben.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Tools: <a href="http://webaim.org/resources/contrastchecker/" rel="nofollow noopener noreferrer">WebAIM Color Contrast Checker</a>, <a href="https://leaverou.github.io/contrast-ratio/" rel="nofollow noopener noreferrer">Contrast Ratio</a> von Lea Verou <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1682553#m1682553 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-14T11:32:13Z 2016-12-14T11:32:25Z Frage zum Wiki-Artikel „dropdown“ <p>@@Gunnar Bittersmann</p> <blockquote> <p>Ich hatte schon mal erwogen, ein Ticket zu erstellen, das aber auf später verschoben.</p> </blockquote> <p>Später ist <a href="https://github.com/ckruse/cforum/issues/675" rel="noopener noreferrer">jetzt</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681541#m1681541 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-02T07:42:59Z 2016-12-02T15:53:09Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo Tim,</p> <blockquote> <p>Also ich schicke euch mal meinen gesamten quelltext:</p> </blockquote> <p>online-Beispiel bitte</p> <blockquote> <p>HTML:</p> </blockquote> <p>doctype fehlt, Sprachangabe fehlt, title fehlt, eine Angabe zur Zeichencodierung fehlt siehe <a href="https://wiki.selfhtml.org/wiki/Grundger%C3%BCst#Grundger.C3.BCst_einer_HTML-Datei" rel="nofollow noopener noreferrer">Grundgerüst</a> „type="text/javascript“ wird nicht benötigt, „onclick“ ist bäh, siehe <a href="https://wiki.selfhtml.org/wiki/AddEventListener" rel="nofollow noopener noreferrer">addEventListener</a>, statt div und a besser eine ul, li und a verwenden</p> <blockquote> <p>CSS:</p> <pre><code class="block language-css"> <span class="token comment">/* Dropdown Button */</span> <span class="token selector">.dropbtn</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\wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Angaben in Pixel sind bäh, weiß als Farbe ist gefährlich, wenn das Bild fehlt.</p> <blockquote> <pre><code class="block language-css"><span class="token comment">/* Change color of dropdown links on hover */</span> <span class="token selector">.dropdown-content a:hover</span> <span class="token punctuation">{</span><span class="token property">background-color</span><span class="token punctuation">:</span> #f1f1f1<span class="token punctuation">}</span> </code></pre> </blockquote> <p>fokus nicht vergessen!</p> <p>Die Anmerkungen sind sicher nicht vollständig.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681547#m1681547 MrMurphy1 2016-12-02T09:06:11Z 2016-12-02T15:53:17Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo</p> <blockquote> <p>Also ich schicke euch mal meinen gesamten quelltext:</p> </blockquote> <p>Sinnvoll wäre erst mal die bisherigen Antworten durchzulesen und umzusetzen.</p> <pre><code class="block 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\wiki.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> </code></pre> <p>Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.</p> <p>Gruss</p> <p>MrMurphy</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681549#m1681549 JürgenB http://www.j-berkemeier.de 2016-12-02T09:30:09Z 2016-12-02T15:53:26Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo,</p> <blockquote> <p>Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.</p> </blockquote> <p>leider haben da die Browserhersteller eine Falle eingebaut: einige Browser machen aus den \ einen /, andere nicht. „Auf deiner Seite werden nicht alle Bilder angezeigt! Wieso, bei mir sehe ich alle.“</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681560#m1681560 Tim 2016-12-02T11:16:18Z 2016-12-02T15:53:50Z Frage zum Wiki-Artikel „dropdown“ <blockquote> <p>Hallo</p> <p>Sinnvoll wäre erst mal die bisherigen Antworten durchzulesen und umzusetzen.</p> <p>Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.</p> </blockquote> <p>Hab ich probiert.... Der Button ist dann nicht mehr Grau sondern Schwarz..</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681550#m1681550 Auge 2016-12-02T09:39:10Z 2016-12-02T15:53:37Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo</p> <blockquote> <blockquote> <p>Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.</p> </blockquote> <p>leider haben da die Browserhersteller eine Falle eingebaut: einige Browser machen aus den \ einen /, andere nicht.</p> </blockquote> <p>Mir war immer so, dass es nur <em><strong>i</strong></em>rgend<em><strong>e</strong></em>in Browser ist, der von sich aus mit dem Backslash klar kommt, da einzelne seiner Koponenten auch innerhalb des Betriebssystems und damit des Dateisystems zum Einsatz kommen.</p> <blockquote> <p>„Auf deiner Seite werden nicht alle Bilder angezeigt! Wieso, bei mir sehe ich alle.“</p> </blockquote> <p>Hatten wir früher™ hier ja auch gerne mal. Mittlerweile kommt das aber selten vor. Jetzt ist es mal wieder soweit.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.<br> Wolfgang Schneidewind <strong>*prust*</strong> </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681564#m1681564 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-12-02T11:27:24Z 2016-12-02T11:27:24Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo Tim,</p> <blockquote> <p>Hab ich probiert.... Der Button ist dann nicht mehr Grau sondern Schwarz..</p> </blockquote> <p>Es hilft wohl nichts. Du musst die Seite zeigen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681568#m1681568 MrMurphy1 2016-12-02T11:41:22Z 2016-12-02T15:56:27Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo</p> <blockquote> <p>Der Button ist dann nicht mehr Grau sondern Schwarz</p> </blockquote> <p>Das ist das Bild.</p> <p>Gruss</p> <p>MrMurphy</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681580#m1681580 Tim 2016-12-02T13:49:44Z 2016-12-02T15:54:06Z Frage zum Wiki-Artikel „dropdown“ <p>Nunja das bild ist nicht nur schwarz :D</p> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681582#m1681582 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2016-12-02T13:53:26Z 2016-12-02T15:54:19Z Frage zum Wiki-Artikel „dropdown“ <p>@@Tim</p> <blockquote> <p>Nunja das bild ist nicht nur schwarz :D</p> </blockquote> <p>Für uns ist es das. Es liegt an dir, uns vom Gegenteil zu überzeugen.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“</em> —Johann Wolfgang von Goethe </div> https://forum.selfhtml.org/self/2016/nov/25/frage-zum-wiki-artikel-dropdown/1681583#m1681583 MrMurphy1 2016-12-02T14:00:04Z 2016-12-02T15:54:26Z Frage zum Wiki-Artikel „dropdown“ <p>Hallo</p> <blockquote> <p>Nunja das bild ist nicht nur schwarz</p> </blockquote> <p>Aber links oben?</p> <p>Ich vermute, dass das Bild deutlich größer als der Button ist und deshalb nur die obere linke Ecke angezeigt wird.</p> <p>Gruss</p> <p>MrMurphy</p>