nicht angemeldet
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;
}