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
    1. #templatemo_menu li a:hover, #templatemo_menu li .current {
    2. color: #000000;
    3. background: url(images/templatemo_menu_hover.jpg) no-repeat;
    4. }


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

    Code
    1. <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
    1. <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
    1. 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
    1. <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
    1. <li><a href="index.html" class="current"><span class="home">Home</span></a></li>


    Auf deiner Website passiert aber folgendes

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