liebewinter: Farbe auf eine Seite kurze machen

hallo , ich versuche die Farbe der mit Hover bekomme auf dem Linke seite , kurze zu machen , wie auf dem screenshot zeigt , auf den Wort Computer , wird die Farbe aus dem Fenter gezeigt.. bild screenshot

Kannt bitte jemand hilfe und dieser Probleme zu lösen , Danke !

  1. Ohne Beispiel bzw Code wird es schwer. Keiner weiß wie dein Code derzeit ausschaut.

    1. sorry .. my code von codepen....

      Mein Css Code:

      
      body {
       
          display: grid;
          display: -ms-grid; 
         
          background-color: #ebf5d7;
          grid-gap: 5px;
          grid-template-columns: 9% 73% 17%;
        
          grid-template-areas:
      
            "header   header    header"
            "nav      nav          nav"
            "linkBox  main     infoBox"
            "footer   footer   footer";
           
          -ms-grid-columns: 8% 74% 18%;
          -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
          -ms-grid-gap: 5px;
      }
          
          
          
      
      body > header {
      	grid-area: header;
      	-ms-grid-column: 1;
          -ms-grid-column-span: 3;
          -ms-grid-row: 1;
          -ms-grid-row-span: 1;
      
        background-image: url("Bilder/f409784856.png");
        background-repeat: no-repeat;
        padding: 80px;
        margin-bottom: -8px; 
          
      }
      
      body > nav {
      	grid-area: nav;
      	-ms-grid-column: 1/3;
          -ms-grid-column-span: 3;
          -ms-grid-row: 2;
      
         background-color: #d2f5c4;
         margin: 1px;
      
      }
      
      body > #externalLinks {
      	grid-area: linkBox;
      	-ms-grid-column: 1;
          -ms-grid-row: 3;
          -ms-grid-row-span: 5;
          grid-template-columns: 1;
          grid-template-rows: 3/4;
          margin: 1px;
          background-color:  #d2f3c6;
      	
      }
      body > main {
      	grid-area: main;
      	display: block; 
          -ms-grid-column: 2; 
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
          margin: 1px;
      
         background-color: #eaf6e5;
      }
      
      body > #furtherInformation {
      	grid-area: infoBox;
          -ms-grid-column: 3;
          -ms-grid-column-span: 3;
          -ms-grid-row: 3;
          -ms-grid-row-span: 3;
         
          margin: 1px;
          background-color: #d2f3c6;    
      }
      
      body > footer {
      	grid-area: footer;
      	-ms-grid-column: 1;
          -ms-grid-column-span: 3;
          -ms-grid-row: 6;
          -ms-grid-row-span: 6;
          
          background-color: #99ee7a;
      
      }
      
      
      
      
      
      
      
      /* Nav  */
      
      nav {background-color: #d2f5c4;}
      
      nav a{
          color: black;
          text-decoration: none;
      	display: inline;
      	padding: 0px 8px;
      	font-size: 17px;
      	font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
      }
      
      nav ul {list-style-type: none;}
      
      nav li {display: block;display:inline-block;}
      
      
      /* ExternalLinks  */
      
      #externalLinks a	{
      
          text-decoration: none;
      	display: block;
      	text-align: center;
      
          font-size: 15px;
      	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
      }
      
      #externalLinks ul {
      	list-style-type: none;
      	margin: 5px;
          padding: 0;
          margin: -12;
      }
      
      #externalLinks li{float: left}
      
      /* Geben an Link1, link2, link3 ; Farbe , Padding, .... */
      
      
      li a, .dropbtn {
          display: block;
          color: #000;
          padding: 8px 16px;
          text-decoration: none;
      
      }
      
      li a:hover, .dropdown:hover .dropbtn {background-color: #f1ebeb;}
      
      .dropdown-content {
          display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
          font-size: 12px;
      	 position: absolute; /* die stellung folgt der Erste Link(li) */
          background-color: #f1f1f1 ;
          min-width: 160px; /* macht größer die Inneren Links */
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe  */
          z-index: 1;    /*  Zeigen die Ordnung wie die Links gezeigt werden... */
      
      }
      
      .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;               /* Bekomme die Liks keine Unten Stricht ....*/
          display: block;
      }
      
      .dropdown-content a:hover {
      background-color: #9f9e9e;
      
      }
      /* Offnen die Innere Links */
      
      .dropdown:hover .dropdown-content {
          display: block;
      	left: 9em;       /* zeigt wo dem innere link fenster gezeigt wird */
          top: 20em;       /* zeigt wo dem innere link fenster gezeigt wird */
         
      
      }
      
      /*    Main           */
      
      input, textarea{
      			background:#d9d9d9;
      			border:1px solid rgba(220,220,220,0.75);
      			font:inherit;
      			border-radius:0.2941em;/*5px;*/
      			padding:0.4118em;/*7px;*/
      			/*farbigen Rahmen in Chrome und Safari abschalten.*/
      			outline:none;
      }
      
      input:focus, textarea:focus{
      			background:#fff;
      			border:1px solid #000;
      	        outline: none; /* einige Browser add line auf input , das verhindert es... */
               
      }
      input[type=submit]{
      			background:#be633c;
      			border:none;
      			color:#fff;
      			border-radius:50% 50%;
      			box-shadow:inset 0 0 1em #fb9d23;
      			padding:0.5882em;/*10px*/
      }
      input[type=submit]:focus, input[type=submit]:active{
      		 background-color:#A33202;
      }
      
      
      
      
      /* Footer  */
      
      #copry {
      	overflow: auto;
      	font-size: 10px;
          list-style-type: none;
      	font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
          
      }
      
      #img1 {float: left; margin: 5px;  }
      #copry a {text-decoration: none; margin-bottom: 3px;}
      #copry p {font-size: 10px; margin-bottom: 0px; }
      
      /*    Komment Button */
      
      #comment:hover { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
      
      #comment {font-size: 11px;} /*  Button from comment */
      
      #form {font-size: 14px;} /* size from comment window */
      
      #adderiren {    /* Farbe für 'Add a new comment' */
                   
      	     
      	     width: 50px;
      	     color:#006600;
              padding: 8px 0px 5px 5px; 
                   
                   
      }
      
      
      
      
      
      

      Meine html code;

      <aside id="externalLinks">
      <ul>
        <li class="dropdown">
          <a href="#" class="dropbtn">Computer</a>
           <div class="dropdown-content">
             <a href="windows.php">Windows</a>
             <a href="#">Link 2</a>
             <a href="#">Link 3</a>
             <a href="#">Link 4</a>
      	  </div>
        <li><a href="#">News</a></li>
        <li><a href="#">Bucher</a></li>
      
       </ul>
      
      </aside>
      

      ich habe auch versuche Ein Bissen mit Padding zu machen , so..

      #externalLinks ul {
      
          list-style-type: none;
      	  margin: 5px;
          padding: 0px;
          margin-left: -12px;
      }
      

      aber ohne erfolgt...

  2. Hallo liebewinter,

    ich versuche die Farbe der mit Hover bekomme auf dem Linke seite , kurze zu machen

    es tut mir leid, aber diese Beschreibung verstehe ich nicht. Das ist sehr merkwürdig formuliert, ich weiß nicht was Du meinst. Ich weiß, dass Dein Deutsch nicht so gut ist, bitte versuche mal, das anders zu formulieren.

    Was ist das Problem? Die falsche Farbe? Die Größe des grauen Rechtecks?

    Einen Fehler sehe ich: Das <li>, das <a>Computer</a> enthält, hat kein </li>. Vielleicht ist das schon das Problem.

    Denke auch an die Leute mit Tastatur. Nicht jeder Anwender kann :hover erzeugen. Du musst auch :focus unterstützen.

    Rolf

    --
    sumpsi - posui - clusi
    1. Hallo,

      schau mal ins Beispiel:
      https://codepen.io/mezb/pen/rPaeaR

      Wenn du mit der Maus über Computer fährst geht der Hover links über den Rand und dieses soll soweit ich es verstanden haben behoben werden.

      1. das ist das Problem....

        1. Versuch es mal mit diesen beiden neuen Angaben

          .dropdown a {
              padding-left: 0;
          }
          
          li.dropdown {
              margin-left: 12px;
          }
          
    2. Ich weiß, dass Dein Deutsch nicht so gut ist, bitte versuche mal, das anders zu formulieren.

      Viel Danks ! , versuche es...

      ich versuche der Größer(die Farbe) von meinem Hover , kleine auf linke seite machen...

      Was ist das Problem? Die falsche Farbe? Die Größe des grauen Rechtecks?

      wie mein Screenshot von Oben sehen kannst , die Hover Farbe auf linke Seite ist ausßen von dem Fenster , deshalb möchte ich die Hover Farbe auf linke Seite , kurze machen... Gestern habe 10 Stunden gegeben um dieser probleme zu lösen , aber ohne erfolgt ☹

      Einen Fehler sehe ich: Das <li>, das <a>Computer</a> enthält, hat kein </li>. Vielleicht ist das schon das Problem.

      jetzt habe so gemacht..

      <ul>
        <li class="dropdown">
          <a href="#" class="dropbtn">Computer</a>
           <div class="dropdown-content">
             <a href="windows.php">Windows</a>
             <a href="#">Link 2</a>
             <a href="#">Link 3</a>
             <a href="#">Link 4</a>
      	    </div>
           </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Bucher</a></li>
      </ul>
      

      aber das probleme bleibt....

      Denke auch an die Leute mit Tastatur. Nicht jeder Anwender kann :hover erzeugen. Du musst auch :focus unterstützen.

      Nach ich dieser Probleme lösen , ende meine Media Query , und der nächste Schritte wird Touchscreen... ☺️

      1. Hallo ,

        Hover Farbe auf linke Seite ist ausßen von dem Fenster

        Entschuldige. Meine Brille taugt wohl nicht mehr. Und ich müsste sie mal wieder aufsetzen. In den Pen habe ich nicht hineingeschaut und im Screenshot habe ich es nicht gesehen.

        Vermutlich hat Bernd recht, dass die negativen Margins zum Problem führen.

        Rolf

        --
        sumpsi - posui - clusi
        1. und was kann mache um der Text ganz linke zu bringen ?

          ich habe versuche mit float: left; aber der text bleibt in der Mitte ..ich möchte der frei Platz vom Tag <aside> zu <mein> Tag bringen..

          1. Hallo ... Joseba? (sagt CodePen :) ) ,

            in solchen Fällen öffnet man die Entwicklerwerkzeuge und schaut das Element an, das sich falsch verhält.

            Ohne float:left sind die Texte in der Mitte, richtig, das liegt daran dass Du

            #externalLinks a {
               text-align:center;
            }
            

            geschrieben hast. Mit dem float sind die Menüpunkte nicht mehr untereinander, das ist auch schlecht.

            Wenn Dich dieses center stört, dann lass es einfach weg. Wenn Du nur die Menüpunkte des dropdown-Menüs zentrieren willst, dann setze

            .dropdown-content a {
               text-align:center;
            }
            

            Statt display:inline-block in der Navigation könntest Du auch display:flex auf nav ul setzen.

            Die Klassen "dropdown" und "dropbtn" brauchst Du nicht, wenn ich das richtig sehe. Statt dessen einfach li und a verwenden; eventuell noch #externalLinks davor schreiben.

            Statt <div class="dropdown-content"> könnte man überlegen, <ul class="dropdown-content"> zu schreiben und die a Elemente in <li> zu kapseln. Es ist eine Liste von Menüpunkten. Was ist, wenn das CSS nicht geladen wird? Dann soll das ja auch wie eine Liste aussehen. Dein CSS reicht völlig aus, das muss dafür nicht geändert werden.

            Rolf

            --
            sumpsi - posui - clusi
            1. Hallo ... Joseba? (sagt CodePen :) )

              ja , ich heiße Joseba…

              ich bedanke mich dir für deine bemüht ! , ich bin seit zwei Tage mit diesem Probleme , und habe "Ein Bissen" gesucht , ich denke gibt es keine lösung auf meiner Probleme , das ist , etwas der macht die hover Farbe seine größer zu verendert... , deshalb und wie ich denke ist nicht so "Traumatische" wie meine website aussiehst , ich möchte so lasen....

              Ich wünsche dir eine schöne Wochenende !

              1. Hallo Joseba,

                wieso gibt es keine Lösung? Wenn Du das hier im Codepen änderst:

                • Zeile 94: text-align: center; entfernen
                • Zeile 104: margin: 0 -12px; ändern zu margin:0;
                • Zeile 107: Weg damit

                dann ist es doch was Du brauchst, oder?

                Rolf

                --
                sumpsi - posui - clusi
                1. dann ist es doch was Du brauchst, oder?

                  jaaaaaaaaaa , viellllllll Danks !

                  ich wünsche dir eine schöneeee Wochenende !!