• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

hover (ie vs. mozilla)

mustang

mustang

Mitglied
habe ein einfaches menü erstellt. beim mouseover soll sich die hitnergrundfarbe des divs ändern. aber irgendwie funkioniert es nicht im internet explorer. firefox stellt natl alles richtig dar.

hier mal der code:

HTML: 
<div id="menu">
<div id="menubutton"><a href="xy.php"  class="button">
<span  class="menutext">Home</span></a></div>
.
.
.
</div>
PHP: 
#menu {
    position: absolute;
    left: 400px;
    top: 0px;
}

#menubutton {
   padding: 0;
   border: 1px solid #000;
   margin: 5px;
   width: 100px;
   height: 25px;
   background-color: #FFF;
   opacity:0.6;
   filter: alpha(opacity=60);
   -moz-opacity:0.6;
 
}

a.button:link, a.button:visited, a.button:hover, a.button:active {
  display:block;
  width:100px;
  height:25px;
  text-decoration:none;
  text-align: left;
  line-height: 27px;
    color: #000;
}

a.button:hover {
   background-color: #036;
  color: #FFF;
}

a.button:active {
  color:#FFF;
}

.menutext {
    margin-left: 10px;
}
ich finde einfach nicht den fehler.... könnt ihr mir bitte helfen?
 
mustang schrieb:
habe ein einfaches menü erstellt.
Zum Vergrößern anklicken....
Das ist kein Menü, das ist eine Ansammlung von divs und spans. Nur weil es die ID menu hat, ist es aber noch lange keins. Ein Menü ist eine Liste von Links.
HTML: 
<ul>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>

hier mal der code:
Zum Vergrößern anklicken....
Da das HTML ja schon falsch ist, gehe ich jetzt nicht weiter auf das CSS ein. Mit einer Liste sollte es allerdings so gehen.
Code: 
li a {display: block; width: 100px;}
li a:hover {background-color: #036;}
 
ja ist eine ansammlung von divs und spans. wird auch noch ein bisschen mehr. von daher brauche ich die formatierung.
ein menü muss doch nicht nur eine linkliste sein. ich kenne wesentlich kompliziertere menüs, als meins^^

außerdem entspricht dein ul meinem div=menu und dein li meinem div=menubutton .... lediglich mein span ist mehr und das brauche ich später noch^^ ich weiß net wo da was "angesammelt" ist.


--> problem besteht weiterhin

PS.: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
mustang schrieb:
ja ist eine ansammlung von divs und spans. wird auch noch ein bisschen mehr. von daher brauche ich die formatierung.
Zum Vergrößern anklicken....
Das glaub ich nicht.

ein menü muss doch nicht nur eine linkliste sein.
Zum Vergrößern anklicken....
Doch, denn etwas anderes ist es nicht.

ich kenne wesentlich kompliziertere menüs, als meins^^
Zum Vergrößern anklicken....
Das ändert nichts daran, dass es Listen von Links sind. Ob diese nun verschachtelt sind oder nicht, spielt keine Rolle.

außerdem entspricht dein ul meinem div=menu und dein li meinem div=menubutton .... lediglich mein span ist mehr und das brauche ich später noch^^ ich weiß net wo da was "angesammelt" ist.
--> problem besteht weiterhin
Zum Vergrößern anklicken....
Na dann kannst du mein CSS ja übernehmen.

HTML ist eine Auszeichnungssprache, mit der du deinem Inhalt eine Bedeutung gibst, div und span haben keine Bedeutung.
 
ähm.... ich wollte nur mein problem mit der hintergrundfarbe im ie gelöst haben. kein neues css^^

geht das nicht auch mit meinem ansatz?
ist doch sicher nur ein kleiner fehler oder so.... dann funktioniert es doch....
 
Vielleicht musst du das hover auf den span setzen, ist aber nur ne Vermutung.

In der Zeit, in der wir hier diskutieren, hättest du schon längst meine Lösung übernehmen können, wärst fertig und hättest HTML richtig eingesetzt.
 
gut habs getestet... es ändert die hintergrundfarbe. das stimmt.
aber mein button ist ja ein stück größer, als der text, der drauf steht. und es wird nur der hintergrund des textes geändert, aber nicht der button...

HTML: 
<ul id="menu">
  <li id="menubutton"><a href="">Link</a></li>
  <li id="menubutton"><a href="">Link</a></li>
  <li id="menubutton"><a href="">Link</a></li>
  <li id="menubutton"><a href="">Link</a></li>
</ul>
PHP: 
#menu {
    position: absolute;
    left: 400px;
    top: 0px;
    list-style: none;
}

#menubutton {
   padding: 0;
   border: 1px solid #000;
   margin: 5px;
   width: 100px;
   height: 25px;
   background-color: #FFF;
}

#menubutton a:hover {
    background-color: #036;
      width: 100px;
   height: 25px;
    }
wie bekomme ich das hin, dass nun nicht nur der hintergrund des textes, sondern der hintergrund vom menubutton geändert wird?
 
ok einfach display: block; dazu^^
hab ich irgendwie vergessen

jetzt funktioniert es im firefox wunderbar. also genauso wie vorher, aber mit liste halt.
und der ie.... machts immer noch nicht...
 
Wenn du dem Link display: block gibst, passt er sich dem Listenelement an. Alternativ kannst du auch li:hover verwenden.
 
ja genau hab ich mit dazugeschrieben^^
(hatte meinen vorherigen eintrag noch editiert)

hab jetzt meinen code so:

HTML: 
<ul id="menu">
  <li id="menubutton"><a id="menutext" href="">Link</a></li>
  <li id="menubutton"><a id="menutext" href="">Link</a></li>
  <li id="menubutton"><a id="menutext" href="">Link</a></li>
  <li id="menubutton"><a id="menutext" href="">Link</a></li>
</ul>
PHP: 
#menu {
    position: absolute;
    left: 400px;
    top: 0px;
    list-style: none;
    opacity:0.6;
    filter: alpha(opacity=60);
    -moz-opacity:0.6;
}

#menubutton {
   display: block;
   padding: 0;
   border: 1px solid #000;
   margin: 5px;
}

#menubutton a:hover {
    display: block;
    background-color: #036;
    }
problem ist nun... ich brauche die transparenz des menüs bei 70%...
(vorgabe). das geht soweit im mozilla. alles 70% transparent auch der hover effekt.
aber ie mag das nicht...
(sprich es ist zwar alles transparent, aber der hover-effekt wird überhaupt nicht mehr ausgeführt)
geht das irgendwie, ohne grafiken zu verwenden auch im ie?
 
Der IE kann auch hover, wenn er es bei dir nicht anzeigt, ist irgendwo noch ein Fehler? Hast du mal nen Link zur Seite?

Eine ID darf übrigends in einem Dokument nur einmal vorkokmmen, du solltest in deinem Menü besser klassen verwenden oder die Listenelemente über die ul ansprechen.
Code: 
ul#menu li {...}
ul#menu li a {...}
 
Die verlinkte Seite gibt es nicht.

Und Transparenz hat nichts mit hover zu tun.

Da deine Seite nicht verfügbar ist kann ich nur raten, dass Du opacity für die Transparenz nutzt. Die wird vom IE (egal welche Version) nicht unterstützt.
 
also bei mir geht der Link!!!. Hab grad mal deinen Code angeschaut. Würde dir noch zu ein paar Optimierungsmaßnahmen raten
>dein Textabsatz gehört in ein
Code: 
<p> ... </p>
> binde deinen Hintergrund doch via
Code: 
background-image: url(datei);
anstatt mit <img> ein....
 
Dein Filter funktioniert im IE8 nicht gut und ab IE9 vielleicht auch überhaupt nicht mehr.
opacity ändert nicht die Tranzparenz des Hintergrundes sondern die Tranzparenz des gesamten Bereiches.
Wenn es nur um einen tranzparenten Hintergrund geht, kannst du ab IE7 die alpha-tranzparenz von png nutzen.

Für den IE6 kannst du dann einen Filter einsätzen.

threadi schrieb:
...
Und Transparenz hat nichts mit hover zu tun.
Zum Vergrößern anklicken....
Im Zusammenspiel mit dem eingesetzten Filter anscheinend doch. Ohne diesen Filter ( alpha(opacity=60) ) funktioniert es im IE8.
 
Zuletzt bearbeitet:
ja also ein hover-effekt scheint in einem transparenten bereich vom ie nicht unterstützt zu werden. - naja egal.
ich habs jetzt mir transparenten png's gemacht.

im firefox wieder alles in ordnung. aber im ie ändert sich der hintergrund nicht wieder zurück, wenn man auf dem link war^^

URL.: Robert Kalb

###############################################

ok gelöst. hatte doch noch opacity im code.
jetzt funktioniert es so, wie ich es mir vorgestellt habe :-)
ich danke euch!
 
Der IE6 kann alpha-tranzparente pngs nicht richtig darstellen. Hier währe ein Filter sinnvoll.
Code: 
* html ul li a { 
background: none; /* png für den IE<=6 entfernen */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50a3a3a3,endColorstr=#50a3a3a3);
 }
 
 * html ul li a:hover { 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00a3a3a3,endColorstr=#00a3a3a3);
 }
Die ersten beiden Zeichen bestimmen die Transparenz (50 und 00). Die Farbe (#a3a3a3) habe ich mir ausgedacht.

Damit auch li:hover im IE6 funktioniert bräuchtest du ein wenig Javascript.
Z.B : Son of Suckerfish Dropdowns | HTML Dog

Ps:
Deine Zentrierung mit position: absolute; versteckt Inhalte wenn der Viewport schmaler als 600px ist.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben