Hallo zusammen
Ich wollte mir gerade ein menu bauen. meine idee war das ich eine maske (gif bild mit einigen transparenten stellen) über die hintergrundfarbe eines block elements lege. im normalzustand ist der bg rot im hover grün. die farbe wechselt aber nur an den transparenten stellen der maske.
gequatsche hin gequatsche her, schauts euch an:
http://www.tierverkehr.ch/martintemp/test23.html
im ff klappts (wie immer
) und der ie "flimmert" rum.
gibts da was was ich dagegen tun kann? ^^
bin für jede hilfe dankbar.
gruss martin
ach der code:
Ich wollte mir gerade ein menu bauen. meine idee war das ich eine maske (gif bild mit einigen transparenten stellen) über die hintergrundfarbe eines block elements lege. im normalzustand ist der bg rot im hover grün. die farbe wechselt aber nur an den transparenten stellen der maske.
gequatsche hin gequatsche her, schauts euch an:
http://www.tierverkehr.ch/martintemp/test23.html
im ff klappts (wie immer
) und der ie "flimmert" rum.gibts da was was ich dagegen tun kann? ^^
bin für jede hilfe dankbar.
gruss martin
ach der code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#submenu {
display: block;
position: absolute;
top: 188px;
text-indent: 5px;
width: 165px;
padding: 5px;
float: right;
border: 0px;
z-index: -1;
margin: 0px;
background: #fff;
}
#submenubtable {
position: relative;
display: block;
width: 165px;
margin-bottom: 12px;
position: relative;
background: #fff;
}
#submenubtable ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
}
#submenubtable li {
margin: 0;
padding: 0;
position: relative;
float: left;
}
#submenubtable a{
position: relative;
display: block;
width: 165px;
height: 16px;
padding-top: 3px;
background: red url("menu_maske.gif") no-repeat;
float: left;
color:#393939;
border-left: 1px solid #D0300C;
border-right: 1px solid #D0300C;
text-indent: 15px;
text-decoration: none;
font: 10px Verdana, Arial, sans-serif;
}
#submenubtable a:hover {
display: block;
text-indent: 15px;
width: 165px;
float: left;
color:#393939;
background: green url("menu_maske.gif") no-repeat;
}
#submenubtable a:active {
text-indent: 4px;
display: block;
text-align: center;
width: 165px;
background: #fff;
float: left;
color:#333333;
border-bottom: 1px dotted #E13D22;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
text-decoration: none;
}
#submenu h3 {
position: relative;
display: block;
color: white;
text-decoration: none;
font: 12px Verdana, Arial, sans-serif;
text-align: center;
background: url("subm_bg_o.gif") repeat-x;
width: 165px;
height: 29px;
border: 1px solid #FF7200;
padding-top:12px;
margin: 0px;
top: 0px;
}
#submenu h2 {
position: relative;
display: block;
color: white;
text-decoration: none;
font: 12px Verdana, Arial, sans-serif;
text-align: center;
background: url("subm_bg.gif") repeat-x;
width: 165px;
height: 29px;
border: 1px solid #467D0E;
padding-top:12px;
margin: 0px;
top: 0px;
}
</style>
</head>
<body>
<div id="submenu">
<div id="submenubtable">
<ul>
<li><h2>Quicklinks</h2></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=de" target="_blank">Anmeldung deutsch</a></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=fr" target="_blank">Anmeldung franz</a></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=it" target="_blank">Anmeldung ital</a></li>
<li><a href="http://www.tierverkehr.ch/" target="_blank">TVD Internet</a></li>
<li><a href="http://hono/" target="_blank">Honoweb</a></li>
</ul>
</div>
<div id="submenubtable">
<ul>
<li><h3>Quicklinks</h3></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=de" target="_blank">Anmeldung deutsch</a></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=fr" target="_blank">Anmeldung franz</a></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=it" target="_blank">Anmeldung ital</a></li>
<li><a href="http://www.tierverkehr.ch/" target="_blank">TVD Internet</a></li>
<li><a href="http://hono/" target="_blank">Honoweb</a></li>
</ul>
</div>
<div id="submenubtable">
<ul>
<li><h3>Quicklinks</h3></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=de" target="_blank">Anmeldung deutsch</a></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=fr" target="_blank">Anmeldung franz</a></li>
<li><a href="http://www.tierverkehr.ch/tvd/menu.login.action?language=it" target="_blank">Anmeldung ital</a></li>
<li><a href="http://www.tierverkehr.ch/" target="_blank">TVD Internet</a></li>
<li><a href="http://hono/" target="_blank">Honoweb</a></li>
</ul>
</div>
</div>
</body>
</html>
