Navi-Leiste verschwindet in iFrame von Anika, 12.06.2006 09:57

Navi-Leiste verschwindet in iFrame

Anika 12.06.2006 09:57

Hallo zusammen,
ich habe ein kleines Problem mit einer Homepage die ich gerade erstelle.
Ich habe eine CSS Navigation entworfen die direkt über einem iFrame eingeblendet wird. Die Navigation ist ausklappbar.
Das klappt auch alles ganz gut, nur im Mozilla funktioniert es nicht so ganz. Das Problem ist, dass die Menüpunkte die über dem Iframe liegen nicht angeklickt werden können, bzw. das Ausklappmenü verschwindet sobald man in den Bereich des iFrames hineinkommt.
Mit z-index klappt es nicht. Ich bin etwas ratlos, kann mir jemand helfen?
Vielen dank schonmal

Beitrag melden

– Informationen zu den Bewertungsregeln

Navi-Leiste verschwindet in iFrame
MudGuard Homepage des Autors 12.06.2006 10:14

css
– Informationen zu den Bewertungsregeln
Hi,

Mit z-index klappt es nicht.

Ich rate mal: Du hast die Voraussetzungen für das Wirken von z-index beachtet?

Ich bin etwas ratlos, kann mir jemand helfen?

Raten ist das einzige, was wir tun können, da Du ja keinerlei Code (Link auf Problemseite ...) angegeben hast.

cu,
Andreas

--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Navi-Leiste verschwindet in iFrame
  
  Anika 12.06.2006 11:04
  
  css
  – Informationen zu den Bewertungsregeln
  Hm die Seite ist noch nicht online deswegen kann ich sie nicht verlinken.
  Aber ich poste gleich mal die entsprechenden Codes.
  
  Ich rate mal: Du hast die Voraussetzungen für das Wirken von z-index beachtet?
  
  Ich weiss es ehrlich gesagt nicht. Mit CSS kenn ich mich eigentlich gar nicht aus. Ich bastel mir das alles mehr oder weniger durch ausprobieren zusammen. Kannst du mir sagen welche Voraussetzungen ich schaffen muss?
  
  Gleich kommt der Code.
  Danke schon mal
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
2. Navi-Leiste verschwindet in iFrame
  
  Wastl 12.06.2006 12:12
  
  css
  – Informationen zu den Bewertungsregeln
  Raten ist das einzige, was wir tun können, da Du ja keinerlei Code (Link auf Problemseite ...) angegeben hast.
  
  cu,
  Andreas
  
  So, das hast du jetzt davon:
  https://forum.selfhtml.org/?t=131144&m=848130
  *LOL*
  Gruß Wastl
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Navi-Leiste verschwindet in iFrame
Anika 12.06.2006 11:05

css
– Informationen zu den Bewertungsregeln
Hier der CSS-Code:

#menu {
display: block;
width: 722px;
z-index: 2;
    margin-left: 8px;
margin-top: 40px;
position: absolute;
}
#menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
#menu li {
margin: 0 0 0 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
}
#menu a {
display: block;
}
* html #menu li a {
position: relative;
}
#menu li ul {
visibility: hidden;
position: absolute;
z-index: 1;
}
html>body #menu li ul {
display: none;
}

#menu li li {
width: 100%;
}

/* fixiert die Ausrichtung */
#menu li li ul {
top: 0;
left: 100%;
}

/* simulierter child-selector f?r I.E. */
div#menu li:hover ul,
#menu li:hover li:hover ul,
#menu li:hover li:hover li:hover ul {
visibility: visible;
}
div#menu li:hover li ul,
#menu li:hover li:hover li ul,
#menu li:hover li:hover li:hover li ul {
visibility: hidden;
}

/* nicht f?r I.E. */
#menu ul#menuList li:hover>ul {
display: block;
visibility: visible;
}

/*  ------   Aussehen --------   */

#menu {
font-family: Verdana;
font-size: 10px;
color: #ffffff;
background-color: #666666;
border: none;
height: 20px;
line-height: 20px;
}
/*Mouse-Over-Hintergrund*/
#menu li:hover {
background-color: #ffffff;
color: #666666;
}
/*Schrift Men?leiste*/
#menu a {
text-decoration: none;
text-align: center;
color: #ffffff;
padding: 0px 10px;
background-color: #666666;
}
#menu a:hover {
text-decoration: none;
text-align: left;
background-color: #ffffff;
color: #666666;
padding: 0px 10px;
}

#menu li:hover>a, #menu a:hover {
color: #666666;
    background-color: #ffffff;
}

#menu li ul {
text-align: left;
background-color: #FFFFFF;
color: #666666;
border: none;
width: 145px;
height: 140px;
line-height: 20px;
padding: 5px 0px;
filter:alpha(opacity=85);
background-position: 135px;
-moz-opacity:0.85;
}

#menu li ul a {
text-align: left;
color: #333333;
background-color: #FFFFFF;
filter:alpha(opacity=85);
-moz-opacity:0.85;
}

#menu li ul a:hover{
text-align: left;
color: #ffffff;
background-color: #666666;
filter:alpha(opacity=100);
-moz-opacity:1;
}
Beitrag melden

–
Informationen zu den Bewertungsregeln
Navi-Leiste verschwindet in iFrame
Anika 12.06.2006 11:06

css
– Informationen zu den Bewertungsregeln
Hier der Html 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>Cobra Deutschland</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <style type="text/css" media="screen">@import "cssmenue/style3.css";</style> <style type="text/css" media="screen">@import "cssmenue/style4.css";</style>  <script type="text/javascript">  </script> </head> <body bgcolor="#FFFFFF">  <div id="menu"> <ul id="menuList"> <li style="margin-right:35px;"><a href="#" class="submenu">Über uns</a> <ul id="Link1Menu"> <li><a href="javascript:zweiframes('cobraat.html','cobraat2.html','bild.html')">Cobra AT</a></li> <li><a href="javascript:zweiframes('cobra.html','cobra2.html','bild.html')">Cobra Deutschland</a></li> <li><a href="javascript:zweiframes('partner.html','partner2.html','bild.html')">Unsere Partner</a></li> </ul> </li> <li style="margin-right:35px;"><a href="#" class="submenu">Navigation</a> <ul id="Link2Menu"> <li><a href="javascript:zweiframes('navi.html','navi2.html','navigation.html')">Navigationssystem</a></li> <li><a href="javascript:zweiframes('zubehoer.html','zubehoer2.html','navigation.html')">Zubehör</a></li> </ul> </li> <li style="margin-right:35px;"><a href="#" class="submenu">Entertainment</a> <ul id="Link3Menu"> <li><a href="javascript:zweiframes('cdtuner.html','cdtuner2.html','entertainment.html')">CD-Tuner</a></li> <li><a href="javascript:zweiframes('dvdtuner.html','dvdtuner2.html','entertainment.html')">DVD-Tuner</a></li> <li><a href="javascript:zweiframes('satantenne.html','satantenne2.html','entertainment.html')">Satelllitenantennen</a></li> <li><a href="javascript:zweiframes('lcdtv.html','lcdtv2.html','entertainment.html')">LCD-TV Geräte</a></li> <li><a href="javascript:zweiframes('lcdhalter.html','lcdhalter2.html','entertainment.html')">LCD-TV Halter</a></li> </ul> </li> <li style="margin-right:35px;"><a class="submenu" href="#">Einparken</a> <ul id="Link4Menu"> <li><a href="javascript:zweiframes('parkmaster.html','parkmaster2.html','einparken.html')">Einparkhilfe</a></li> <li><a href="javascript:zweiframes('rueckcameras.html','rueckcameras2.html','einparken.html')">Rückfahrkameras</a></li> </ul> </li> <li style="margin-right:35px;"><a class="submenu" href="#">Sicherheit</a> <ul id="Link5Menu"> <li><a href="javascript:zweiframes('gaswarner.html','gaswarner2.html','sicherheit.html')">Gaswarner</a></li> <li><a href="javascript:zweiframes('alarmsysteme.html','alarmsysteme2.html','sicherheit.html')">Alarmsysteme</a></li> <li><a href="javascript:zweiframes('cobraconnex.html','cobraconnex2.html','sicherheit.html')">CobraConnex Trackingsystem</a></li> </ul> </li> <li><a class="submenu" href="#">Download</a> <ul id="Link6Menu"> <li><a href="javascript:zweiframes('download.html','bedienung2.html','entertainment2.html')">Bedienungsanleitungen</a></li> <li><a href="javascript:zweiframes('download.html','kataloge2.html','entertainment2.html')">Kataloge</a></li> <li><a href="javascript:zweiframes('download.html','produktinfos2.html','entertainment2.html')">Produktinfos</a></li> </ul> </li> </ul> </div>   <table id="Tabelle_01" width="980" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="9"> <img src="Bilder/index_01.gif" width="979" height="6" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="6" alt="" /></td> </tr> <tr> <td colspan="4" rowspan="2"> <img src="Bilder/index_02.gif" width="740" height="57" alt="" /></td> <td colspan="2"> <img src="Bilder/Logo.gif" width="98" height="48" alt="" /></td> <td colspan="3" rowspan="3"> <img src="Bilder/index_04.gif" width="141" height="68" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="48" alt="" /></td> </tr> <tr> <td colspan="2"> <img src="Bilder/index_05.gif" width="98" height="9" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="9" alt="" /></td> </tr> <tr> <td colspan="6" rowspan="2"> <iframe id="bild" name="bild" src="bild.html" width="838" height="180" frameborder="0" scrolling="no"> </iframe></td> <td> <img src="Bilder/spacer.gif" width="1" height="11" alt="" /></td> </tr> <tr> <td rowspan="4"> <img src="Bilder/index_07.gif" width="15" height="686" alt="" /></td> <td rowspan="3"> <img src="Bilder/Newsbox.gif" width="115" height="662" alt="" /></td> <td rowspan="4"> <img src="Bilder/index_09.gif" width="11" height="686" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="169" alt="" /></td> </tr> <tr> <td colspan="6"> <img src="Bilder/index_10.gif" width="838" height="23" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="23" alt="" /></td> </tr> <tr> <td rowspan="2"> <img src="Bilder/index_11.gif" width="12" height="494" alt="" /></td> <td> <iframe id="framelinks" name="framelinks" src="text.html" width="400" height="470" frameborder="0" scrolling="auto"> </iframe></td> <td rowspan="2"> <img src="Bilder/index_13.gif" width="17" height="494" alt="" /></td> <td colspan="2"> <iframe id="framerechts" name="framerechts" src="webimages/index1.jpg" width="400" height="470" frameborder="0" scrolling="auto"> </iframe></td> <td rowspan="2"> <img src="Bilder/index_15.gif" width="9" height="494" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="470" alt="" /></td> </tr> <tr> <td> <img src="Bilder/index_16.gif" width="400" height="24" alt="" /></td> <td colspan="2"> <img src="Bilder/index_17.gif" width="400" height="24" alt="" /></td> <td> <img src="Bilder/index_18.gif" width="115" height="24" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="1" height="24" alt="" /></td> </tr> <tr> <td> <img src="Bilder/spacer.gif" width="12" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="400" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="17" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="311" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="89" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="9" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="15" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="115" height="1" alt="" /></td> <td> <img src="Bilder/spacer.gif" width="11" height="1" alt="" /></td> <td></td> </tr> </table>   <div id="menu_u"> <ul id="menulist2"> <li style="margin-right:120px;"> <a href="javascript:zweiframes('impressum.html','impressum2.html','kontaktb.html')" class="submenu">Impressum</a> </li> <li style="margin-right:120px;"> <a href="javascript:zweiframes('kontakt.html','kontakt2.html','kontaktb.html')" class="submenu">Kontakt</a> </li> <li style="margin-right:120px;"> <a href="javascript:zweiframes('presse.html','presse2.html','kontaktb.html')" class="submenu">Presse</a> </li> <li><a href="javascript:zweiframes('events.html','events2.html','kontaktb.html')" class="submenu">Events</a> </li> </ul> </div>  </body> </html>
Beitrag melden

–
Informationen zu den Bewertungsregeln
Navi-Leiste verschwindet in iFrame
B-ellanna 12.06.2006 12:02

css
– Informationen zu den Bewertungsregeln
Hallo Anika,
Schau mal hier:
http://forum.de.selfhtml.org/archiv/2006/5/t130234/#m841997
eine Frage in punkto i-frame gabs schonmal. Nur wird dir dann davon abgeraten, vielleicht gibts ja auch noch andere Lösungen...
Viele Grüße,
B-ellanna
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Navi-Leiste verschwindet in iFrame
  
  Anika 12.06.2006 12:06
  
  css
  – Informationen zu den Bewertungsregeln
  Hallo Anika,
  Schau mal hier:
  http://forum.de.selfhtml.org/archiv/2006/5/t130234/#m841997
  eine Frage in punkto i-frame gabs schonmal. Nur wird dir dann davon abgeraten, vielleicht gibts ja auch noch andere Lösungen...
  Viele Grüße,
  B-ellanna
  
  Hm, welche Alternative zu einem iFrame habe ich denn. Ich möchte nämlich beim anklicken verschiedener Menüpunkte ein Bild ändern. Dazu habe ich das Bild in einen iFrame gesetzt. Ansonsten wusste ich keine Möglichkeit dies zu tun.
  Danke
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Navi-Leiste verschwindet in iFrame
    
    wahsaga Homepage des Autors 12.06.2006 12:37
    
    css
    
    – Informationen zu den Bewertungsregeln
    hi,
    
    Hm, welche Alternative zu einem iFrame habe ich denn. Ich möchte nämlich beim anklicken verschiedener Menüpunkte ein Bild ändern. Dazu habe ich das Bild in einen iFrame gesetzt. Ansonsten wusste ich keine Möglichkeit dies zu tun.
    
    Du kannst mit Javascript einen Bildwechsel nach dem Prinzip des Anwendungsbeispiels der grafischen dynamischen Buttons machen.
    Für den Fall, dass Javascript nicht zur Verfügung steht, verlinkst du die Bilder noch zusätzlich alternativ, so dass diese dann einzeln betrachtet werden können.
    
    gruß,
    wahsaga
    
    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
    1. Navi-Leiste verschwindet in iFrame
      
      Anika 12.06.2006 12:52
      
      css
      
      – Informationen zu den Bewertungsregeln
      
      hi,
      
      Hm, welche Alternative zu einem iFrame habe ich denn. Ich möchte nämlich beim anklicken verschiedener Menüpunkte ein Bild ändern. Dazu habe ich das Bild in einen iFrame gesetzt. Ansonsten wusste ich keine Möglichkeit dies zu tun.
      
      Du kannst mit Javascript einen Bildwechsel nach dem Prinzip des Anwendungsbeispiels der grafischen dynamischen Buttons machen.
      Für den Fall, dass Javascript nicht zur Verfügung steht, verlinkst du die Bilder noch zusätzlich alternativ, so dass diese dann einzeln betrachtet werden können.
      
      gruß,
      wahsaga
      
      Hallo,
      danke für den Tipp. Mir ist allerdings nicht ganz klar wie das bei mir funktionieren soll.
      Ich habe ja verschiedenene Hauptmenüpunkte. Jeder Hauptmenüpunkt gehört einer Kategorie an. So soll also das entsprechende Bild angezeigt werden.
      Menüpkt Navigation => Bild 1
      Menüpkt Einparken => Bild 2
      Menüpkt Sicherheit => Bild 3
      ....
      Ich weiss ja aber nicht in welchem Menü sich der Nutzer gerade befindet, also kann ich das doch so nicht lösen oder?
      
      Beitrag melden
      
      –
      Informationen zu den Bewertungsregeln
      
      Übersicht
      
      alle Foren
      
      SELFHTML-Forum
      
      anmelden
      
      Benutzerkonto erstellen
      
      Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Anika: Navi-Leiste verschwindet in iFrame