Homepage selbermachen 7.847 Themen, 35.565 Beiträge

Hallo zusammen. Ich habe folgendes Problem. Ein horizontales Menü. Die Links sind in die index-Seite geschrieben. Diese werden zentriert innerhalb ihres divs. Nun sollen per css-Datei noch Bilder für a, active, hover usw. hinzugefügt werden. Klappt auch so weit. Nur leider werden die Bilder nicht zentriert, sondern "kleben" immer am linken div rand.

Link: http://www.bonnapart.com/test

Quelltextauszug des Links:


<div id="menu">
<div id="menu1"><a href="'.$_SERVER["PHP_SELF"].'?id=10"> OBJEKT DES MONATS</a></div>
<div id="menu1"><a href="'.$_SERVER["PHP_SELF"].'?id=20"> ÜBER BONNAPART></div>
<div id="menu1"><a href="'.$_SERVER["PHP_SELF"].'?id=30">
SCHAU-FENSTER</a></div>
<div id="menu2"><a href="'.$_SERVER["PHP_SELF"].'?id=40"> SO FINDEN SIE UNS</a></div>
</div>



------------------

Der CSS-Code:

#menu1 {width:188px; margin-top: 5px;}
#menu1 a, #menu1 {vertical-align:center; display:block; width:100%; height:20px; line-height:20px; text-decoration:none; color:#000; background:url(images/schluessel_grau.gif); background-repeat:no-repeat;}

#menu1 a:hover {vertical-align:center; display:block; width:100%; height:20px; cursor:pointer; text-decoration:none; color:#c00; background:url(images/schluessel_rot.gif); background-repeat:no-repeat;}

#menu2 {width:193px; margin-top:5px;}
#menu2 a, #menu2 { display:block; width:100%; height:20px; line-height:20px; text-decoration:none; color:#000; background:url(images/schluessel_grau.gif); background-repeat:no-repeat;}

#menu2 a:hover {display:block; width:100%; height:20px; cursor:pointer; text-decoration:none; color:#c00; background:url(images/schluessel_rot.gif); background-repeat:no-repeat;}


/* Das Menü */
#menu {
color:#ffffff;
background-color:#FFFFFF;
text-align:center;
}
/* Das Menü */
#menu1 {
width: 188px;
color:#000000;
background-color:#FFFFFF;
text-align:center;
/*padding:5px 0px;*/
border-right:1px solid #000000;
font-weight:bold;
float:left;

margin-left: auto;
margin-right: auto;

}
#menu2 {
width: 193px;
color:#000000;
background-color:#FFFFFF;
text-align:center;
font-weight:bold;
float: left;
display:block;

margin-left: auto;
margin-right: auto;

}


Hat einer ne Idee, wie ich das Bild direkt neben den Text bekomme?

Vielen Dank und viele Grüße,

Chris