| Autor |
Nachricht |
Flowi81
Threadersteller
Dabei seit: 23.01.2003
Ort: Hildesheim
Alter: 26
Geschlecht: 
|
Verfasst Di 11.09.2007 11:44
Titel [solved] aktiv-Status im Flyout-Menü |
  |
|
hallo ihr lieben,
ich habe ein vertikales Flyout-Menü mittels css. Nun möchte ich, dass der aktive Button
(in diesem code-Beispiel das Wort "Produkte") schwarz gefärbt ist, wenn man sich auf
einer Seite der entsprechenden Submenübuttons befindet.
Das funktioniert auch im firefox mittels des span-tags aber nicht im ie. Kann mir jemand sagen warum?
html code des menüs
| Code: | <div class="menu">
<ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
<li style="left:6px; top:20px;"><a href="#" style="color:#000000;"><span>Produkte</span></a>
<!--[if lte IE 6]>
<a href="index.html">Produkte
<table><tr><td>
<![endif]-->
<ul>
<li style="left:118px;top:0px;"><a href="rollo.htm">Rollo</a> </li>
<li style="left:118px;top:21px;"><a href="jalousie.htm">Jalousie</a> </li>
<li style="left:118px;top:42px;"><a href="vertikal.htm">Vertikal</a> </li>
<li style="left:118px;top:63px;"><a href="plissee.htm">Plissee</a> </li>
<li style="left:118px;top:84px;"><a href="zubehoer.htm">Zubehör</a> </li>
<li style="left:118px;top:105px;"><a href="schiene.htm">Schiene</a> </li>
<li style="left:118px;top:126px;"><a href="stil.htm">Stil</a> </li>
<li style="left:118px;top:147px;"><a href="flvorhang.htm">Flächenvorhang</a> </li>
<li style="left:118px;top:168px;"><a href="raffrollo.htm">Raffrollo</a> </li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li style="left: 6px;top:50px; "><a href="informationen.htm">Informationen</a>
<!--[if lte IE 6]>
<a href="informationen.htm">Informationen
<table><tr><td>
<![endif]-->
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div> |
css allgemein
| Code: | /* common styling */
.menu
{
width:130px;
height:460px;
position:relative;
margin:0px ;
padding:0px;
background-image:url('pics/navibg.jpg');
background-repeat:no-repeat;
float: left;
}
/* so sieht der oberste Menübutton als link aus und als schon besuchter */
.menu ul li a, .menu ul li a:visited
{
display:block;
text-decoration:none;
color:#9D3C3E;
width:118px;
height:21px;
background-image:url('pics/button.gif');
background-repeat:no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height:19px;
text-align:center;
text-indent: 10px;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
/*padding-left:23px;evt. überlegen ob man das so macht*/
}
/* so sieht der Submenübutton als link aus*/
.menu ul li ul li a
{
width: 100px;
height:21px;
background-color:#FFFFFF;
background-image: none;
border: 1px solid #9D3C3E;
padding:0;
margin:0;
list-style-type: none;
display:block;
}
/* Einstellungen für die Liste an sich im ganzen*/
.menu ul
{
padding:0;
margin:0;
list-style-type: none;
}
/* Verhalten der Buttons für das Hauptmenü */
.menu ul li
{
float:left;
position:absolute;
}
/* Verstecken des Submenüs*/
.menu ul li ul
{
display: none;
}
/* specific to non IE browsers */
/* So sieht Button vom Hauptmenü aus beim Drüberfahren*/
.menu ul li:hover a
{
color:#000;
width:118px;
height:21px;
display:block;
}
/* Einblenden der Liste des Submenüs*/
.menu ul li:hover ul
{
display:block;
position:absolute;
top:0;
left:0;
background-image: none;
}
/* die Klasse a. wird definiert warum???*/
.menu ul li:hover ul li a.hide
{
background:#fff;
color:#000;
}
/* die Klasse a. wird definiert warum???*/
.menu ul li:hover ul li:hover a.hide
{
width:100px;
}
/* Aussehen des links im submenü*/
.menu ul li:hover ul li a
{
display:block;
background-color:#fff;
color:#9D3C3E;
width:125px; /*hier widht:140px; angeben wenn das unternemü wegen der langen begriffe größer wrid*/
background-image:none;
text-indent:0px;
}
/* Aussehen des links im submenü beim Drüberfahren*/
.menu ul li:hover ul li a:hover
{
background:#fff;
color:#000;
}
.menu ul li a span
{
color:#000;
}
} |
css menü für ie | Code: |
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
/*Aussehen des Hauptmenüs beim Drüberfahren*/
.menu ul li a:hover {color:#000; background-color:#CFCFCF; text-indent: 10px; }
/*Das Submenü wird eingeblendet und schliesst an das Hauptmenü an (top left = 0)*/
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:0px; width:100px; }
.menu ul li a:hover ul li a.sub {background:#fff; display:block; }
/*So sieht link vom submenü aus (wenn das menü wegen montageanleitungen größer soll hier bei
width:140px; oder so angeben*/
.menu ul li a:hover ul li a {display:block; color:#9D3C3E; width:100px; background-image:none; text-indent:0px; width:125px;}
/*So sieht submenü aus beim drüberfahren*/
.menu ul li a:hover ul li a:hover {background:#fff; color:#000;}
/*von mir dazugefügt damit der Button im ie an der gleichen Stelle wie der Button in
Firefox erscheint und keine Buttons doppelt angezeigt werden*/
.menu ul li a, .menu ul li a:visited
{
position: absolute;
top: 0px;
left: 0px;
}
.menu ul li a span
{
color:#000;
} |
Zuletzt bearbeitet von Flowi81 am Do 13.09.2007 07:36, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
Flowi81
Threadersteller
Dabei seit: 23.01.2003
Ort: Hildesheim
Alter: 26
Geschlecht:
|
Verfasst Mi 12.09.2007 07:54
Titel
|
|
|
Erkennt der ie da wieder irgendwas nicht wegen dem "li a span "? ich werd bald wirr. 
|
|
| |
|
|
nomidi
Dabei seit: 07.09.2007
Ort: bei Bremen
Alter: 32
Geschlecht: 
|
Verfasst Mi 12.09.2007 09:09
Titel
|
|
|
|
hast du mal nen link, der code ist nicht ganz so übersichtlich.
|
|
| |
 |
|
Flowi81
Threadersteller
Dabei seit: 23.01.2003
Ort: Hildesheim
Alter: 26
Geschlecht:
|
Verfasst Mi 12.09.2007 09:27
Titel
|
|
|
nee leider ist die seite noch nicht online.
geht aber hauptsächlich um das aus dem css ganz unten
| Code: | .menu ul li a span
{
color:#000;
} |
und das das im ie nicht funzt und im firefox schon.
oder ist das irgendwo sonst noch was falsch, was dazu führen könnte, das das nicht geht?
das menü sieht so aus (ausgeklappt):
wenn es eingeklappt ist und man z.B. auf der jalousie-seite ist, soll das wort PRODUKTE
immer noch schwarz sein, damit man sieht, dass man sich da befindet. (was es hier jetzt nicht ist).[/img]
|
|
| |
|
|
nomidi
Dabei seit: 07.09.2007
Ort: bei Bremen
Alter: 32
Geschlecht:
|
Verfasst Mi 12.09.2007 12:18
Titel
|
|
|
|
ich glaube es liegt an deinen zweiten Produkte Link. Der Überschreibt dir im Ie6 deinen herkömmlichen Link, der richtig formatiert ist.
|
|
| |
|
|
Flowi81
Threadersteller
Dabei seit: 23.01.2003
Ort: Hildesheim
Alter: 26
Geschlecht:
|
Verfasst Mi 12.09.2007 13:00
Titel
|
|
|
was meinst du mit zweitem link? meinste das hier:
| Code: |
<li style="left:6px; top:20px;"><a href="#" style="color:#000000;"><span>Produkte</span></a>
<!--[if lte IE 6]>
<a href="index.html">Produkte
<table><tr><td>
<![endif]-->
|
?
sorry steh gerad aufm schlauch.
|
|
| |
|
|
denise2302
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 18
Geschlecht:
|
Verfasst Di 05.08.2008 13:11
Titel
|
|
|
| Flowi81 hat geschrieben: | was meinst du mit zweitem link? meinste das hier:
| Code: |
<li style="left:6px; top:20px;"><a href="#" style="color:#000000;"><span>Produkte</span></a>
<!--[if lte IE 6]>
<a href="index.html">Produkte
<table><tr><td>
<![endif]-->
|
?
sorry steh gerad aufm schlauch. |
dann schreib doch einfach bei dem ie comment auch nochmal das color mit rein...
| Code: |
<!--[if lte IE 6]>
<a href="index.html" style="color:#000000";>Produkte
<table><tr><td>
<![endif]-->
|
|
|
| |
|
|
m
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 05.08.2008 13:42
Titel
|
|
|
Das Thema ist fast ein Jahr alt 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[solved]CSS Ausklapp-Menü. Oberer Menüpunkt aktiv
CSS und IE - Problem mit Flyout-Menü
problem mit flyout menü in ie6
Lücke bei Flyout Menü im ie7... -.-
Fireworks: Menü mit Aktiv-Button
Flyout Menu - Table?
|
|
Willkommen auf dem Portal für Mediengestalter
