CSS Hovermenü

Tobse

Ich hab mal ne frage:
Ich habe auf meiner Seite ein CSS Menü. Da aber der FF das nicht so frisst, würde ich gerne wissen, wie das genau geht. Bisher ist das ganze mit onmosueover="src='asd'" und preload geregelt, doch Beim FF ist das problem, dass die bilder nur getauscht werden, wenn ich nicht auf der Schrift bin. Der opera tauscht es, doch wenn ich über einen Pixel der Schrift gehe, geht das bild wieder zurück.(daher das ganze entweder mit dem opera betrachten oder: opera-menü (ich kann für keine korrekte darstellung im FF oder IE garantieren). Der IE verhält sich änlich(daher auch: die seite mit dem IE besuchen oder: IE-Menü (auch hier keine korrekte darstellung im Opera oder FF). Danke schonmal im vorraus

Tobse

weiss denn niemand was??

Macrosdesign

ja ohne code ist schwierig wir können nicht hellsehen

driver

zudem: onmosueover="src='asd'" schaut eher nach javascript aus

Tobse

driver: ne andere möglichkeit hab ich nich gesehen.
denn der CSS code div#menu {img:hover=src="";}
kam mi etwas umständlich vor.
@macrodesing:
ich habe extra links zu den dateien gemacht...
aber wenn du meinst:
ie menu:

HTML

<html>
<head>
<title>Menü</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body background="bg.bmp" text="#CCCCCC" link="#808080" vlink="#808080" alink="#000000">
<img src="bilder/menuheaderbg.bmp" />
<br /><br />
<div style="position:absolute; top:55px;">
      <img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
<img src="bilder/menunorm_ie.png" preload="bilder/menumouse_ie.png" onmouseover="src='bilder/menumouse_ie.png'" onmouseout="src='bilder/menunorm_ie.png'" />
</div>
<div style="position:absolute; top:55px;">
      <a href="startseite.frame.html" target="inhalt">Startseite</a>
<br /><a href="beitrag.frame.html" target="inhalt">Beitrag einsenden</a>
<br /><a href="autoren.frame.html" target="inhalt">Tipps und Cheats Autoren</a>
<br /><a href="impressum.frame.html" target="inhalt">Impressum</a>
<br /><a href="downloads.frame.html" target=inhalt"">Downloads</a>
<br /><a href="mailto:cheats-tn@online.de">Konatkt1</a>&nbsp<a href="kont2.frame.html" target="inhalt">Kontakt2</a>
<br /><a>Seite funktioniert nicht?</a>
<br /><a>-</a><a href="index.html" target="_top">Seite neu laden</a>
<br /><a>-</a><a href="javascrip:self.close()">Fenster schliessen</a>
<br /><a>Sie sind Besucher Nr.:</a>
<br /><img src="http://www.andyhoppe.com/count/?id=1227544756" border="0" alt="Der Counter funktioniert bei dir nicht." />
<br /><a href="bewerben.frame.html" target="inhalt"><img src="bilder/team.png" border="0" /></a></div>
</body>
</html>

Alles anzeigen

opera menü:

HTML

<html>
<head>
<title>Menü</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body background="bg.bmp" text="#CCCCCC" link="#808080" vlink="#808080" alink="#000000">
<img src="bilder/menuheaderbg.bmp" />
<br /><br />
<div style="position:absolute; top:41px;">
      <img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
<br /><img src="bilder/menunorm.png" preload="bilder/menumouse.gif" onmouseout="src='bilder/menunorm.png'" onmouseover="src='bilder/menumouse.gif'" />
</div>
<div style="position:absolute; top:41px;">
      <a href="startseite.frame.html" target="inhalt">Startseite</a>
<br /><a href="beitrag.frame.html" target="inhalt">Beitrag einsenden</a>
<br /><a href="autoren.frame.html" target="inhalt">Tipps und Cheats Autoren</a>
<br /><a href="impressum.frame.html" target="inhalt">Impressum</a>
<br /><a href="downloads.frame.html" target=inhalt"">Downloads</a>
<br /><a href="mailto:cheats-tn@online.de">Konatkt1</a>&nbsp<a href="kont2.frame.html" target="inhalt">Kontakt2</a>
<br /><a>Seite funktioniert nicht richtig?</a>
<br /><a>-</a><a href="index.html" target="_top">Seite neu laden</a>
<br /><a>-</a><a href="javascrip:self.close()">Fenster schliessen</a>
<br /><a>Sie sind Besucher Nr.:</a>
<br /><img src="http://www.andyhoppe.com/count/?id=1227544756" border="0" alt="Der Counter funktioniert bei dir nicht." />
<br /><a href="bewerben.frame.html" target="inhalt"><img src="bilder/team.png" border="0" /></a></div>
</body>
</html>

Alles anzeigen

Macrosdesign

einfach den link definieren in einem menü:

a {width:100px;height:30px;background:url(bla.jpg);display:block;}
a:hover {background:url(bla2.jpg);}

wo isn das so schwer???

Tobse

Das hab ich mir auch schon gedacht. Aber wenn der surfer jetzt über die schrift geht, dann habe ich wieder das peoblem, dass der Breowser das hover-bild erst laden muss.

Tobse

Und das hat keienn wert 1.: Der IE interpretiert das als einziger richtig
2.: Mein - hat dann auch 100px länge,was zu einem zeilenumbruch führt
3.: Mein Menü sit 200pixel breit die Grafik auch. Ich will die gan angezeigt haben, ohne zeilenumbruch

aila

verstehe ich das richtig, dass du hintergrundbilder benutzt und darauf dann deine menü-links?

versuch mal das:

css-code:

HTML

a.menu { 
background-image: url(bild.jpg);
display:block;
width: ...;
height: ...;
}
 
a.menu:hover   { 
background-image: url(bild-maus-drüber.jpg) 
}
 
p {
margin: 0;
padding: 0;
}

Alles anzeigen

und in die html datei schreibst du das:

HTML

<body>
<p><a class="menu" href="#">menü1</a></p>
<p><a class="menu" href="#">menü2</a></p>
... 
</body>

ansonsten schau mal bei http://aktuell.de.selfhtml.org/artikel/css/mouseover/#a2 rein.

Tobse

Ja, das stimmt. Aber auch hier ist das preload problem. Und wenn ich width auf die breite meines menüs setze, dann kommt in jedem browser was andres und und und. Und wenn ich es wie Macrodesing geesagt aht mache, dann wird das bil nur so weit angezeigt, wie die schrift. Daher die Idee mit den beiden divs

thilda

Da du ja ein Menu erstellen willst, würde ich dir dafür eine Liste empfehlen. Für die Bilder könntest du wie folgt vorgehen.

Das Bild schon einbinden und aus dem sichtbereich positionieren. Dann einfach mit :hover das ganze an ort und stelle setzen.
Kai Laborenz stellt das zB in seinem Buch "CSS-Praxis" vor. Wir hatten das aber glaube ich schonmal vor ein paar wochen hier im Forum.

aila

Zitat von Tobse

Ja, das stimmt. Aber auch hier ist das preload problem. Und wenn ich width auf die breite meines menüs setze, dann kommt in jedem browser was andres und und und. Und wenn ich es wie Macrodesing geesagt aht mache, dann wird das bil nur so weit angezeigt, wie die schrift. Daher die Idee mit den beiden divs

komisch...ich habe keine probleme damit. bei mir funktioniert es im IE5-8 und im firefox. die anderen hab ich noch nicht getestet. aber das wären so die wichtigsten

aila

mir ist noch was eingefallen, was du probieren könntest.
erstelle einen div-container, der so breit wie dein menü sein soll. und da packst du die den html-code rein, den ich dir einige beiträge weiter vorn gegeben hab.

den container definierst du so:

HTML

#menu {
padding: 0;
width: ...;


und dann noch die a-definitionen, die ich dir gegeben hatte.

einen andere möglichkeit ist, dass du für jeden menüpunkt einen container erstellst und da das hintergrundbild und den hoverbefehl definierst.

HTML

#menu1 {
padding: 0;
width: ...;
height: ...;
background-image: url(bild.jpg);
}


#menu1:hover {
background-image: url(bild-hover.jpg);
}

Alles anzeigen

html-code:

HTML

<div id="menu1">
<a href=""> menü 1 </a>
</div>

ich hab es allerdings nicht getestet. also keine garantie, dass es auch wirklich funktioniert.

Tobse

ja, da sind wir wieder. Ich müsste für alles mögliche im menü eine neue definition von width und height machen. Wenn man für jeden menüpunkt bilder verwendent, spart das auch keine ladezeit.
EDIT:
mir fällt gerade ein, dass ich für die hover dachen ein class machen könnte. das wäre ne überlegung wert

aila

wenn jedes menü die gleiche höhe und weite hat, dann braucht man alles nur einmal definieren. man schreibt dann:

HTML

# menu1, #menu2, ... {width:...; height:...;...}

und für den hintergrund kann man auch ne hintergrundfarbe nehmen, die sich dann mit hover ändert.

und wenn du nur einen container erstellst, in dem sich alle buttons befinden, brauchst du auch nur einmal ein bild bzw. hintergrundbild definieren.

Tobse

des hintergrundbild ist ja nur durch meine erste version entstanden

Tags