Frage zum Wiki-Artikel „dropdown“

[Tim]

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. 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.
lg. Tim

[Matthias Scharwies]

Servus!

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.

Hier ist ein Tutorial auf Deutsch: CSS/Anwendung und Praxis/Dropdown-Menüs mit CSS gestalten

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.

• Seite für die CSS-Eigenschaft background-image

• Wenn das Bild nicht geladen wird, ist oft falsch referenziert worden.

Ich hoffe jemand kann mir bei dem Problem helfen. lg. Tim

Herzliche Grüße

Matthias Scharwies

[Tim]

Ich habe jetzt

.dropbtn {
  background-image:("Bilder\wiki.png");
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.

[Matthias Scharwies]

Servus!

Ich habe jetzt

.dropbtn {
  background-image:("Bilder\wiki.png");
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.

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.

Herzliche Grüße

Matthias Scharwies

[Tim]

Ja in meinem Hauptordner "Alles" ist die CSS sowie die HTML sowie die JS Datei und der Ordner Bilder.

[Matthias Scharwies]

Servus! OOOOOps, jetzt erst gesehen:

.dropbtn {
  background-image:("Bilder\wiki.png");
   ...
}

probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.

 .dropbtn {
   background-image: url(...);
    ...
 }

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße

Matthias Scharwies

[Tim]

Trotzdem keine Veränderung :/

[Gunnar Bittersmann]

@@Tim

Trotzdem keine Veränderung :/

Beachte den Unterschied zwischen :/ und :\

Dein Webserver läuft vermutlich nicht auf Windows.

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Trotzdem keine Veränderung :/

Beachte den Unterschied zwischen :/ und :\

Hihi, okay, bei der Vorlage...

Dein Webserver läuft vermutlich nicht auf Windows.

...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.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Matthias Scharwies

.dropbtn {
  background-image:("Bilder\wiki.png");
   ...
}

probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.

 .dropbtn {
   background-image: url(...);
    ...
 }

Mit den drei Punkten hast du dir die Berechtigung für die grüne Farbe erschlichen‽ ;-)

LLAP 🖖

[Camping_RIDER]

Aloha ;)

Jetzt kommt Farbception :P

.dropbtn {
  background-image:("Bilder\wiki.png");
   ...
}

probiert aber das einzige was sich ändert ist das die Farbe jetzt so Hellgrau ist.

 .dropbtn {
   background-image: url(...);
    ...
 }

.dropbtn {
  background-image:url("Bilder/wiki.png");
   ...
}

Mit den drei Punkten hast du dir die Berechtigung für die grüne Farbe erschlichen‽ ;-)

Wo bleibt das Dunkelgrün für noch-richtiger? :P In Ermangelung habe ich weiß gewählt.

Grüße,

RIDER

[Matthias Apsel]

Hallo Camping_RIDER,

.dropbtn {
  background-image:url("Bilder/wiki.png");
   ...
}

Mit den drei Punkten hast du dir die Berechtigung für die grüne Farbe erschlichen‽ ;-)

Wo bleibt das Dunkelgrün für noch-richtiger? :P In Ermangelung habe ich weiß gewählt.

.dropbtn {
  background-image: url("Bilder/wiki.png");
  /* ggf. weitere Eigenschaften */
}

Du erkennst das Problem? ;-P

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

.dropbtn {
  background-image: url("Bilder/wiki.png");
  /* ggf. weitere Eigenschaften */
}

Du erkennst das Problem? ;-P

Das Problem besteht auch jetzt schon. Einige der von Syntax-Highlighter gesetzten Farben haben gegenüber dem Hintergrund zu wenig Kontrast^[1] und erfüllen nicht Level AA der WCAG.

Deshalb schrub ich ja auch hsl(…, 95%), nicht 90%.

Ich hatte schon mal erwogen, ein Ticket zu erstellen, das aber auf später verschoben.

LLAP 🖖

---

1. Tools: WebAIM Color Contrast Checker, Contrast Ratio von Lea Verou ↩︎

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hatte schon mal erwogen, ein Ticket zu erstellen, das aber auf später verschoben.

Später ist jetzt.

LLAP 🖖

[Tim]

Also ich schicke euch mal meinen gesamten quelltext:

HTML:

 <html>
 <head>
 <link rel="stylesheet" href="pos.css">
<link rel="stylesheet" href="style.css">
<script src="dropdown.js" type="text/javascript"></script>
 </head>
 <body>
 <div class="wiki">
 <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">WIKI</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="main_test1.html">test1</a>
    <a href="main_test2.html">test2</a>
    <a href="homepage.html">home</a>
  </div>
</div>
</div>
</body>
</html>

CSS:

 /* Dropdown Button */
.dropbtn {
  background-image: url("Bilder\wiki.png");
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color:black;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

javascript:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Und diese Bild "Bilder\wiki" soll halt der Button sein das Bild ist auch in der richtigen Größe für den Button etc.

[Matthias Apsel]

Hallo Tim,

Also ich schicke euch mal meinen gesamten quelltext:

online-Beispiel bitte

HTML:

doctype fehlt, Sprachangabe fehlt, title fehlt, eine Angabe zur Zeichencodierung fehlt siehe Grundgerüst „type="text/javascript“ wird nicht benötigt, „onclick“ ist bäh, siehe addEventListener, statt div und a besser eine ul, li und a verwenden

CSS:

 /* Dropdown Button */
.dropbtn {
  background-image: url("Bilder\wiki.png");
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

Angaben in Pixel sind bäh, weiß als Farbe ist gefährlich, wenn das Bild fehlt.

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

fokus nicht vergessen!

Die Anmerkungen sind sicher nicht vollständig.

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Also ich schicke euch mal meinen gesamten quelltext:

Sinnvoll wäre erst mal die bisherigen Antworten durchzulesen und umzusetzen.

   background-image: url("Bilder\wiki.png");

Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.

Gruss

MrMurphy

[JürgenB]

Hallo,

Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.

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.“

Gruß
Jürgen

[Auge]

Hallo

Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.

leider haben da die Browserhersteller eine Falle eingebaut: einige Browser machen aus den \ einen /, andere nicht.

Mir war immer so, dass es nur irgendein 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.

„Auf deiner Seite werden nicht alle Bilder angezeigt! Wieso, bei mir sehe ich alle.“

Hatten wir früher™ hier ja auch gerne mal. Mittlerweile kommt das aber selten vor. Jetzt ist es mal wieder soweit.

Tschö, Auge

[Tim]

Hallo

Sinnvoll wäre erst mal die bisherigen Antworten durchzulesen und umzusetzen.

Du hast immer noch den Backslash \ statt des Slash / in der Pfadangabe. Das funktioniert nicht.

Hab ich probiert.... Der Button ist dann nicht mehr Grau sondern Schwarz..

[Matthias Apsel]

Hallo Tim,

Hab ich probiert.... Der Button ist dann nicht mehr Grau sondern Schwarz..

Es hilft wohl nichts. Du musst die Seite zeigen.

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Der Button ist dann nicht mehr Grau sondern Schwarz

Das ist das Bild.

Gruss

MrMurphy

[Tim]

Nunja das bild ist nicht nur schwarz :D

[Gunnar Bittersmann]

@@Tim

Nunja das bild ist nicht nur schwarz :D

Für uns ist es das. Es liegt an dir, uns vom Gegenteil zu überzeugen.

LLAP 🖖

[MrMurphy1]

Hallo

Nunja das bild ist nicht nur schwarz

Aber links oben?

Ich vermute, dass das Bild deutlich größer als der Button ist und deshalb nur die obere linke Ecke angezeigt wird.

Gruss

MrMurphy