Frage stellen
ich bastle grad an skalierbaren Buttons für Hyperlinks:
hier das Stylesheet:
- Code: Alles auswählen
body, p a {
font: normal 12px Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
}
#Navi_pos {
position: absolute; top: 10.1em; left:0.7em;}
ul#Navigation {
margin: 0; padding: 4px 2px; text-align: center;
float: left;
width:150.3em;
height: 1.7em;
background-color: #efefef;
}
ul#Navigation li {
list-style: none;
display: inline;
margin: 3px;
}
/* margin: 3px; */
ul#Navigation #aktuell a {
float: left;
width: 7.15em;
margin: 0em 0.1em 0.25em 0.4em; padding: 0.08em 1em;
color: #aaa;
background-image: url(image/Verlauf_green_pressed.jpg);
background-repeat: repeat;
}
ul#Navigation a {
float: left;
width: 7.15em;
margin: 0em 0.1em 0.25em 0.4em; padding: 0.08em 1em;
text-decoration: none; font-weight: bold;
color: black;
background-image: url(image/Verlauf_green.jpg);
background-repeat: repeat;
}
ul#Navigation a:hover {
background-image: url(image/Verlauf_green_pressed.jpg);
background-repeat: repeat;
}
ul#Navigation div {clear: left;}
img.Schablone_green {width: 9.15em; height: 2.1em; position: relative; left:-1em; top:-1.6em; z-index:5; border:none;}
die HTML Datei:
- Code: Alles auswählen
<DOCTYPE>
<html>
<head>
<meta>
<title>Startseite</title>
<link>
</head>
<body>
<img>
<div>
<ul>
<li><a>Home<img></a></li>
<li><a>Punkt 1<img></a></li>
<li><a>Punkt 2<img></a></li>
<li><a>Punkt 3<img></a></li>
<li><a>Punkt 4<img></a></li>
<li><a>Punkt 5<img></a></li>
<li><a>Punkt 6<img></a></li>
<li><a>Impressum<img></a></li>
</ul><Navigation>
</div><Navi_pos>
</body>
</html>
Online:
http://mitglied.lycos.de/renezimm/buttons_index.html
Die Bilder gibts hier:
http://mitglied.lycos.de/renezimm/image ... ressed.jpg
http://mitglied.lycos.de/renezimm/image ... _green.jpg
http://mitglied.lycos.de/renezimm/image ... en_top.jpg
leider beschränkt sich der Hintergrund nicht auf eine Zeile sondern läuft über und beginnt eine neue Zeile.
Die anderen Varianten hab ich auch schon ohne Erfolg getestet, auch die Grafik außerhalb des li Elements zu plazieren, dann ist der Hover Effekt futsch. Weiß jemand Rat?
Grüße,
René
