Bild verschwindet

    Hallo zusammen,
    ich habe mit einem fertigen CSS Template von Templatemo gearbeitet. Hier der Download und Preview: http://www.templatemo.com/preview/templatemo_231_general

    Diese Funktion sorgt dafür, dass der jeweils ausgewählt "Button" markiert ist:

    Code
    #templatemo_menu li a:hover, #templatemo_menu li .current {
    color: #000000;    
    background: url(images/templatemo_menu_hover.jpg) no-repeat;
}

    Man setzt dazu in der jeweiligen HTML-Datei Class auf current. Hier ein Beispiel:

    Code
    <li><a href="index.html" class="current"><span class="home">Home</span></a></li>


    Hier ein Bildbeispiel (in diesem Fall ist gerade Home markiert):


    Fährt man mit der Maus über andere Buttons, bleiben sie solange markiert, bis man die Fläche des Buttons verlässt (hier ist Home ausgewählt und der Mauszeiger befindet sich über Services:


    Das Problem ist jetzt, wenn man tatsächlich auf Services klickt, dann verschwindet zwar die Markierung bei Home und wird bei Services hinzugefügt, aber das Bild zu Services verschwindet auch:


    Ich kann den Fehler nicht finden und kenne mich auch nicht sehr gut in CSS aus. Ich hoffe mal auf Hilfe :p
    Vielen Dank schonmal.
    MfG
    yolonaut

    Hallo yolonaut,
    ich finde es sehr komisch, da die beiden den gleichen Code besitzen.
    An deiner Stelle würde ich die Bilder per <img> einfügen, dann bin ich sicher, dass es auch funktioniert.

    Hier der Code, falls du ihn nicht kennst.

    HTML
    <img src="Bild Url">

    Zu empfehlen wäre noch ein Code, damit im Internet Explorer kein Rahmen bei den Bildern erstellt
    wird, aber in deinen Code ist es ja schon drin.

    Code
    img { border: 0px; }

    Hallo,
    danke für die Antwort. Die Art wäre nicht sehr schön, aber ich habe es dennoch probiert.

    Habe jetzt noch den Image Tag eingeführt für das Feld Kontakt.

    Code
    <li><a href="contact.html" class="contact"><img src="images/templatemo_menu_hover.jpg"><span class="contact">Kontakt</span></img></a></li>

    Wie man sieht, macht es das nicht besser: http://testsitehe.funpic.de/contact.html

    MfG

    Wie du schon selbst im ersten Post geschrieben hast, muss man folgendes machen:

    Code
    <li><a href="index.html" class="current"><span class="home">Home</span></a></li>

    Auf deiner Website passiert aber folgendes

    Code
    <li><a href="service.html"><span class="current">Service</span></a></li>


    Also einfach mal die Klasse "current" an das <a> und nicht an das <span> übergeben =)


    Gruß
    Lukas

    Maybe this world is another planet's hell