Bruzzler: Navigation mit Hover Effekt wird im IE nicht dargestellt

SELF-Forum

Navigation mit Hover Effekt wird im IE nicht dargestellt

Bruzzler
– Informationen zu den Bewertungsregeln

Hallo zusammen,

bin neu hier in diesem Forum, aber glaubt mir, ich habe schon ewig gesucht und auch schon viele Tipps gefunden, wie man den Hover Effekt auch im IE <=6 einbinden kann. Allerdings bin ich doch zu sehr Anfänger, und hoffe auf Eure Hilfe.
Im Firefox sieht ja alles soweit ganz schön aus, nur wie bekomme ich den gleichen (hover) Effekt im IE hin?

Vielen Dank schonmal.
Bruzzler

Hier der HTML Code und das CSS

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Unbenanntes Dokument</title>  
<link href="css/navi.css" rel="stylesheet" type="text/css" />  
</head>  
  
<body><div id="container">  
<div id="navigation">  
    <ul id="nav">  
      <li class="on"><a href="#">Home</a></li>  
      <li class="off"><a href="#">Über mich</a></li>  
      <li class="off"><a href="#">Galerie</a>  
          <ul id="subnav_gal">  
            <li><a href="#">Buch</a></li>  
            <li><a href="#">Film</a></li>  
            <li><a href="#">Kunst</a></li>  
            <li><a href="#">Architektur</a></li>  
            <li><a href="#">Technik</a></li>  
          </ul>  
      </li>  
      <li class="off"><a href="#">Referenzen</a></li>  
      <li class="off"><a href="#">Kontakt</a></li>  
    </ul>  
  </div>  
  </div>  
</body>  
</html>  


* {  
 margin: 0;  
 padding: 0;  
}  
body {  
 background-color: #7a7a82;  
}  
  
  
#container {  
 padding: 2px 50px 2px 50px;  
 width: 940px;  
 margin: 0 auto;  
}  
  
#navigation {  
 vertical-align: middle;  
}  
  
#nav {  
 margin-left: 142px;  
}  
  
#nav li.on ul, #nav li.off ul {  
 margin: 0;  
 padding: 0;  
}  
  
#nav a {  
 text-decoration: none;  
}  
  
#nav li { /*float the main list items*/  
 margin: 0;  
 float: left;  
 display: block;  
 text-align:center;  
 padding: 0 8px;  
}  
  
#nav li ul {  
 display: none;  
}  
  
#nav .off #subnav_gal {  
 margin-left: -260px;  
  
}  
  
#nav li.off ul, #nav li.on ul { /*put the subnav below*/  
 position: absolute;  
 top: 153px;  
 *top: 155px;  
 background: #d6e3b0;  
 height: 28px;  
 width: 524px;  
 *width: 554px;  
 padding-left: 110px;  
 *padding-left: 80px;  
}  
  
#nav li a {  
 color: #d6e3b0;  
 font-weight: bold;  
 display: block;  
 height: 15px;  
 width: 100px;  
 border: 2px solid #d6e3b0;  
 padding: 5px;  
}  
  
#nav li.on a {  
 border: 2px solid #d6e3b0;  
 color: #d6e3b0;  
}  
  
#nav li.on ul a, #nav li.off ul a {  
 float: left; /*ie doesn't inherit the float*/  
 border: 0;  
 color: #7a8566;  
 width: auto;  
 margin-right: 15px;  
}  
  
#nav li.on ul {  
 display: block;  
}  
  
#nav li.off:hover ul {  
 display: block;  
 z-index: 6000;  
}  
  
#nav li.off a:hover, #nav li:hover a {  
 background: #d6e3b0;  
 color: #7a8566;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Navigation mit Hover Effekt wird im IE nicht dargestellt

    LX
    – Informationen zu den Bewertungsregeln

    Traurige Wahrheit: der MSIE kennt "hover" nur bei a-Tags, bei allen anderen Elementen ignoriert er es. Mit JavaScript und einer zusätzlichen Klasse ".hover" kann teilweise Abhilfe geschaffen werden. Besser ist es jedoch, sich ganz auf das a-Tag zu verlassen und evtl. ein span für die Formatierung einzufügen, sofern notwendig.

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Navigation mit Hover Effekt wird im IE nicht dargestellt

      Bruzzler
      – Informationen zu den Bewertungsregeln

      Hi LX,

      danke für deine schnelle Antwort.
      Ich habe leider gar keine Ahnung von JS. Gibt es dazu irgendwo einen fertigen Code, bei dem man nur noch etwas anpassen muss??

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Navigation mit Hover Effekt wird im IE nicht dargestellt

        Joachim Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich habe leider gar keine Ahnung von JS. Gibt es dazu irgendwo einen fertigen Code, bei dem man nur noch etwas anpassen muss??

        Das ist überflüssig, denn die einfachste Variante geht so:
        <element onmouseover="this.className='hoverclass'" onmouseout="this.className='normclass'"> Wenn Du jetzt für diese beiden Klassen entsprechende Eigenschaften im css vergibst wars das schon.

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Navigation mit Hover Effekt wird im IE nicht dargestellt

    Martin S. Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo zusammen,

    bin neu hier in diesem Forum, aber glaubt mir, ich habe schon ewig gesucht und auch schon viele Tipps gefunden, wie man den Hover Effekt auch im IE <=6 einbinden kann. Allerdings bin ich doch zu sehr Anfänger, und hoffe auf Eure Hilfe.
    Im Firefox sieht ja alles soweit ganz schön aus, nur wie bekomme ich den gleichen (hover) Effekt im IE hin?

    Vielen Dank schonmal.
    Bruzzler

    Hier der HTML Code und das CSS

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <link href="css/navi.css" rel="stylesheet" type="text/css" />
    </head>

    <body><div id="container">
    <div id="navigation">
        <ul id="nav">
          <li class="on"><a href="#">Home</a></li>
          <li class="off"><a href="#">Über mich</a></li>
          <li class="off"><a href="#">Galerie</a>
              <ul id="subnav_gal">
                <li><a href="#">Buch</a></li>
                <li><a href="#">Film</a></li>
                <li><a href="#">Kunst</a></li>
                <li><a href="#">Architektur</a></li>
                <li><a href="#">Technik</a></li>
              </ul>
          </li>
          <li class="off"><a href="#">Referenzen</a></li>
          <li class="off"><a href="#">Kontakt</a></li>
        </ul>
      </div>
      </div>
    </body>
    </html>

    
>   
> ~~~css

* {  

>  margin: 0;  
>  padding: 0;  
> }  
> body {  
>  background-color: #7a7a82;  
> }  
>   
>   
> #container {  
>  padding: 2px 50px 2px 50px;  
>  width: 940px;  
>  margin: 0 auto;  
> }  
>   
> #navigation {  
>  vertical-align: middle;  
> }  
>   
> #nav {  
>  margin-left: 142px;  
> }  
>   
> #nav li.on ul, #nav li.off ul {  
>  margin: 0;  
>  padding: 0;  
> }  
>   
> #nav a {  
>  text-decoration: none;  
> }  
>   
> #nav li { /*float the main list items*/  
>  margin: 0;  
>  float: left;  
>  display: block;  
>  text-align:center;  
>  padding: 0 8px;  
> }  
>   
> #nav li ul {  
>  display: none;  
> }  
>   
> #nav .off #subnav_gal {  
>  margin-left: -260px;  
>   
> }  
>   
> #nav li.off ul, #nav li.on ul { /*put the subnav below*/  
>  position: absolute;  
>  top: 153px;  
>  *top: 155px;  
>  background: #d6e3b0;  
>  height: 28px;  
>  width: 524px;  
>  *width: 554px;  
>  padding-left: 110px;  
>  *padding-left: 80px;  
> }  
>   
> #nav li a {  
>  color: #d6e3b0;  
>  font-weight: bold;  
>  display: block;  
>  height: 15px;  
>  width: 100px;  
>  border: 2px solid #d6e3b0;  
>  padding: 5px;  
> }  
>   
> #nav li.on a {  
>  border: 2px solid #d6e3b0;  
>  color: #d6e3b0;  
> }  
>   
> #nav li.on ul a, #nav li.off ul a {  
>  float: left; /*ie doesn't inherit the float*/  
>  border: 0;  
>  color: #7a8566;  
>  width: auto;  
>  margin-right: 15px;  
> }  
>   
> #nav li.on ul {  
>  display: block;  
> }  
>   
> #nav li.off:hover ul {  
>  display: block;  
>  z-index: 6000;  
> }  
>   
> #nav li.off a:hover, #nav li:hover a {  
>  background: #d6e3b0;  
>  color: #7a8566;  
> }  
>

    Hi Bruzzler,

    ich würde dieses Problem auf keinen Fall mit Javascript lösen, da du ja in der Navigationsleiste Links a-Elemente hast und Javascript fürs Layout nicht optimal ist, da sehr viele die Scripts nicht aktiviert haben... also das Ganze müsste dann ca. so aussehen:
    Du fügst den Links in der Navigation eine Klasse hinzu:
    <li class="on"><a href="#" class="navilinkon">Home</a></li>
    <li class="off"><a href="#" class="navilinkoff">Über mich</a></li>
    <li class="off"><a href="#" class="navilinkoff">Galerie</a>
    <ul id="subnav_gal">
    <li><a href="#" class="navilink">Buch</a></li>
    <li><a href="#" class="navilink">Film</a></li>
    <li><a href="#" class="navilink">Kunst</a></li>
    <li><a href="#" class="navilink">Architektur</a></li>
    <li><a href="#" class="navilink">Technik</a></li>
    </ul>
    </li>
    <li class="off"><a href="#" class="navilinkoff">Referenzen</a></li>
    <li class="off"><a href="#" class="navilinkoff">Kontakt</a></li>

    und das stylesheet muss dann entsprechend so aussehen:
    a.navilinkon {
    [...]
    }
    a.navilinkon:hover {
    [...]
    a.navilinkoff {
    [...]
    a.navilinkoff:hover {
    [...]
    }
    a.navilink {
    [...]
    }
    a.navilink:hover {
    [...]

    Als Beispiel kannst du dir http://beta.martin-schalk.eu anschauen.

    Auf Wiederlesen
    Martin

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln