z-index Problem !?

Hier gehört alles hin, was mit Stylesheets und Styleangaben zu tun hat.

Moderatoren: King of the road, sejuma, Adlerauge, Friedel

z-index Problem !?

Beitragvon WolfgangB am 06.07.2018, 15:16

Hallo und Guten Tag,
ich habe auf meiner Seite erlaubterweise per Script ein Slide-in-Menü eingebaut, das fast überall funtioniert. Nur an einer Stelle legt sich das ausgefahrene Menü unter die auf der Seite definierten DIVs - sieht nicht so toll aus:
Bild

Ich habe schon eine ganze Weile mit mit diversen Werten von "z-index=" herumexperimentiert, aber in keinem der mir zur Vefügungs stehenden Browsern legt sich das Menü in den Vordergrund.

Die drei überlagernden DIVs in der ausgelagerten CSS-Datei lauten:
(Bücher)
#Inh2 {position:absolute; top: 87px; left: 5px; width: 191px; height:161px; border-width:2px; border-style:solid; z-index:-1;}
(aufgeschlagenes Buch)
#Inh3 {position:absolute; top:254px; left: 80px; width: 200px; height: 25px; z-index:1;}
(unter dem aufgeschlagenen Buch befindliche Grafik)
#Inh5 {position:absolute; top:475px; left: 23px; width: 160px; height: 22px; z-index:-1;}

Ein Teil des Slide-In-Menüs in der ausgelagerten JavaScrpit-Datei lautet:
if(Browser=="IE"||Browser=="NS6")
{document.write("<DIV ID='Logo' STYLE='position:absolute; top:1; z-index=5; visibility:hidden;' onmouseover='zeigen()' onmouseout='verstecken()'>")}
else
{document.write("<LAYER NAME=\"Logo\" top=1 visibility='hide' onmouseover='zeigen()' onmouseout='verstecken()' z-index='5'>")}
document.write("<table class=RM><tr><td class=RM40>")

Hat jemand einen Vorschlag, wie das Menü in den Vordergrund kommt ?

Wer sehen möchte, wie unschön es in Gänze wirkt und klickst Du "Erste Hilfe".

Vorab schon einmal ...
Bild
... und ein schönes Wochenende
Wolfgang
WolfgangB
 

Diese Werbung wird von Google bereitgestellt. Wenn du ein Werbebanner anklickst, wird die Zielseite normalerweise statt meiner Homepage angezeigt. Wenn du sie lieber in einem neuen Fenster oder in einem neuen Tab sehen willst, kannst du in den meisen Browsern die Shift- bzw. die Strg-Taste gedrückt halten, während du die Werbung anklickst.

Re: z-index Problem !?

Beitragvon Friedel am 07.07.2018, 14:47

Hallo Wolfgang.

Schöne Site. Das Layout gefällt mir. Schade, dass du es mit Frames aufgebaut hast. Den Fehler habe ich auch gemacht und arbeite seit Jahren daran, das zu ändern. Daher sind die sichtbaren Inhalte inzwischen sehr veraltet.

Ich habe dieses Wochenende zwar keine Zeit um mich mit sowas zu befassen, aber natürlich war ich neugierig, was das Problem verursacht. Ich habe mir die Scriptdateien daher nicht genau angesehen. Vielleicht kann ich dir trotzdem schon helfen.

Die weiße Infobox erzeugst du durch eine Tabelle. Das ist nicht nur sehr unsauber, sondern kann auch Probleme machen. Jedenfalls haben die Tabelle (<table class="RM">), der enthaltene <tbody>, die <tr> oder die Zellen <td class="RM40"> und <td class="RM20"> keinen Z-Index. Daher liegt <div id="EHi1" style="width: 196px; height=164px;"> dank des enthaltenen z-index:1 darüber.

Dazu kommt, dass die meisten Browser die CSS-Eigenschaften ganz oder teilweise nicht berücksichtigen, wenn solche Syntaxfehler enthalten sind. Im style-Attribut musst du immer CSS-Syntax (width: 196px;) verwenden und nicht Html-Syntax ( height=164px;) Diese Eigenschaften solltest du aber im Stylesheet festlegen.

Dein Quellcode ist leider sehr unstrukturiert. Da findet man doch keine Fehler. Wenn du z.B. nicht
Code: Alles auswählen
<p class=Bls>Da Du Dich entschlossen hast, meine Seite zu durchst&ouml;bern, kommst Du um Navigation nat&uuml;rlich nicht herum - das Navigationsmen&uuml; funktioniert <i> hier</i> zu Klausur-Zwecken jedoch ein wenig anders <b>!</b></p>
<center><table class=t75C height=490><tr><td id=w20 rowspan=4 background=Bilder/hg.gif><img border=0 src=Bilder/9601-EHKopf.jpg width=205 height=85 usemap=#KopfLinks><map name=KopfLinks><area shape=rect coords="39,19,64,55" href=# onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()" onClick="return false"><area shape=rect coords="77,18,121,41" href=# onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()" onClick="return false"><area shape=rect coords="135, 30, 158, 50" href=# onMouseover="showmenu(event,linkset[2])" onMouseout="delayhidemenu()" onClick="return false"><area shape=rect coords= "79, 65, 120, 84" href=# onMouseover="showmenu(event,linkset[3])" onMouseout="delayhidemenu()" onClick="return false"></map>
<div id=EHi1 style="width: 196px; height=164px;"><a href=# onMouseover="showmenu(event,linkset[4])" onMouseout="delayhidemenu()" onClick="return false"><img border=0 src=Bilder/Inh210.jpg width=21 height=160></a><a href=# onMouseover="showmenu(event,linkset[5])" onMouseout="delayhidemenu()" onClick="return false"><img border=0 src=Bilder/Inh220.jpg width=21 height=160></a><a href=# onMouseover="showmenu(event,linkset[6])" onMouseout="delayhidemenu()" onClick="return false"><img border=0 src=Bilder/Inh230.jpg width=21 height=160></a><a href=# onMouseover="showmenu(event,linkset[7])" onMouseout="delayhidemenu()" onClick="return false"><img border=0 src=Bilder/Inh240.jpg width=21 height=160></a><a href=# onMouseover=showmenu(event,linkset[8]) onMouseout=delayhidemenu() onClick="return false"><img border=0 src=Bilder/Inh250.jpg width=21 height=160></a><a href=# onMouseover=showmenu(event,linkset[9]) onMouseout=delayhidemenu() onClick="return false"><img border=0 src=Bilder/Inh260.jpg width=21 height=160></a><a href=# onMouseover="showmenu(event,linkset[10])" onMouseout=delayhidemenu() onClick="return false"><img border=0 src=Bilder/Inh270.jpg width=21 height=160></a><a href=# onMouseover="showmenu(event,linkset[11])" onMouseout="delayhidemenu()" onClick="return false"><img border=0 src=Bilder/Inh280.jpg width=21 height=160><img border=0 src=Bilder/Inh298.gif width=21 height=160></a><img border=0 src=Bilder/Inh299.gif width=7 height=163></div><center><img src=Bilder/Inh300.gif usemap=#GB><map name=GB><area shape=rect coords="0, 0, 199, 21" href=# onMouseover="showmenu(event,linkset[12])" onMouseout="delayhidemenu()" onClick="return false"></map>
<div id=EHi2><div id=EHi3><a href ...
sondern
Code: Alles auswählen
<p class=Bls>Da Du Dich entschlossen hast, meine Seite zu durchst&ouml;bern, kommst Du um Navigation
nat&uuml;rlich nicht herum - das Navigationsmen&uuml; funktioniert <i> hier</i> zu Klausur-Zwecken
jedoch ein wenig anders <b>!</b></p>
<center>
  <table class=t75C height=490>
    <tr>
      <td id=w20 rowspan=4 background=Bilder/hg.gif>
        <img border=0 src=Bilder/9601-EHKopf.jpg width=205 height=85 usemap=#KopfLinks>
        <map name=KopfLinks>
          <area shape=rect coords="39,19,64,55" href=# onMouseover="showmenu(event,linkset[0])"
            onMouseout="delayhidemenu()" onClick="return false">
          <area shape=rect coords="77,18,121,41" href=# onMouseover="showmenu(event,linkset[1])"
            onMouseout="delayhidemenu()" onClick="return false">
          <area shape=rect coords="135, 30, 158, 50" href=# onMouseover="showmenu(event,linkset[2])"
            onMouseout="delayhidemenu()" onClick="return false">
          <area shape=rect coords= "79, 65, 120, 84" href=# onMouseover="showmenu(event,linkset[3])"
            onMouseout="delayhidemenu()" onClick="return false">
        </map>
        <div id=EHi1 style="width: 196px; height=164px;">
          <a href=# onMouseover="showmenu(event,linkset[4])" onMouseout="delayhidemenu()" onClick="return false">
            <img border=0 src=Bilder/Inh210.jpg width=21 height=160>
          </a>
          <a href=# onMouseover="showmenu(event,linkset[5])" onMouseout="delayhidemenu()" onClick="return false">
            <img border=0 src=Bilder/Inh220.jpg width=21 height=160>
          </a>
          <a href=# onMouseover="showmenu(event,linkset[6])" onMouseout="delayhidemenu()" onClick="return false">
            <img border=0 src=Bilder/Inh230.jpg width=21 height=160>
          </a>
          <a href=# onMouseover="showmenu(event,linkset[7])" onMouseout="delayhidemenu()" onClick="return false">
            <img border=0 src=Bilder/Inh240.jpg width=21 height=160>
          </a>
          <a href=# onMouseover=showmenu(event,linkset[8]) onMouseout=delayhidemenu() onClick="return false">
            <img border=0 src=Bilder/Inh250.jpg width=21 height=160>
          </a>
          <a href=# onMouseover=showmenu(event,linkset[9]) onMouseout=delayhidemenu() onClick="return false">
            <img border=0 src=Bilder/Inh260.jpg width=21 height=160>
          </a>
          <a href=# onMouseover="showmenu(event,linkset[10])" onMouseout=delayhidemenu() onClick="return false">
            <img border=0 src=Bilder/Inh270.jpg width=21 height=160>
          </a>
          <a href=# onMouseover="showmenu(event,linkset[11])" onMouseout="delayhidemenu()" onClick="return false">
            <img border=0 src=Bilder/Inh280.jpg width=21 height=160>
            <img border=0 src=Bilder/Inh298.gif width=21 height=160>
          </a>
          <img border=0 src=Bilder/Inh299.gif width=7 height=163>
        </div>
        <center>
          <img src=Bilder/Inh300.gif usemap=#GB>
          <map name=GB>
            <area shape=rect coords="0, 0, 199, 21" href=# onMouseover="showmenu(event,linkset[12])" onMouseout="delayhidemenu()" onClick="return false">
          </map>
          <div id=EHi2>
            <div id=EHi3>
              <a href ...
schreiben würdest, wäre das ganze sehr viel übersichtlicher. Eigentlich ist dein Quellcode ja noch viel unübersichtlicher als hier dargestellt, denn der von mir gepostete Teil sind ja bei dir nur 4 Zeilen, die endlos lang sind. Wenn alle CSS-Deklarationen im Stylesheet wären und die Zeilen so kurz wären, dass sie nicht umgebrochen werden, wäre es recht übersichtlich. Auch so sieht man in dem von mir überarbeiteten Teil schon auf Anhieb, dass du <center> mehrmals verwendest, aber nie beendest.
★ ★ ★ Ich beantworte grundsätzlich keine Supportanfragen per Email oder PN. ★ ★ ★
Benutzeravatar
Friedel
Administrator
Administrator
 
Beiträge: 4753
Registriert: 15.11.2004, 01:39
Wohnort: Weingarten/Pfalz

Re: z-index Problem !?

Beitragvon WolfgangB am 08.07.2018, 20:00

Hallo Friedel,
zunächst einmal vielen Dank für Deine Antwort nebst werttvollen Hinweisen.

Die 'Infobox' - wie Du sie nennst - ist Teil des Slide-In-Menüs, das ich in grauer Vorzeit zum größten Teil blind übernommen habe. Ist keine Entschuldigung - nur eine Erklärung.
Daher stammen auch noch die altertümlichen und damals vielleciht noch notwendigen Abfragen, welcher Brwoser denn benutzt wird.

Die Sache mit der Strukturierung ist sicher richtig, läßt sich allerdings in einem Fall nicht machen, ohne das Layout zu zerstören.
Den Rest der Seite habe ich bereits im Wesentlichen strukturiert und nebenbei einiges an Fehlern ausgemerzt.

Noch ein schönes Rest-Wochenende

Wolfgang
WolfgangB
 


Zurück zu CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

cron