Rollover Button mit Bild per Css

[nicole]

Hallo Leute,
habe versucht Rollover-Buttons zu bauen (mit der Anleitung von http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a2 ).
Es handelt sich bei mir um Buttons, die nebeneinander in einer Menüleiste stehen sollen.
Habe schon probiert dem Link je ein transparentes Bild mit den original Buttongrößen zu geben - funzt leider auch nicht.

Hat jemand einen Tipp?

hier mein css:

/* CSS Document */  
body {  
 font-size: 100.01%;  
    font-family: Verdana,Arial,sans-serif;  
 background-color:#fefcf2;  
 padding:0px;  
 min-height:100%;}  
  
/*Links Navi*/  
#navi_1 a  
 { display:block;  
 background-image:url(../images/nav/layout_navi_geschichte.jpg);  
 width:104px; height:34px }  
#navi_1 a:hover { background-image:url(../images/nav/layout_navi_geschichte_aktiv.jpg); }  
  
#navi_2 a  
 { display:block;  
 background-image:url(button.gif);  
 width:120px; height:30px }  
#navi_2 a:hover { background-image:url(button_on.gif); }  
  
#navi_3 a  
 { display:block;  
 background-image:url(button.gif);  
 width:120px; height:30px }  
#navi_3 a:hover { background-image:url(button_on.gif); }  
  
#navi_4 a  
 { display:block;  
 background-image:url(button.gif);  
 width:120px; height:30px }  
#navi_4 a:hover { background-image:url(button_on.gif); }  
  
#navi_5 a  
 { display:block;  
 background-image:url(button.gif);  
 width:120px; height:30px }  
#navi_5 a:hover { background-image:url(button_on.gif); }  
  
#navi_6 a  
 { display:block;  
 background-image:url(button.gif);  
 width:120px; height:30px }  
#navi_6 a:hover { background-image:url(button_on.gif); }  
  
  
  
  
  
  
  
/* Links Subnavi */  
div#subnavi a:active, div.subnavi a:hover{  
 color: #e2d9cb; text-decoration: none;}  
div#subnavi a:visited, div.subnavi a:link, div .subnavi a{  
 color: #000; text-decoration: none;}  
/* Links News */  
div#news a:active, div#news a:hover, div#news a:visited, div#news a:link, div #news a{  
 color: #021a39; text-decoration: none;font-weight:bold}  
/* Links Termine */  
div#events a:active, div#events a:hover, div#events a:visited, div#events a:link, div #events a{  
 color: #021a39; text-decoration: none; font-weight:bold}  
/* Links Content - Links im Text */  
div #text a:active, div #text a:hover, div #text a:visited, div #text a:link, div #text a{  
 color: #021a39; text-decoration: none; font-weight:bold}  
/* Links Footer */  
.right a:active, .right a:hover, .right a:visited, .right a:link, .right a{  
 color: #021a39; text-decoration: none; font-weight:normal}  
  
  
/* Ganzes Layout */  
div#layout {  
 width: 995px;  
 margin: auto auto;}  
  
/* Kopfbereich */  
div#header {  
 text-align: left;  
 width: 995px;  
 height: 105px;  
 background-image:url(../images/layout_header.jpg);  
 background-position: top left;  
 background-repeat: no-repeat;  
}  
  
/* Link zu Home auf dem Banner */  
.transparent  
  {  
 width: 280px;  
 height:45px;  
 margin-top:20px;  
 margin-left:20px;}  
  
/* Hauptnavi */  
div#navi {  
 text-align: left;  
 width: 995px;  
 height: 34px;  
 margin:0;  
 padding:0;}  
  
/* Inhaltsbereich Subnavi und Marginalbereich  - Weite weg, wenn Inhalt da css2.1*/  
div #center{  
 width:995px;}  
  
 /* Folgendes Div beinhaltet subnavi, background_left und text */  
  
div#content {  
 text-align: left;  
 width: 829px;  
 background-image:url('../images/layout_background_subnavi.jpg');  
 background-position: top left;  
 background-repeat: no-repeat;  
 background-color:#fff;  
 margin:0px;  
 float:left;}  
  
.subnavi{  
    width:650px;  
    height:20px;  
 text-align: left;  
 line-height: 120%;  
 font-size:75%;  
 float:left;  
 margin-top:0px;  
 margin-left: 175px;}  
  
.subnavi ul{  
 margin:0;  
 padding:0;  
 list-style-type:none;  
 display: inline;}  
  
.subnavi ul li{  
 margin:0;  
 padding:2px;  
 display: inline;}  
  
.subnavi ul li a{  
 text-decoration:none;}  
  
.subnavi ul li a:hover{  
 text-decoration:underline;}  
  
 /* Div mit Säulenbild und Säulenfortsatz im Hintergrund */  
  
div #background_left{  
    width: 420px;  
 text-align: left;  
 font-size:70%;  
 line-height:120%;  
 float:left;  
 margin:0;  
 clear:both;  
 background-image:url('../images/layout_saeulenfortsatz.jpg');  
 background-position: top left;  
 background-repeat:repeat-y;  
 xoverflow:visible;  
  
 }  
  
  
div #text{  
    width: 385px;  
 text-align: left;  
 font-size:70%;  
 line-height:130%;  
 margin-left: 0px;  
 }  
  
div #text p{  
 font-size:100%;  
 margin-bottom: 5px;  
 }  
  
  
h1{  
 font-size: 140%;  
 font-weight: normal;  
 line-height:140%;  
 color: #ae7414;  
 margin-top: 30px;  
 margin-bottom:30px;  
}  
  
  
h2{  
 font-size: 120%;  
 font-weight: normal;  
 line-height:140%;  
 color: #ae7414;  
 }  
  
h3{  
 font-size: 100%;  
 line-height:140%;  
 font-weight: normal;  
 color: #75889b;  
 margin-left:100px;  
 margin-top:0px;  
 }  
  
  
.image_border{  
    border: 2px solid #ae7414;  
 margin-top:5px;}  
  
div #text a {  
    background-image:url('../images/kleiner_Pfeil.jpg');  
 background-position: center left;  
 background-repeat: no-repeat;  
 padding-left:-20px; }  
  
  
div #sidebar {  
 text-align: left;  
 width: 166px;  
 background-color:#e9edf0;  
 margin-left:829px;  
 margin-top:0;  
 xoverflow:visible;}  
  
/* News in sidebar */  
div #sidebar #news {  
 width: 166px;  
 height: 300px;  
 margin:0;  
 background-image:url(../images/layout_news.jpg);  
 background-position: top left;  
 background-repeat: no-repeat;}  
  
div #sidebar #news p {  
 line-height: 140%;  
 font-size:65%;  
 color:#000;  
 margin-left:30px;  
 margin-right:10px;  
 margin-top:5px;}  
  
/* Events in sidebar */  
div #sidebar #events {  
 width: 166px;  
 height: 312px;  
 margin:0;}  
  
div #sidebar #events p {  
 line-height:140%;  
 font-size: 65%;  
 color: #000000;  
 margin-left:30px;  
 margin-top:5px;}  
  
/* Fußzeile */  
div#footer {  
 text-align: left;  
 width: 995px;  
 height: 27px;  
 clear:both;  
 background-image:url(../images/layout_footer.jpg);  
 background-position: top left;  
 background-repeat: no-repeat;  
 margin:0;}  
  
div#footer .left {  
 width: 400px;  
 float:left;  
 text-align: left;  
 margin-left: 20px;  
 margin-top:7px;  
 font-size: 60%;  
 color: #000000;}  
  
div#footer .right {  
 height:24px;  
 margin-right:5px;  
 text-align: right;  
 line-height:10px;  
 font-size: 70%;  
 color: #000000;  
 width:280px;  
 float:right;  
 margin-top: 7px;  
}

[LX]

Du solltest den Navi-Links noch display:block mitgeben, sonst funktionieren width und height nicht.

Gruß, LX

[nicole]

Hab ich schon, geht auch nicht.
Das display:block stand so ja auch schon auf der Seite hier.