HTML/CSS: Listenelemente einzeln färben?

Message

gere · #1 Post by **gere** » 18. Oct 2004 9:10

Hallo,

ich weiss dass ein HTML/CSS Problem hier ja nun nichts mit programmieren zu tun hat,
hoffe aber dennoch dass mir hier jemand einen Tipp geben kann.

In folgendem Beispiel möchte ich den Hintergründen von 1-4 verschiedene Farben zuordnen.
Alle Beispiele die ich gefunden habe, verwenden für alle li Elemente nur die gleiche Farbe.

Ist das irgendwie machbar?

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body &#123; font-family&#58; Verdana; &#125;
div.mainmenu &#123;
    position&#58; absolute;
    left&#58; 10px;
    top&#58; 10px;
    width&#58; 100%;
    text-align&#58;center;
&#125;
#nav ul&#123;
   padding &#58; 0;
   margin &#58; 0;
   white-space &#58; nowrap;
   background-color &#58; #888888; 
   color &#58; White;
   float &#58; left;
   width &#58; 100%;
   border-style &#58; solid;
   border-color &#58; #888888;
   border-width &#58; 2px 0 2px 0;
&#125;
#nav.test1 ul&#123;
   background-color &#58; #555555;
&#125;
#nav ul li&#123;
   display &#58; inline;
&#125;
#nav ul li a&#123;
   padding-left &#58; 1em;
   padding-right &#58; 1em;
   background-color &#58; #003399;
   color &#58; White;
   font-weight &#58; bold;
   text-decoration &#58; none;
   float &#58; left;
   border-right-color &#58; #888888;
   border-right-style &#58; solid;
   border-right-width &#58; 1px;
&#125;
#nav ul li a&#58;hover&#123;
   background-color &#58; #99CCFF;
   color &#58; #000066;
&#125;

</style>
</head>
<body>
<div class="mainmenu" id="mainmenu">
<div id="nav">
   <ul>
      <li><a href="#">eins</a></li>
      <li><a href="#">zwei</a></li>
      <li><a href="#">drei</a></li>
      <li><a href="#">vier</a></li>
   </ul>
</div>
</div>
</body>
</html>