CSS Hovermenü

    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 :D

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Einmal editiert, zuletzt von Tobse (21. Mai 2009 um 19:28)

    weiss denn niemand was??

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    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:


    opera menü:

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    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???

    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.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    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

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

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

    versuch mal das:

    css-code:



    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.

    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

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    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.

    Einmal editiert, zuletzt von thilda (26. Mai 2009 um 08:24)

    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

    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-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.

    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

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    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.

    des hintergrundbild ist ja nur durch meine erste version entstanden

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!