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>