Select Box, Dynamische CSS-Navigation und der IE

[Engin]

Hi,

hab da ein nicht nachvollziehbares Problem.

Ich hab eine select Box mit mehrfach Auswahl und die Dynamische CSS-Navigation.

Wenn man jetzt im IE 6 und kleiner über die Navigation hovert wird die select Box nicht überdeckt,
ich hab schon versucht die select Box relative zu positionieren und mit dem z-index unter
die Navigation zu zwingen, hat aber nichts mit z-index zutun, woran könnte es liegen?

Hier mal ein Bild zur veranschaulichung,

Das weiß eingerahmte ist die Box, die beim hovern der Navigation eingeblendet wird.

Grüße aus H im R,
Engin

[Gernot Back]

Hallo Engin,

da greift man gerne auf Wahsagas der Herr sei bei uns alte Tipps zurück ;-)

Gruß Gernot

[Engin]

Hi Gernot, hi martin,

Danke erstmal für die Tipps, ich wollte es mit Javascript umsetzen, bin aber da nicht grad bewandert,
was ist an folgendem Script falsch?

  
<a href="#" onmouseover="document.getElementById('fontweig').display = 'none'">Intern</a>

Ist das überhaupt der richtige Ansatz?

Mit CSS hatte ich es jetzt grad auch probiert,
das schlug leider auch fehl,

  
  ul#Navigation a:hover #fontweig {  
  display:none;  
  }

Grüße aus H im R,
Engin

[steckl]

Hi,

was ist an folgendem Script falsch?

Diese Frage könnte dir auch die Fehlerkonsole deines Browsers beantworten ...

<a href="#" onmouseover="document.getElementById('fontweig').display = 'none'">Intern</a>

  
... aber wenn ich schonmal am schreiben bin:  
Dein Code hat noch nicht genug style:  
document.getElementById('fontweig').style.display  
  
Und außerdem brauchst du wahrscheinlich auch noch einen onmouseout-Event, wenn das Menü anschließend wieder verschwinden soll.  
  

> Ist das überhaupt der richtige Ansatz?  
  
Ist deine Seite für User mit deaktiviertem JS noch benutzbar?  
  
  

> Mit CSS hatte ich es jetzt grad auch probiert,  
> das schlug leider auch fehl,  
>   
> ~~~css
  

>   ul#Navigation a:hover #fontweig {  
>   display:none;  
>   }

Dabei kann ich dir nicht wirklich weiterhelfen, aber du könntest noch beschreiben was "schlug fehl" bedeutet.

mfG,
steckl

[Engin]

Hi steckl,

Diese Frage könnte dir auch die Fehlerkonsole deines Browsers beantworten ...

Ich kontrollier immer im FF, da hatte ich jetzt solange rumprobiert, bis keine Fehlermeldung mehr kam,
im IE ging es trotzdem nicht.

Dein Code hat noch nicht genug style:
document.getElementById('fontweig').style.display

Danke für den Hinweis, das hatte gefehlt, drängt sich die nächste frage auf, kann ich nicht mit einem
Befehl 2 IDs ansprechen?

<ul onmouseover="document.getElementById('fontweig', 'fontsel').style.display = 'none'" onmouseout="document.getElementById('fontweig', 'fontsel').style.display = 'block'">

Ist deine Seite für User mit deaktiviertem JS noch benutzbar?

Generell ja, ob´s für User mit IE 6 und kleiner bei deaktiviertem Javascript noch gilt habe ich noch nicht getestet.

ul#Navigation a:hover #fontweig {
  display:none;
  }

> Dabei kann ich dir nicht wirklich weiterhelfen, aber du könntest noch beschreiben was "schlug fehl" bedeutet.  
  
Das funktioniert so nicht, zumindest nicht so, wie ich es mir erhofft hatte.  
  
Grüße aus H im R,  
Engin  

-- 
[Von wegen "Geld wächst nicht auf Bäumen"!](http://nimmet.de/nimmet-dateien/GeldAufBaum)  
  
![](http://nimmet.de/nimmet-bilder/valigator.gif)[Der Valligator](http://old.atomic-eggs.com/old_forum/messages/237.html#a1)  
  
["Computer sagt Nein"](http://www.comedycentral.de/index.php/Video/Detail/vid/541168/playerMode/fullscreen)

[ChrisB]

Hi,

was ist an folgendem Script falsch?

Diese Frage könnte dir auch die Fehlerkonsole deines Browsers beantworten ...

Nein, kann sie in dem Falle nicht.

<a href="#" onmouseover="document.getElementById('fontweig').display = 'none'">Intern</a>

>   
> ... aber wenn ich schonmal am schreiben bin:  
> Dein Code hat noch nicht genug style:  
> document.getElementById('fontweig').style.display  
  
Um das zu erreichen, was hier gewuenscht ist, fehlt es wirklich an Stil - aeh, style.  
Aber einen \*Fehler\* konnte die Fehlerkonsole auch beim vorherigen Code nicht melden - weil dir nichts und niemand verbietet, ein beliebiges HTML-Elementobjekt mit einer Eigenschaft namens display auszustatten. Das ist syntaktisch vollkommen korrekt - bewirkt nur natuerlich nicht das gewuenschte.  
  
MfG ChrisB

[Gernot Back]

Hallo Engin,

<a href="#" onmouseover="document.getElementById('fontweig').display = 'none'">Intern</a>

  

> Ist das überhaupt der richtige Ansatz?  
  

> ~~~css
  

>   ul#Navigation a:hover #fontweig {  
>   display:none;  
>   }

Das weiß ich nicht, ob da etwas falsch dran ist; es kommt ganz darauf an, was du in dein A-Element verschachtelt hast. Hoffentlich doch nur Inline-Elemente? Befindet sich in dem Element mit der ID "fontweig" das auszublendende Select-Element oder handelt es sich um das darüber einzublendende Navigations-Element?

Bei dem Ansatz, den Wahsaga damals verlinkt hat, wird ja einfach ein IFRAME-Element als Abdecklayer noch dazwischen gezogen, da wird das darunter liegende SELECT-Element also gar nicht ausgeblendet, sondern nur auch im IE6 wirksam überdeckt, quasi der Teufel SELECT mit dem Beelzebub IFRAME ausgetrieben.

Gruß Gernot

[Engin]

Hi Gernot,

es kommt ganz darauf an, was du in dein A-Element verschachtelt hast. Hoffentlich doch nur Inline-Elemente? Befindet sich in dem Element mit der ID "fontweig" das auszublendende Select-Element oder handelt es sich um das darüber einzublendende Navigations-Element?

Also, kurz zur Struktur, das A-Element ist ein Link in einem <li>,

<ul id="Navigation">  
      <li><a href="#">Intern</a>  
             <ul onmouseover="document.getElementById('fontweig', 'fontsel').style.display = 'none'" onmouseout="document.getElementById('fontweig', 'fontsel').style.display = 'block'">  
             <li><a href="#">Ein Link</a></li>  
             <li><a href="#">Zwei Links</a></li>  
             </ul>  
      </li>  
  </ul>  
  
 <p>  
              <select id="fontweig">  
 <option value="Georgia">Georgia</option>  
 <option value="Arial">Arial</option>  
 </select>  
 </p>

Mit dem onmouserover geht´s, allerdings wird da nur eine ID ausgeblendet.
onmouseover="document.getElementById('fontweig', 'fontsel').style.display = 'none'"

Bei dem Ansatz, den Wahsaga damals verlinkt hat, wird ja einfach ein IFRAME-Element als Abdecklayer noch dazwischen gezogen,

Da bin ich grad überfordert, wie soll ich bei meinem Konstrukt noch ein iframe zwischen kriegen?

da müsste ich ja evtl. in jedes <li> ein <iframe> packen.

Grüße aus H im R,
Engin

[Gernot Back]

Hallo Engin,

<ul onmouseover="document.getElementById('fontweig', 'fontsel').style.display = 'none'" onmouseout="document.getElementById('fontweig', 'fontsel').style.display = 'block'">
[code]

Die Methode heißt ja "getElementById" und nicht "getElementsByID", du kannst also nur jeweils EIN Element mit EINer ID so ansprechen.

Was du natürlich machen könntest, ist ALLE Elemente mit dem TagName SELECT im Document auf [code lang=css]visibility:hidden

  
`<ul onmouseover="[code lang=javascript]with(mySelects = document.getElementsByTagName('SELECT'))for(i=0;i<mySelects.length;i++)mySelects[i].style.visibility = 'hidden';`{:.language-html}" onmouseout="`with(mySelects = document.getElementsByTagName('SELECT'))for(i=0;i<mySelects.length;i++)mySelects[i].style.visibility = '';`{:.language-javascript}" >  
[/code]  
  
Der besseren Übersichtlichkeit halber würde ich das aber eher in einer ausgelagerten Funktion machen statt direkt im Eventhandler.  
;-)  
  

> Da bin ich grad überfordert, wie soll ich bei meinem Konstrukt noch ein iframe zwischen kriegen?  
  
Die werden bei dem Ansatz ja dynamisch passend zur Position und den Ausmaßen des abdeckenden Layers generiert.  
  
  
Gruß Gernot

-- 
[super me](http://community.de.selfhtml.org/my/visitenkarten/view.php?key=46)

[Engin]

Hi Gernot,

Die Methode heißt ja "getElementById" und nicht "getElementsByID", du kannst also nur jeweils EIN Element mit EINer ID so ansprechen.

Ich hatte mir schon gedacht, das es irgendwas mit der schreibweise zutun hat.

<ul onmouseover="[code lang=javascript]with(mySelects = document.getElementsByTagName('SELECT'))for(i=0;i<mySelects.length;i++)mySelects[i].style.visibility = 'hidden';" onmouseout="with(mySelects = document.getElementsByTagName('SELECT'))for(i=0;i<mySelects.length;i++)mySelects[i].style.visibility = '';" >
[/code]

Vielen Dank, bei meiner Version hatte ich eh noch das Problem, das die IDs fontweig und fontsel nur auf
einer Seite sind, daher hatte ich auf allen anderen Seiten auch Fehlermeldungen im FF,
mit deiner Version nicht.

Der besseren Übersichtlichkeit halber würde ich das aber eher in einer ausgelagerten Funktion machen statt direkt im Eventhandler.
;-)

Ich werd´s probieren, ich glaube aber nicht, das ich es hinkrieg, ist aber nicht
so Wild, das betrifft eh nur die eine Seite, und bisschen unübersichtlicher Code hat ja noch niemandem
geschadet. :-)

Die werden bei dem Ansatz ja dynamisch passend zur Position und den Ausmaßen des abdeckenden Layers generiert.

Bei einem einfach eingeblendeten div wäre das kein Problem, da noch ein <iframe> drunter zu packen, aber bei
einer verschachtelten Liste? Da müsste man wohl den <iframe> unter das <ul> legen,
das ist mir aber grad zuviel Denkarbeit, ich muss erstmal das Dönertier und die Pommes verarbeiten bis ich wieder
richtige Denkarbeit leisten kann. :-)

Grüße aus H im R,
Engin

[Gernot Back]

Hallo Engin,

das ist mir aber grad zuviel Denkarbeit, ich muss erstmal das Dönertier und die Pommes verarbeiten bis ich wieder
richtige Denkarbeit leisten kann. :-)

Ich habe mal gehört, dass diese Schnellimbiss-Variante von Döner-Sandwich erst in Deutschland entstanden ist, dass also der Döner in Deutschland ähnlich der Pizza in den USA erst zu dem wurde, was er/sie heute ist und so verändert dann auch wieder in die jeweiligen Ursprungsländer Türkei und Italien zurückkam. Stimmt das eigentlich, weißt du was darüber?

In Rom saß ich sogar mal in einer Pizzeria, wo jemand am Nachbartisch seine Pizza mit Pommes Frites als zusätzlichem Wunschbelag serviert bekam.

Gruß Gernot

[steckl]

Hi,

Ich habe mal gehört, dass diese Schnellimbiss-Variante von Döner-Sandwich erst in Deutschland entstanden ist, dass also der Döner in Deutschland ähnlich der Pizza in den USA erst zu dem wurde, was er/sie heute ist und so verändert dann auch wieder in die jeweiligen Ursprungsländer Türkei und Italien

http://de.wikipedia.org/wiki/Döner#Geschichte

mfG,
steckl

[ChrisB]

Hi,

In Rom saß ich sogar mal in einer Pizzeria, wo jemand am Nachbartisch seine Pizza mit Pommes Frites als zusätzlichem Wunschbelag serviert bekam.

Na ja, auf eine Pizza kannst du ja so gut wie alles drauf packen ... so ist sie ja geruechteweise auch urspruenglich mal entstanden, als "Resteverwertung" - Pizzaboden als Grundlage fuer alles, was noch "uebrig" war und nun igendwie mal weg muss.

MfG ChrisB

[Engin]

Hi Gernot,

Ich habe mal gehört, dass diese Schnellimbiss-Variante von Döner-Sandwich erst in Deutschland entstanden ist, dass also der Döner in Deutschland ähnlich der Pizza in den USA erst zu dem wurde, was er/sie heute ist und so verändert dann auch wieder in die jeweiligen Ursprungsländer Türkei und Italien zurückkam. Stimmt das eigentlich, weißt du was darüber?

Genaueres weiss ich da auch nicht, aber so wie auf der Wiki Seite, die steckl verlinkt hat hatte
ich es in einer reportage gesehen, also das in den 70ern ein Berliner Deutsch/Türke auf die Idee kam,
in einer schnell lebigen Stadt das "Döner to Go" anzubieten.

Die Idee war damals mehr oder weniger eine "Objekt Orientierte" Lösung. :-)

Als der Erfinder gemerkt hat, das in Berlin sich niemand die Zeit nimmt, sich mal in Ruhe
hinzusetzen und ein Döner Teller zu Essen, entwickelte er den "Döner to Go".

Er hat einfach alles, was auf den Döner Teller kam Logisch miteinander verknüpft. :-)

In Rom saß ich sogar mal in einer Pizzeria, wo jemand am Nachbartisch seine Pizza mit Pommes Frites als zusätzlichem Wunschbelag serviert bekam.

Das ist auch meine bevorzugte Beilage zu allem. :-)

Aber das beste Essen habe ich bisher in China serviert bekommen, da hat alles geschmeckt,
und Dick machen tut das Chinesische Essen auch nicht. Jeden tag 4-5 üppige
Mahlzeiten und ich kam nach 3 Wochen mit 4-5 Kilo weniger auf den Rippen zurück.

Ich vermisse das Putzige Volk und das leckere Essen.  :-)

Grüße aus H im R,
Engin

[Der Martin]

Hallo Engin,

hab da ein nicht nachvollziehbares Problem.

aber ein altbekanntes.

Wenn man jetzt im IE 6 und kleiner über die Navigation hovert wird die select Box nicht überdeckt,
ich hab schon versucht die select Box relative zu positionieren und mit dem z-index unter
die Navigation zu zwingen, hat aber nichts mit z-index zutun, woran könnte es liegen?

Am IE und seiner Überzeugung, die Eingabefelder seien das Wichtigste auf der Seite, was unter allen Umständen zu sehen sein muss.

Solche Effekte (die übrigens auch mit iframes auftreten) kriegst du beim IE nur weg, indem du die Formularfelder gleichzeitig mit dem Hover-Effekt des Menüs ausblendest (ihnen z.B. vorübergehend display:none zuweist).
Schwierig wird das bei fließenden Layouts, bei denen die Plazierung der Formularfelder nicht fest mit der Plazierung des Menüs verbunden ist; unmöglich wird es, wenn die Formularfelder gar nur teilweise überdeckt sein sollen.

So long,
 Martin

[Engin]

Hi Engin,

hab grade die <iframe> Lösung für dieses Problem geschnallt.

Aus Archiv Technischen Gründen und so....

Also, da es bei dem problem nur um die IE´s 6 und kleiner geht, spricht man auch nur diese an,

  
<ul>  
<li><a href="#">Intern</a>  
      <ul>  
<!--[if lt IE 7]><li><iframe src="/songtext-dateien/background.php" id="frame_id"></iframe></li><![endif]-->  
  
<li><a href="#">Seite 1</a></li>  
Hier dann ein Paar Links  
          </ul>  
     </li>  
</ul>

Die verschachtelten <li>s müssen relative:positioniert sein und die Grösse der
verschachtelten <li>s sollte halbwegs fest sein, bei mir 10em.

Dann die CSS für das frame mit der ID #frame_id,

#frame_id {  
width:10em;  
wid\th:11em;  
height:300px;  
position:absolute;top:0;left:0;  
z-index:1;  
}

Da der IE 5.01 Probleme mit dem ganzen hat entziehen wir diesem Genossen das <iframe> in dem wir im <head>
mit einem Conditional Comment das <iframe> _nur_ für den IE 5.01 auf display:none; setzen.

  
<!--[if lt IE 5.1]>  
<style type="text/css">  
#frame_id {  
display:none;}  
</style>  
<![endif]-->  

Was sagen die Experten dazu? Zu kompliziert oder richtig so? Funktionieren tut es auf meinem System und Valide ist es auch.

Grüße aus H im R,
Engin

[Gernot Back]

Hallo Engin,

Also, da es bei dem problem nur um die IE´s 6 und kleiner geht, spricht man auch nur diese an,

Da es hier um eine Navigation geht, die für den IE6 und kleiner sowieso nur mit Javascript funktioniert, kann man diese Lösung auch mit Javascript bauen, dynamisch die offsetWidth und offstHeight auslesen, mit document.createElement() ein IFRAME-Element generieren und es nur für den Fall, dass es auch die Eigenschaft "allowTransparency" von Hause aus kennt als absolut positioniertes, entsprechend dimensioniertes Kind mit z-index:-1 und einem sterilen "javascript:void(0)" im src-Attribut dem ausklappenden Layer per appendChild() unterschieben. Onmouseout wird das Kind per removeChild() auch wieder entzogen.

Der IE7, für den diese Maßnahmen eigentlich nicht mehr nötig sind, wird davon zwar auch betroffen, aber mit dieser Art des ständigen Kinder-Unterschiebens und -Entzugs wird er halt für die Erbsünde bestraft.

Irgendwo gab es dazu auch mal einen besseren Link, der das genau beschrieb. Ich finde ihn im Moment nicht.

Gruß Gernot

[Engin]

Hi Gernot,

Da es hier um eine Navigation geht, die für den IE6 und kleiner sowieso nur mit Javascript funktioniert, kann man diese Lösung auch mit Javascript bauen, dynamisch die offsetWidth und offstHeight auslesen, mit document.createElement() ein IFRAME-Element generieren und es nur für den Fall, dass es auch die Eigenschaft "allowTransparency" von Hause aus kennt als absolut positioniertes, entsprechend dimensioniertes Kind mit z-index:-1 und einem sterilen "javascript:void(0)" im src-Attribut dem ausklappenden Layer per appendChild() unterschieben. Onmouseout wird das Kind per removeChild() auch wieder entzogen.

Hab grade meine lösung umbenannt, es ist die HTML/CSS Lösung für Leute, die kein Javascript können, wie ich.  :-) (noch nicht können:))

Ich bleib wohl auch bei deiner Javascript lösung mit hidden, mal schauen. Bin noch Recht unentschlossen.

Grüße aus H im R,
Engin