Tim: Frage zum Wiki-Artikel „dropdown“

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

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

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

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. 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.

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

        --
        Es gibt viel zu tun: ToDo-Liste
        1. Ja in meinem Hauptordner "Alles" ist die CSS sowie die HTML sowie die JS Datei und der Ordner Bilder.

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

          --
          Es gibt viel zu tun: ToDo-Liste
          1. Trotzdem keine Veränderung :/

            1. @@Tim

              Trotzdem keine Veränderung :/

              Beachte den Unterschied zwischen :/ und :\

              Dein Webserver läuft vermutlich nicht auf Windows.

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
              1. 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

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          2. @@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 🖖

            --
            „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            1. 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

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
              1. 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

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. @@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 🖖

                  --
                  „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe

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

                  1. @@Gunnar Bittersmann

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

                    Später ist jetzt.

                    LLAP 🖖

                    --
                    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  2. 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.

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

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    2. 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

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

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

          --
          Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
          Wolfgang Schneidewind *prust*
      2. 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..

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

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. Hallo

          Der Button ist dann nicht mehr Grau sondern Schwarz

          Das ist das Bild.

          Gruss

          MrMurphy

          1. Nunja das bild ist nicht nur schwarz :D

            1. @@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 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            2. 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