kostenloser Webspace werbefrei: lima-city

ul Liste bullet Farbe

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   tagomat

   tagomat hat kostenlosen Webspace.

   8:49, 29.10.2013

   Hallo
   
   ich habe eine Seite mit hellem Hintergrund.
   darin ist eine ul Liste (mit li Elementen)
   die <li> Elemente haben z.T. einen sehr dunklen hintergrund
   und deshalb habe ich darin die Text-Farbe auf weiß (#FFFFFF)
   
   Beispiel:
   

   <ul>
     <li>normaler Text</li>
     <li style="background:#000000; color:#FFFFFF;">weisser Text</li>
     <li>normaler Text</li>
   </ul>

   
   
   aber wenn ich das mache, mit <li> Elementen mit weiß als Text-Farbe
   dann sind die die bullets (vor dem li Element) auch weiß und somit unsichtbar
   
   ... also in dem Beispiel oben ist beim 2ten <li> Element ist auch bullet weiß ... ?!
   
   Wie kann ich es machen, dass die List-Style Zeichen (bullet) immer die gleiche Farbe haben ?
   
   

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. pcw

   pcw hat kostenlosen Webspace.

   9:29, 29.10.2013

   Hallo
   
   Du könntest z.B. den Text im li-element in ein span-tag packen und nur dem <span> die weiße Farbe geben.
   
   Dein Beispiel (abgewandelt):
   

   <ul>
     <li>normaler Text</li>
     <li><span style="background:#000000; color:#FFFFFF;">weisser Text</span></li>
     <li>normaler Text</li>
   </ul>

   
   
   oder halt list-style: none und den Punkt als Hintergrundbild im <li>
   
4. Autor dieses Themas

   tagomat

   tagomat hat kostenlosen Webspace.

   10:17, 29.10.2013

   Hallo
   
   das mit dem Farben in <span> definieren habe ich jetzt mal ausprobiert,
   ... funktioniert zwar, dass das bullet dabei "sichtbar" bleibt, abder das
   Problem dabei ist, dass der <span> nur über die Text-Länge wirkt
   aber meine <li> Elemente sollen eine feste (gleichbleibende) Breite 250px; haben
   
   

   li { 
     margin: 2px; 
     padding: 4px; 
     width:250px; 
   }

   
   
   habe auch CSS width in <span> versucht,
   

   <li><span style="background:#000000; color:#FFFFFF; width:250px;">weisser Text</span></li>

   
   aber das width:250px; greift in einem <span> wohl nicht, Hintergrund bleibt nur für Text-Länge.
   
   
   Wie mache ich den Punkt für <li> Elemente als Hintergrundbild
   so dass er mittig vor dem <li> steht und außerhalb des Hintergrund ist ?
   
   

   <style type="text/css">
   <!--
   
   ul { 
     list-style-type:none; 
     margin:2px; 
     padding:2px;  
     background:#DEDEDE; 
     width:300px; 
   }
   
   li { 
     margin: 6px; 
     padding: 4px 2px 4px 30px; 
     width:250px; 
     color:#000000; 
     background:#FFFFFF url('bullet1.gif') no-repeat left center; 
   }
   
   .darkli { 
     margin: 6px; 
     padding: 4px 2px 4px 30px; 
     width:250px; 
     color:#FFFFFF; 
     background:#000000 url('bullet1.gif') no-repeat left center; 
   }
   
   -->
   </style>
   
   
   <br />
   <br />
   
   <ul>
     <li>normaler Text</li>
     <li class="darkli">weisser Text</li>
     <li>normaler Text</li>
     <li>normaler Text</li>
     <li class="darkli">weisser Text</li>
     <li>normaler Text</li>
   </ul>
   
   <br />
   <br />

   
   
   Beispiel / Vorschau siehe HIER: http://jsfiddle.net/yy5E7/
   
   die Datei bullet.gif ist ein roter Kreis in einer 20 x 20 Pixel GIF ... das klappt auch soweit ..
   aber wenn <li> Element mit class="darkli" versehen ist,
   dann ist der bullet auch innerhalb des dunklen Hintergrund, soll aber davor
   
   ... lieber wäre mit ja eine Lösung ohne eigene Hintergrund-Grafik,
   also direkt als list-style-type ohne in jedes <li> eine Grafik zu zimmern.
   
   

5. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   11:37, 29.10.2013

   tagomat schrieb:
   Wie mache ich den Punkt für <li> Elemente als Hintergrundbild
   so dass er mittig vor dem <li> steht und außerhalb des Hintergrund ist ?
   
   ...
   
   die Datei bullet.gif ist ein roter Kreis in einer 20 x 20 Pixel GIF ... das klappt auch soweit ..
   aber wenn <li> Element mit class="darkli" versehen ist,
   dann ist der bullet auch innerhalb des dunklen Hintergrund, soll aber davor
   
   ... lieber wäre mit ja eine Lösung ohne eigene Hintergrund-Grafik,
   also direkt als list-style-type ohne in jedes <li> eine Grafik zu zimmern.
   

   
   
   Wie wäre es damit:
   
   

   ul {
      list-style-image:url(bullet.gif;
   }

   
   
   
6. Autor dieses Themas

   tagomat

   tagomat hat kostenlosen Webspace.

   16:02, 29.10.2013

   ja cool
   
   list-style-image kannte ich noch garnicht
   
   es funktioniert ... siehe http://jsfiddle.net/yy5E7/1/
   
   Danke

7. mein-wunschname

   mein-wunschname hat kostenlosen Webspace.

   22:55, 30.10.2013

   Auch wenn das hier nur am Rande eine Rolle spielt: Wenn eine gleichmäßig abwechselnde Hervorhebung ohne Einführung einer Klasse umsetzen will, dann kann man mit

   li:nth-child(odd bzw. even)

   arbeiten:
   http://jsfiddle.net/bpgs/ggKr8/
   

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?