Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „ie6 / hover / css“

mfwenzel

Nicht mehr ganz neu hier

Moin,

leider bin ich bei google & co nicht fündig geworden.
Meine Navi klappt sich per a:hover aus. Das funktioniert auch ganz dolle, nur der leiber Herr IE6 möchte das nicht.

HTML ist:

Code:
 <!--begin menusidebar-->
 <div id="navigation">
   <ul>
     <a href="index_k2.html"><li>Informationen</li> </a>    
     <li><div class="arrow"><a href="typen/106.html" class="arrowfuersub">Haustypen</a></div>
       <ul>
           <a href="typen/106.html"><li>Haus 106</li></a>
           <a href="typen/111.html"><li>Haus 111</li></a>
           <a href="typen/112.html"><li>Haus 112</li></a>
           <a href="typen/116.html"><li>Haus 116</li></a>
         <a href="typen/124.html"><li>Haus 124</li></a>
         <a href="typen/124a.html"><li>Haus 124a</li></a>    
          <a href="typen/130.html"><li>Haus 130</li></a>
           <a href="typen/131.html"><li>Haus 131</li></a>
    </ul>      
     <a href="lageplan_k2.html"><li>Lageplan</li></a>
     <a href="fortschritt.html"><li>Baufortschritt 1. BV</li></a>
     <a href="baubeschreibung.html"><li>Baubeschreibung</li></a>
     <a href="../index.html"><li>&lt;&lt; zurück</li></a></ul></div>
      </div>
 <!--end menusidebar-->
und CSS ist
Code:
@charset "utf-8";
/* CSS Document Sidebar Navigation*/


/*Main Menu*/
#navigation ul {
    margin:0px;
    padding:0px;
    background-color:#444;
}


#navigation ul li {
    height:30px;
    line-height:30px;
    list-style:none;
    padding-left:20px;
    color:#FFF;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursor:pointer;
}


#navigation ul li:hover {
    background-color:#F57601;
    position:relative;
}

/*Sub Menu*/
#navigation ul ul {
    display:none;
    position:absolute;
    left:157px;
    top:5px;
    border:#fff solid;
    border-width:1px;
    background-color:#F57601;
}
#navigation ul li:hover ul {display:block;}

#navigation ul ul li {
    width:80px;
    float:left;
    display:inline;
    border:none;
}
#navigation ul ul li:hover {
    text-decoration:underline;
    border:none;
}

#navigation li:hover ul li ul {display:none;}

#navigation ul ul li ul {left:110px; background-color:#0099CC;}
#navigation ul ul li:hover ul {display:block;}
#navigation ul li a {
    color: #FFF;
    display: block;
}
.arrow        {
    background-image: url(../images/MenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
 
Zuletzt bearbeitet:

MyBad

localhorst

AW: ie6 / hover / css

Hallo!

Ja, der IE 6 macht so einiges nicht. Aber dein Source ist auch nicht gerade valide! Den würde ich noch einmal überarbeiten. Der strotzt nur so vor Fehlern. Im XHTML ist zum Beispiel <li>-Tags innerhalb eines <a>-Tags verboten. Aber da ist noch mehr.

Gruß
Tim
 

stroyer

Aktives Mitglied

AW: ie6 / hover / css

Du könntest dagegegn z.B.
<a href="typen/106.html"><li>Haus 106</li></a>
gegen
<li><a href="typen/106.html">Haus 106</a></li>
tauschen.

Zitat: "Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags."

Das heißt li:hover geht im IE6 generell nicht.
Nur a:hover.
Das heißt, du musst irgendwie eine Struktur bauen, die ungefähr wie <li><a><div>text</div></a></li> aussieht.
 
Zuletzt bearbeitet:

quasibodo

Alptraum für Spammer

AW: ie6 / hover / css

...und Du solltest auch mal angeben, was das für ein html sein soll:
HTML 4.01 oder XHTML?
Transitional oder Strickt?

Mal wird ein <li>-Tag geschlossen, mal nicht.

Hol Dir erst mal die Webdeveloper-Toolbar für den Firefox, dann schau mal bei
SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) und
CSS 4 You - The Finest in Stylesheets
die Regeln an, die allesamt beachtet werden sollten.

Fertige Lösungen, die u.a. auch im IE funzen, findet man, wenn man nach "CSS-Flyout" gugelt...
 

SineTempore

Nicht mehr ganz neu hier

AW: ie6 / hover / css

SELFHTML schrieb:
Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über JavaScript.

Der IE bis zur Version 6 unterstützt das :hover nur bei <a>-Tags
 

stroyer

Aktives Mitglied

AW: ie6 / hover / css

Du könntest dagegegn z.B.
<a href="typen/106.html"><li>Haus 106</li></a>
gegen
<li><a href="typen/106.html">Haus 106</a></li>
tauschen.

Zitat: "Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags."

Das heißt li:hover geht im IE6 generell nicht.
Nur a:hover.
Das heißt, du musst irgendwie eine Struktur bauen, die ungefähr wie <li><a><div>text</div></a></li> aussieht.

Hab ich ja schon geschrieben. Aber wenn man die Tags richtig verschachtelt, ist es sehrwohl möglich!
 

sokie

Mod | Web

AW: ie6 / hover / css

Hab ich ja schon geschrieben. Aber wenn man die Tags richtig verschachtelt, ist es sehrwohl möglich!
Wir brennen darauf, diese Aussage an einem kleinen "korrekt geschachtelten" Beispiel für das /*Sub Menue*/ des Eingangspostings für den IE6 zu sehen.

bis dahin kann man eben nur feststellen, dass es ohne Javascript für den IE6 nicht geht.(s. Post #5 Sine Tempore)
 

stroyer

Aktives Mitglied

AW: ie6 / hover / css

Dass das Untermenü dargestellt wird, wenn man aufs entsprechende Hauptmenü fährt, funktioniert leicht.
Ich habe allerdings nicht bedacht, dass man a:hover nicht ineinander verschachteln kann (es ist immer maximal nur bei einem Link :hover aktiv)
Auf zweiter Ebene wird es deshalb unmöglich, es nach meiner Idee zu machen.
Ich habe dann einfach eine imagemap darüber gelegt.
Die Methode ist allerdings unschön und ich gebe zu, dass Javascript wirklich die bessere Lösung ist.
HTML:
<html>
  <head>
    <style>
      #navi a .main
        {
          background-color:#aaa;
          width:100%;
          padding:10px;
        }
      .fly
        {
          position:absolute;
          margin-left:-100px;
          background-color:yellow;
          width:100px;
          height:60px;
        }
      .fly img
        {
          border:none;
          position:absolute;
        }
      #navi a .fly
        {
          display:none;
        }
      #navi a:hover .main
        {
          background-color:orange;
        }
      #navi a:hover .fly
        {
          display:inline;
        }
      a
        {
          cursor:pointer;
        }
    </style>
  </head>
  <body>
    <span id="navi" style="width:300px;">
      <a href="#">
        <span class="main">
          Informationen
        </span>
      </a>
      <a href="#">
        <span class="main">
          Haustypen
        </span>
        <span class="fly">
          <img src="1x1transparent.gif" width="100" height="60" usemap="#m" />
          <map name="m">
            <area shape="rect" coords="0,0,100,20" href="#1">
            <area shape="rect" coords="0,20,100,40" href="#2">
            <area shape="rect" coords="0,40,100,60" href="#3">
          </map>
            content1
          <br />
            content2
          <br />
            content3
        </span>
      </a>
      <a href="#">
        <span class="main">
          Lageplan
        </span>
      </a>
    </span>
  </body>
</html>

(funktioniert nur im IE 6 vom CSS her schön bzw. im Quirks-Mode vom IE8 )
 
Zuletzt bearbeitet:

mfwenzel

Nicht mehr ganz neu hier

AW: ie6 / hover / css

Hm ich merke schon...

ich werd mein Menü wohl in Java machen. Ist sicherlich die "schönste" Variante.

Vielen Dank!
 

MyBad

localhorst

AW: ie6 / hover / css

Das Menü musst du schon in HTML mit CSS erstellen aber das aufklappen des Untermenüs musst du wohl oder übel mit JavaScript lösen.
 

stroyer

Aktives Mitglied

AW: ie6 / hover / css

Ich würde dir eventuell sogar empfehlen ein Framework wie mootools oder jquery zu verwenden, damit kannst du das Menü animieren (z.B. ein ganz einfaches wie auf )
 

spacefront

Aktives Mitglied

AW: ie6 / hover / css

Hmm vielleicht dem IE6 nicht mehr so beachten.
Nur so kann man den mist langsam loswerden. Oder zumindest eine Abgepeckte IE 6 Version machen.

Nur so mal als Idee
 

stroyer

Aktives Mitglied

AW: ie6 / hover / css

Wenn Javascript nicht funktioniert, tun es behavior Scripts auch nicht.
Du kannst dir im Prinzip aussuchen, ob du bei A) allen Browsern ohne Javascript, B) allen IE6 oder C) allen IE6 ohne Javascript eine schirchere Webite in kauf nimmst.
 

RolfiD

Noch nicht viel geschrieben

AW: ie6 / hover / css

Was mir insgesamt nicht ganz klar ist:

Geht es jetzt mehr um die Mängel von IE6 (und Konsorten) oder mehr um die Nutzung von Hover-Effekten in Untermenus?
In leterem Fall könnte man ja auch im Untermenu auf diese Effekte Verzichten ?

Ist natürlich optisch nicht so schön und "konsequent".

Och bin halt auch gerade auf der Suche nach Möglichkeiten, rein mit CSS (und HTML bzw. XHTML) Button-"ähnliche" Optik in UL-Menus zu erreichen.

Wo kann man eigentlich praktische Beispiele finden?

Vielen Dank für etwaige Kommentare, bin (noch) kein versierter CSS-Nutzer ;-)
 

MyBad

localhorst

AW: ie6 / hover / css

Das Problem am IE 6 ist, dass man rein mit CSS und HTML keine Aufklappbaren Untermenüs hinbekommt. Dafür muss man leider immer wieder auf JavaScript zurückgreifen.

Der Aufbau eines Untermenüs ist recht simpel und könnte etwa so aussehen:

HTML:
<ul class="hauptmenue">
  <li>Top 1</li>
  <li>
       Top 2 - mit Untermenue
       <ul class="untermenue">
         <li>Sub 1</li>
         <li>Sub 2</li>
       </ul> 
  </li>
</ul>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.851
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben