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 { font-family: Verdana; }
div.mainmenu {
position: absolute;
left: 10px;
top: 10px;
width: 100%;
text-align:center;
}
#nav ul{
padding : 0;
margin : 0;
white-space : nowrap;
background-color : #888888;
color : White;
float : left;
width : 100%;
border-style : solid;
border-color : #888888;
border-width : 2px 0 2px 0;
}
#nav.test1 ul{
background-color : #555555;
}
#nav ul li{
display : inline;
}
#nav ul li a{
padding-left : 1em;
padding-right : 1em;
background-color : #003399;
color : White;
font-weight : bold;
text-decoration : none;
float : left;
border-right-color : #888888;
border-right-style : solid;
border-right-width : 1px;
}
#nav ul li a:hover{
background-color : #99CCFF;
color : #000066;
}
</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>