Bild verschwindet

yolonaut

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

Bandit

Ohne einen Link zur Seite wird dir wohl niemand helfen können.

yolonaut

Okay, habe mal ein Beispiel hochgeladen auf nen FreeSpace: http://testsitehe.funpic.de/index.html

Sammy

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; }

yolonaut

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

threadi

Du hast da eine kaputte HTML-Kommentierung direkt vor dem Menü und ein Zeichensatzproblem:
http://validator.w3.org/check?verbose=…%2Fcontact.html

yolonaut

Eine defekte Kommentierung kann aber nicht die Ursache für das Problem sein, oder ?

threadi

Jeder HTML-Fehler kann die Ursache für irgendeine Fehldarstellung auf einer Webseite sein. Man weiß ja nicht wie der Browser bei der Darstellung damit umgeht.

wernerdeluxe

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

yolonaut

Danke jetzt klappt auch das !
Du bist mein Mann

Tags