Horizontale CSS-Navigation mit background-image ?

Hallo,
ich möchte gerne aus dem unten stehenden Code eine horizontale Navigation bauen. (Habe schon alles mögliche gelesen und ausprobiert - ... display: inline ...- bekomme es aber einfach nicht hin.)
Verdikal funktioniert es prima!
Die gesamte Zelle ist 920 px breit und 31px hoch. Am Anfang sollen drei
Buttons stehen, der Rest wird mit einer Grafik aufgefüllt.

Ich würde mich sehr freuen, wenn mir jemand einen Tipp geben könnte!

ul#menu {
	list-style: none;
	padding: 0px;
	margin: 0px;
}


li#wand a {
background: url(images/button_dunkelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#wand a:hover {
background:url(images/hover_button_dunkelblau.gif) no-repeat;
} 
li#wand a:active {
background: url(images/hover_button_dunkelblau.gif) no-repeat; 
} 

li#maler a {
background: url(images/button_mittelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block;
outline: none; 
}

li#maler a:hover {
background:url(images/hover_button_mittelblau.gif) no-repeat;
} 
li#maler a:active {
background: url(images/hover_button_mittelblau.gif) no-repeat; 
} 

li#tapez a {
background: url(images/button_petrol.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#tapez a:hover {
background:url(images/hover_button_petrol.gif) no-repeat;
} 
li#tapez a:active {
background: url(images/hover_button_petrol.gif) no-repeat; 
}

Hallo Jörg,
hier die html-datei und die css-datei.
Meine ganzen Versuche habe ich jetzt mal rausgelöscht.
Mein Problem ist, dass ich die Buttons, die horizontal erscheinen sollen, nicht nebeneinander bekomme. Außerdem sind Listenpunkte da, obwohl ich list style none eingegeben habe.
Die Anleitung aus selfhtml hatte ich schon ausprobiert. Ich kann sie aber einfach nicht für mein Vorhaben umsetzten. Mit „ul#Navigation span“ kann ich gar nichts anfangen.
Ich denke, dass es mit padding und margin zu tun haben muß!?! Kriege es aber einfach nicht in eine Reihe.
Hier der Link zur Beispielseite:
http://freenet-homepage.de/maler-rauschmaier/testseite.html

P.S.: Dass es mit der vertikalen Navigation funktioniert, habe ich übrigens Dir zu verdanken. Das hast Du mir im vergangen Jahr so prima erklärt, dass ich es im Leben nicht mehr vergessen werden.

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images/hintergrund2.gif);
	background-repeat: repeat-y;
	background-position: center;
}

ul#navigation {
   list-style: none;
	    }
  
  ul#navigation li {
  list-style: none;
    display: inline;
}  
li#navigation a {
	margin: 0;
	padding: 0;
	width: 150px; 
	height: 31px; 
	display: block; 
	background-image: url(images/button_startseite.gif);
	background-repeat: no-repeat;
	
  }
li#navigation a:hover {
	background-image: url(images/hover_button.gif);
	background-repeat: no-repeat;
	  }
  
  li#referenzen a {
	list-style: none;
	width: 150px; 
	height: 31px; 
	display: block; 
	background-image: url(images/button_referenzen.gif);
	background-repeat: no-repeat;
	
  }


li#referenzen a:hover {
	background: url(images/hover_button.gif) no-repeat; 
  }
  
li#partner a {
background: url(images/button_partner.gif) no-repeat;
    list-style: none;
       margin: 0px; padding: 0px;
	width: 150px; 
height: 31px; 
display: block; 
  }
li#partner a:hover {
	background: url(images/hover_button.gif) no-repeat; 
  }


.navigationsgrafik {
	background-image: url(images/kopfleiste_grau_470x31.gif);
	background-repeat: no-repeat;
	background-position: right top;
	}


leistungen {
	padding: 0px;
}



ul#menu {
	list-style: none;
	padding: 0px;
	margin: 0px;
}



li#wandgestaltung a {
background: url(images/button_dunkelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#wandgestaltung a:hover {
background:url(images/hover_button_dunkelblau.gif) no-repeat;
} 
li#wandgestaltung a:active {
background: url(images/hover_button_dunkelblau.gif) no-repeat; 
} 

li#malerarbeiten a {
background: url(images/button_mittelblau.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#malerarbeiten a:hover {
background:url(images/hover_button_mittelblau.gif) no-repeat;
} 
li#malerarbeiten a:active {
background: url(images/hover_button_mittelblau.gif) no-repeat; 
} 

li#tapezierarbeiten a {
background: url(images/button_petrol.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#tapezierarbeiten a:hover {
background:url(images/hover_button_petrol.gif) no-repeat;
} 
li#tapezierarbeiten a:active {
background: url(images/hover_button_petrol.gif) no-repeat; 
} 

li#innenputze a {
background: url(images/button_dunkelgruen.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#innenputze a:hover {
background:url(images/hover_button_dunkelgruen.gif) no-repeat;
} 
li#innenputze a:active {
background: url(images/hover_button_dunkelgruen.gif) no-repeat; 
} 

li#bodenbelaege a {
background: url(images/button_hellgruen.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#bodenbelaege a:hover {
background:url(images/hover_button_hellgruen.gif) no-repeat;
} 
li#bodenbelaege a:active {
background: url(images/hover_button_hellgruen.gif) no-repeat; 
} 

li#lackieren a {
background: url(images/button_gelb.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#lackieren a:hover {
background:url(images/hover_button_gelb.gif) no-repeat;
} 
li#lackieren a:active {
background: url(images/hover_button_gelb.gif) no-repeat; 
} 

li#fassadengestaltung a {
background: url(images/botton_orange.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#fassadengestaltung a:hover {
background:url(images/hover_button_orange.gif) no-repeat;
} 
li#fassadengestaltung a:active {
background: url(images/hover_button_orange.gif) no-repeat; 
} 

li#waermedaemmung a {
background: url(images/button_hellrot.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#waermedaemmung a:hover {
background:url(images/hover_button_hellrot.gif) no-repeat;
} 
li#waermedaemmung a:active {
background: url(images/hover_button_hellrot.gif) no-repeat; 
} 

li#geruestbau a {
background: url(images/button_rot.gif) no-repeat; 
width: 150x; 
height: 31px; 
display: block; 
outline: none; 
}

li#geruestbau a:hover {
background:url(images/hover_button_rot.gif) no-repeat;
} 
li#geruestbau a:active {
background: url(images/hover_button_rot.gif) no-repeat; 
} 




.grauer_rand {
	width: 150px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
.kontakt {
	background-image: url(images/farbkleckse.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	margin: 0px;
	padding: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>testseite</title>
<link href="rauschmaier.css" rel="stylesheet" type="text/css">
</head>

<body>

<table width="920" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" class="kontakt"><img src="images/logo.jpg" alt="Logo Maler Rauschmaier" width="270" height="210"><img src="images/lackieren_header.jpg" alt="Lackieren Maler Rauschmaier" width="430" height="210" class="kontakt"></td>
  </tr>
  <tr>
    <td width="920" colspan="3" background="images/kopfleiste_grau_470x31.gif" class="navigationsgrafik">
    <li id="navigation"><a href="index.html"></a>  
      <li id="referenzen"><a href="referenzen.html"></a>  
    <li id="partner"><a href="partner.html"><br>
    </a></td>
  </tr>
  <tr>
    <td width="150">
    <ul id="menu">
    <img src="images/button_leistungen.jpg" alt="Leistungen Maler Rauschmaier" width="150" height="31" class="leistungen">     
    <li id="wandgestaltung"><a href="wandgestaltung.html"></a></li>
       <li id="malerarbeiten"><a href="malerarbeiten.html"></a></li>
         <li id="tapezierarbeiten"><a href="tapezierarbeiten.html"></a></li>
       <li id="innenputze"><a href="innenputze.html"></a></li>
       <li id="bodenbelaege"><a href="bodenbelaege.html"></a></li>
         <li id="lackieren"><a href="lackieren.html"></a></li>
           <li id="fassadengestaltung"><a href="fassadengestaltung.html"></a></li>
       <li id="waermedaemmung"><a href="waermedaemmung.html"></a></li>
       <li id="geruestbau"><a href="geruestbau.html"></a></li></td>
    <td width="770" colspan="2"></td>
  </tr>
  <tr>
    <td width="150" bgcolor="#f4f4f4" class="grauer_rand"><img src="images/maler_grafik.gif" alt="Grafik Maler bei der Arbeit" width="119" height="256"></td>
    <td colspan="2"><div align="right"></div></td>
  </tr>
  <tr>
    <td colspan="3"><img src="../images/leiste_grau_31x920.jpg" width="920" height="31"></td>
  </tr>
</table>

</body>
</html>

Die LIste ist nicht richtig verschachtelt. Die Listenpunkte können niemals selbständig vorkommen, sondern immer nur als Kindelemente einer LIste (<ul>, <ol>)

Außerdem sind Listenpunkte da, obwohl ich list style none eingegeben habe.

Du hast dies für "ul#navigation" definiert, die drei betreffenden Listenpunkte liegen aber nicht innerhalb von '<ul id="navigation">'

Mit „ul#Navigation span“ kann ich gar nichts anfangen.

Das bezieht sich auf alle <span> Elemente innerhalb von '<ul id="Navigation">'

Auf dieser Seite sind die CSS-Selektoren erklärt, mit denen man bestimmte HTML-Elemente ansprechen kann:

http://de.selfhtml.org/css/formate/zentrale.htm

Wichtig sind hierbei vor allem die Formate für Klassen und die Individualformate.

Wenn du das <ul> Element mit der passenden ID einfügst, sollten die von dir definierten Eigenschaften für ul#navigation auch angesprochen werden. Allerdings musst du dann das erste <li> anders bezeichnen, da eine ID nur einmal vorkommen darf, z.B.:

  <tr>
    <td width="920" colspan="3" background="images/kopfleiste_grau_470x31.gif" class="navigationsgrafik">
    <ul id="navigation">
    <li id="startseite"><a href="index.html"></a></li>  
      <li id="referenzen"><a href="referenzen.html"></a></li>  
    <li id="partner"><a href="partner.html"></a></li>
  </ul>
  </td>
  </tr>