[ERLEDIGT] Background-color bis zum Ende von <div> erstellen

[Praktikant123]

Hallo, ich möchte den Hintergrund eines Links färben. Dabei soll die Hintergrundfarbe (weiß) bis zum Rand des Containers gehen, damit ein besserer Übergang zu der weißen Farbe entsteht.
Zum besseren Verständnis ist unten ein Bild angefügt.

HTML:

<!-- Linke Navigation -->
   <div id="Navigation_Links">
   
     <ul id="nav">
       <li class="expand"> &nbsp; &Uumlber das IQB
           <ul>
               <li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">Einbauerklaerung_2006-42-EG_Muster</a></li>
               <li><a href="PDF/a.pdf" class="embed-link">Einbauerklaerung_2006-42-EG_Muster </a></li>
               <li>Partner/Links</li>
           </ul>
       </li>
       <li>Personal</li>
       <li class="expand"> &nbsp; Bildungsstandards
           <ul>
               <li>Aufgabenbeispiele</li>
               <li>EMSE</li>
               <li class="expand"> &nbsp; Downloadserver
                   <ul>
                       <li>Audiofiles</li>
                       <li>Videofiles</li>
                   </ul>
               </li>
           </ul>
       </li>
       <li>VERA/Lernstandsvergleich</li>
       <li class="expand"> &nbsp; Arbeitsbereiche</li>
           <ul>
               <li>Testentwicklung</li>
               <li>Kompetenzerwerb</li>
               <li class="expand"> &nbsp; Implementation</li>
                   <ul>
                       <li>Was wird</li>
                       <li>denn eigentlich</li>
                       <li class="expand"> &nbsp; so alles</li>
                           <ul>
                               <li>test</li>
                               <li>test2</li>
                           </ul>
                       <li>implementiert??</li>
                   </ul>
               <li>Bildungsmonitoring</li>
               <li>Datenzentrum (FDZ)</li>
           </ul>
   </ul>
   
    </div>

CSS:

/*Linke Navigation -----------------------------------*/

   #nav {
       
       padding-left :5px;
    }
   
   a {
       text-decoration:none;
       color: black;
   }

   ul, li {
       list-style: none;       
   }

   #nav li {
       padding: 2px 2px 2px 15px;
       cursor: default;
       
       border-top:1px solid black;
       
    }
      
   #nav ul {
       display: none;
       background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
    
   }

   #nav li.expand {
       background: url(img/folder.png) no-repeat scroll 0px 0px transparent;   
       border-bottom: 1px solid #000;
       
   }

   .expanded {
       background: url(img/folder.open.png) no-repeat scroll 0px 2px transparent !important;
       border-bottom: 1px solid #000;
   
   }

   #nav li a:hover {
    text-decoration: none;
    color: #000000;
   
    }

   #nav ul a:hover {

    text-decoration: none;
    color: #000000;
    background-color: white;
   
   }

Wie lässt sich das am einfachsten erstellen?
M.f.G.

 

[scbawik]

Hallo, ich möchte den Hintergrund eines Links färben. Dabei soll die Hintergrundfarbe (weiß) bis zum Rand des Containers gehen, damit ein besserer Übergang zu der weißen Farbe entsteht.
Zum besseren Verständnis ist unten ein Bild angefügt.

HTML:

<!-- Linke Navigation -->
   <div id="Navigation_Links">
 
     <ul id="nav">
       <li class="expand"> &nbsp; &Uumlber das IQB
           <ul>
               <li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">Einbauerklaerung_2006-42-EG_Muster</a></li>
               <li><a href="PDF/a.pdf" class="embed-link">Einbauerklaerung_2006-42-EG_Muster </a></li>
               <li>Partner/Links</li>
           </ul>
       </li>
       <li>Personal</li>
       <li class="expand"> &nbsp; Bildungsstandards
           <ul>
               <li>Aufgabenbeispiele</li>
               <li>EMSE</li>
               <li class="expand"> &nbsp; Downloadserver
                   <ul>
                       <li>Audiofiles</li>
                       <li>Videofiles</li>
                   </ul>
               </li>
           </ul>
       </li>
       <li>VERA/Lernstandsvergleich</li>
       <li class="expand"> &nbsp; Arbeitsbereiche</li>
           <ul>
               <li>Testentwicklung</li>
               <li>Kompetenzerwerb</li>
               <li class="expand"> &nbsp; Implementation</li>
                   <ul>
                       <li>Was wird</li>
                       <li>denn eigentlich</li>
                       <li class="expand"> &nbsp; so alles</li>
                           <ul>
                               <li>test</li>
                               <li>test2</li>
                           </ul>
                       <li>implementiert??</li>
                   </ul>
               <li>Bildungsmonitoring</li>
               <li>Datenzentrum (FDZ)</li>
           </ul>
   </ul>
 
    </div>

CSS:

/*Linke Navigation -----------------------------------*/

   #nav {
     
       padding-left :5px;
    }
 
   a {
       text-decoration:none;
       color: black;
   }

   ul, li {
       list-style: none;     
   }

   #nav li {
       padding: 2px 2px 2px 15px;
       cursor: default;
     
       border-top:1px solid black;
     
    }
    
   #nav ul {
       display: none;
       background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
  
   }

   #nav li.expand {
       background: url(img/folder.png) no-repeat scroll 0px 0px transparent; 
       border-bottom: 1px solid #000;
     
   }

   .expanded {
       background: url(img/folder.open.png) no-repeat scroll 0px 2px transparent !important;
       border-bottom: 1px solid #000;
 
   }

   #nav li a:hover {
    text-decoration: none;
    color: #000000;
 
    }

   #nav ul a:hover {

    text-decoration: none;
    color: #000000;
    background-color: white;
 
   }

Wie lässt sich das am einfachsten erstellen?
M.f.G.

Padding statt auf das <li> Element auf das <a> Element anwenden.
<a> benötigt die Eigenschaft "display: block;" damit das funktioniert.

 

[SpiceLab]

Dass background-color direkt mit CSS zusammenhängt, dürfte Dir soweit bekannt sein.

Ergo, Sachfragen bitte im Fachforum stellen - Danke :)

Moderation: Von HTML nach CSS verschoben.

 

[Praktikant123]

Danke, dass mit dem Padding auf <a> hat geholfen.

Gibt es noch eine Möglichkeit, die Hintergrundfarbe über das orangene zu legen? Also quasi über das darunterliegende <div>.

 

[SpiceLab]

Gibt es noch eine Möglichkeit, die Hintergrundfarbe über das orangene zu legen? Also quasi über das darunterliegende <div>.

Wenn ich Dein Anliegen jetzt richtig interpretiere, muss lediglich für das <ul> der voreingestellte Randabstand zurückgesetzt werden.

#nav ul {
    display: none;
    background: url(img/dots.png) repeat-y scroll 10px 0 transparent;
    margin-left:0; /* Reset */
    padding-left:0; /* Reset */
}

https://jsfiddle.net/spicelab/zcm3fjjf/

 

[Praktikant123]

Habe bei allen id's das padding auf 0px zurückgesetzt. Leider passiert nichts.

 

[SpiceLab]

Habe bei allen id's das padding auf 0px zurückgesetzt. Leider passiert nichts.

Von den IDs war auch nicht die Rede, sondern vom <ul>-Element.

Mein gezeigter CSS-Ausschnitt ist doch eindeutig, und das Fiddle-Demo funktioniert einwandfrei.

 

[Praktikant123]

Oh Entschuldigung da war ich zu schnell und habe den Link nicht gesehen. Ja soweit ist es schon super, jedoch hätte ich gerne, dass der weiße Hintergrund nach rechts in die rechte Spalte mündet. Das passiert hier leider noch nicht.

 

[SpiceLab]

Oh Entschuldigung da war ich zu schnell und habe den Link nicht gesehen. Ja soweit ist es schon super, jedoch hätte ich gerne, dass der weiße Hintergrund nach rechts in die rechte Spalte mündet. Das passiert hier leider noch nicht.

Kann ich anhand Deines gezeigten CSS-Ausschnitts nicht nachvollziehen, denn die Ausdehnung der Links (Hintergrundfarbe) deckt sich in meinem Fiddle-Demo mit dem Rahmen der <li>-Elemente, und beide reichen bis zum rechten Rand.

html,body {margin:0;padding:0;}

würde in meinem Demo den letzten Restabstand tilgen.

Ergo, gibt es da in Deinem vollständigen CSS eine Regel, die das bewirkt. Oder Du zeigst uns eine alte Fassung, in der das display:block für <a> nicht implementiert ist.

 

[scbawik]

Oh Entschuldigung da war ich zu schnell und habe den Link nicht gesehen. Ja soweit ist es schon super, jedoch hätte ich gerne, dass der weiße Hintergrund nach rechts in die rechte Spalte mündet. Das passiert hier leider noch nicht.

Wie bereits geschrieben, <a> benötigt:

#nav a {display:block;}

 

[Praktikant123]

Ich glaube meine Idee ist noch nicht ganz klar. Habe nochmal ein neues Foto angefügt. Die Box ist ausgefüllt, was auch mein Ziel war, jedoch hätte ich gerne noch, das es rechts weiter über das orangene geht.

Danke und Gruß.

 

[scbawik]

Ich glaube meine Idee ist noch nicht ganz klar. Habe nochmal ein neues Foto angefügt. Die Box ist ausgefüllt, was auch mein Ziel war, jedoch hätte ich gerne noch, das es rechts weiter über das orangene geht.

Danke und Gruß.

Dann solltest du nochmal deinen aktuellen Stand posten.

 

[SpiceLab]

Ich glaube meine Idee ist noch nicht ganz klar.

Woher auch, wenn Du Deine Wünsche hier in Etappen äußerst?!

Habe nochmal ein neues Foto angefügt. Die Box ist ausgefüllt, was auch mein Ziel war, jedoch hätte ich gerne noch, das es rechts weiter über das orangene geht.

Wenn der orangene Hintergrund zu #Navigation_Links gehört, ist dort das Ende der Box erreicht, und ein negativer margin-right-Wert (z.B. margin-right:-10px) für die <li>-Elemente ist vonnöten, um deren Rahmen über den Boxenrand zu ziehen.

 

[Praktikant123]

Super danke! Genau das war es. Vielen Dank für eure Gedult.
Das war alles etwas schlecht strukturiert von mir.


Gruß.