mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 21:31 Benutzername: Passwort: Auto-Login

Thema: [solved] aktiv-Status im Flyout-Menü vom 11.09.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [solved] aktiv-Status im Flyout-Menü
Autor Nachricht
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Di 11.09.2007 10:44
Titel

[solved] aktiv-Status im Flyout-Menü

Antworten mit Zitat Zum Seitenanfang

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 am Do 13.09.2007 06:36, insgesamt 2-mal bearbeitet
 
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 12.09.2007 06:54
Titel

Antworten mit Zitat Zum Seitenanfang

Erkennt der ie da wieder irgendwas nicht wegen dem "li a span "? ich werd bald wirr. Menno!
 
Anzeige
Anzeige
nomidi

Dabei seit: 07.09.2007
Ort: bei Bremen
Alter: 47
Geschlecht: Männlich
Verfasst Mi 12.09.2007 08:09
Titel

Antworten mit Zitat Zum Seitenanfang

hast du mal nen link, der code ist nicht ganz so übersichtlich.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 12.09.2007 08:27
Titel

Antworten mit Zitat Zum Seitenanfang

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: 47
Geschlecht: Männlich
Verfasst Mi 12.09.2007 11:18
Titel

Antworten mit Zitat Zum Seitenanfang

ich glaube es liegt an deinen zweiten Produkte Link. Der Überschreibt dir im Ie6 deinen herkömmlichen Link, der richtig formatiert ist.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 12.09.2007 12:00
Titel

Antworten mit Zitat Zum Seitenanfang

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: 34
Geschlecht: Weiblich
Verfasst Di 05.08.2008 12:11
Titel

Antworten mit Zitat Zum Seitenanfang

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]-->
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 05.08.2008 12:42
Titel

Antworten mit Zitat Zum Seitenanfang

Das Thema ist fast ein Jahr alt Hmm...?!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [solved]CSS Ausklapp-Menü. Oberer Menüpunkt aktiv
Problem bei Buttons mit aktiv/inaktiv Status+Mouseovereffekt
Lücke bei Flyout Menü im ie7... -.-
CSS und IE - Problem mit Flyout-Menü
problem mit flyout menü in ie6
Thema Adobe Muse, Flyout Menü
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.