Menue mit (2) Hintergrundbilder
Verfasst: 20. Mär 2010, 16:56
[quote="stuttgarter"]Hallo
Frage zum Menue, Button sollte bei hover und bei active wie in dem Bild ersichtlich aussehen... ( tut er aber nicht mit meinem Code )
Da der Button links und rechts abgerundete "ecken" hat, und sich aber bei einem langen link in der Breite anpassen sollte, müsste der Button aus 2 .gif bestehen... ? oder ??
[ externes Bild ]
wie muss ich meinen Code anpassen?
..........................
#navigation {
float: left;
width:100%;
}
#navigation ul.rex-navi1 {
margin: 0px;
padding:0px;
}
#navigation ul.rex-navi1 li {
display: inline;
}
#navigation ul.rex-navi1 a,
#navigation ul.rex-navi1 a:link,
#navigation ul.rex-navi1 a:visited {
float: left;
color: #fff;
padding: 5px 20px 5px 30px;
text-decoration: none;
text-align: center;
font-weight:normal;
background:transparent url(_button_links.gif) no-repeat top left ;
border:none;
}
#navigation ul.rex-navi1 a:hover {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
#navigation ul.rex-navi1 li a.active,
#navigation ul.rex-navi1 li a.active:link {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
#navigation ul.rex-navi1 li a.rex-active {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
#navigation ul.rex-navi1 li a.rex-current {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
..........................
Frage zum Menue, Button sollte bei hover und bei active wie in dem Bild ersichtlich aussehen... ( tut er aber nicht mit meinem Code )
Da der Button links und rechts abgerundete "ecken" hat, und sich aber bei einem langen link in der Breite anpassen sollte, müsste der Button aus 2 .gif bestehen... ? oder ??
[ externes Bild ]
wie muss ich meinen Code anpassen?
..........................
#navigation {
float: left;
width:100%;
}
#navigation ul.rex-navi1 {
margin: 0px;
padding:0px;
}
#navigation ul.rex-navi1 li {
display: inline;
}
#navigation ul.rex-navi1 a,
#navigation ul.rex-navi1 a:link,
#navigation ul.rex-navi1 a:visited {
float: left;
color: #fff;
padding: 5px 20px 5px 30px;
text-decoration: none;
text-align: center;
font-weight:normal;
background:transparent url(_button_links.gif) no-repeat top left ;
border:none;
}
#navigation ul.rex-navi1 a:hover {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
#navigation ul.rex-navi1 li a.active,
#navigation ul.rex-navi1 li a.active:link {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
#navigation ul.rex-navi1 li a.rex-active {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
#navigation ul.rex-navi1 li a.rex-current {
color: #666;
background:transparent url(_button_rechts.gif) no-repeat scroll top right ;
}
..........................