Hallo zusammen,
ich hoffe ihr könnt mir helfen.
Ich habe ein grafisches Menü erstellt. Wenn der jeweilige Menüpunkt aktiv ist,
wird als Button eine andere Grafik dargestellt.
Die Button-Grafiken haben je nach Menüpunkt eine unterschiedliche Breite.
Das div kommt so aus Joomla. Da kann ich nichts dran ändern.
Soweit funktioniert es auch. Als ich es jedoch gestern im IE8 testete, wurde ich eines besseren belehrt. Das Menü fliegt komplett auseinander.
Der Text aus den Listenelementen erscheint wieder, klickt man einen Button an, verschwindet er...
(Ob es jetzt sinvoll ist, mit grafischen Menüs zu arbeiten, sei mal dahingestellt. Würde es gerne so lösen.)
Unten findet ihr einen Beispielcode.
Oder hier als Beispiel mit zwei Buttons:
http://www.incarp.de/test
Vielen Dank für eure Hilfe.
Ich werde das Problem ohne euch wohl nicht lösen können.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#menu ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-indent: -9999px;
}
#menu li {float: left; margin-left: 0px;}
/*------------Button1---------------*/
ul.menu li.item-102 a:link
{
display: block;
width: 71px;
height: 30px;
overflow: hidden;
text-indent: -9999px;
}
ul.menu li.item-102 a:link
{
background-image: url(bild1_sw.png);
background-repeat : no-repeat;
}
#menu ul.menu li.item-102.active a {
background-image: url(bild1_dg.png);
background-repeat : no-repeat;
}
/*--------------Button2-----------------*/
ul.menu li.item-103 a:link
{
display: block;
width: 267px;
height: 30px;
text-indent: -9999px;
}
ul.menu li.item-103 a:link
{
background-image: url(bild2_sw.png);
background-repeat : no-repeat;
}
#menu ul.menu li.item-103.active a {
background-image: url(bild2_dg.png);
background-repeat : no-repeat;
}
/*----------Button3-------------*/
ul.menu li.item-104 a:link
{
display: block;
width: 267px;
height: 30px;
text-indent: -9999px;
}
ul.menu li.item-104 a:link
{
background-image: url(bild3_sw.png);
background-repeat : no-repeat;
}
#menu ul.menu li.item-104.active a {
background-image: url(bild3_dg.png);
background-repeat : no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<div class="moduletable_menu">
<ul class="menu">
<li class="item-102"><a href="/" >Home</a></li>
<li class="item-103 current active"><a href="/" >Text11111</a></li>
<li class="item-104"><a href="/" >Text2</a></li>
</div>
</div>
</body>
</html>