Verzweifelter Neuling, mehrere bilder zentrieren

[moketas]

Servus!

Ich weiss dass einige sagen werden ich hätte das Forum zuerst durchsuchen sollen aber leider finde ich nirgends den entscheidenden Hinweis wie ich mein Problem lösen könnte. Nun was will ich.

Ich möchte eine seite basteln mit einem hintergrundbild welches immer zu 100% in der breite angezeigt wird. dies habe ich damit gelöst das ich das ding in ein div gelegt habe:

#hintergrund{position:relative;padding-top:0px;}

dies funktioniert auch wunderbar.

darüber möchte ich 6 images legen die oben als menüpunkte dienen. diese werden von einem js "animiert bei mouseover" dieser punkt klappt auch wunderbar. wenn ich die einzelnen images absolut positioniere ist alles wunderbar. nun möchte ich aber dass diese 6 bilder in einem div liegen und immer in der mitte des browsers (horizontal) angezeigt werden. und ja ich kenne schon margin-left/right:auto und ja es klappt damit allerding liegen bei mir die bilder dann übereinander was ich nicht verstehe.

hier nun der code:

<div id ="hintergrund">  
       <img src="../_graphics/bg.jpg" width=100%>  
       <div id="bilderserie">  
         <div id ="menu1">  
           <a href="index.htm"> <img src="../_graphics/home.gif" border="0" width=100px  class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>  
         </div>  
         <div id ="menu1">  
           <a href="_html/menue.htm"><img src="../_graphics/menue.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"</a>  
         </div>  
         <div id ="menu1">  
           <a href="_html/tagesteller.htm"><img src="../_graphics/tagesteller.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>  
         </div>  
         <div id ="menu1">  
           <a href="_html/fotos.htm"><img src="../_graphics/fotos.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>  
         </div>  
         <div id ="menu1">  
           <a href="_html/catering.htm"><img src="../_graphics/catering.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>  
         </div>  
         <div id ="menu1">  
           <a href="_html/kontakt.htm"><img src="../_graphics/kontakt.gif" width=100px border="0" class="shakeimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this);"></a>  
         </div>  
       </div>  
     </div>

und hier die fehlende css-codes

#bilderserie {
  position:absolute;
  left:0;
  top:3%;
  width: 100%;
  min-height: 82px;
  padding: 9px 0px 9px 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}
#menu1{position:absolute;
margin-top: 7px;
  margin-bottom: 7px;
  margin-left: auto;
        margin-right: auto;
        border:0px;}

bitte kann mir jemand sagen woran es liegt dass es nicht klappt