Background Image überdeckt Hover Image

[maphrao]

Hallo zusammen, ich bin gerade dabei, eine CSS Navigation zu erstellen und komme nicht weiter.
Die Navigation setzt sich aus Grafiken zusammen und beinhaltet einen Mouseover Effekt.

Da die Website mehrsprachig ist, kann ich die grösse der einzelnen Grafiken vorher nicht festlegen.
Meine Idee war es daher, die komplette Hintergrundgrafik per CSS in das Div einzubinden, so weit, so gut.
Es wird also nur jeweils beim Hover das Bild geladen. Jetzt das Problem:

Wenn ich dem Div kein Hintergrundbild gebe, funktioniert alles einwandfrei, aber ich stehe vor dem Problem mit der dynamischen Breite.
Gebe ich dem Div das Hintergrundbild, verdeckt dieses auf den ersten Blick das Mouseover Bild.
Bei genauerem hinschauen stellt sich aber heraus, dass dieses Bild durchaus angezeigt wird, aber nur 1px breit. (das Bild ist 1px breit und passt sich automatisch an). Beim ersten Menupunkt habe ich ein 65px breites Bild, da der erste Menupunkt eine abgerundete Grafik enthält. Diese wird korrekt bei Mouseover angezeigt.
Dieser Effekt tritt aber nur auf, wenn das Div, in dem die Navigation liegt, ein Hintergrundbild hat. Nehme ich dieses raus, werden auch die 1px Mouseover Bilder in voller Breite (entsprechend der Beschriftung des Menupunktes) angezeigt.

Ich hoffe, ich habe mich einigermassen verständlich ausgedrückt und jemand hat eine Idee, wie ich das lösen kann.

Danke

 

[Space Vampire]

Deine Metode ist arg kompliziert.
Warum tauschst du beim hovern nicht einfach die Hintergrundbilder aus, statt die Größe von IMGs zu ändern?
dazu müsstest du lediglich den a-Tag auf display:block; stellen, die Höhe bestimmen und die Breite variabel halten.
Gegebenenfalls noch ein seitliches padding.
Für runde Ecken gibt es border-radius.

 

[maphrao]

Ich finde sie eigentlich nicht sehr kompliziert, der CSS Code ist überschaubar.

#head-navigation{
height:35px;
margin-bottom:15px;
background-image:url("../img/topnavi/navi-bg.png");
background-repeat:no-repeat;
}
a#head-navigation-first{
display:block;
background-image:url("../img/topnavi/Start_n.gif");
width:65px;
height:28px;
text-align:center;
vertical-align:bottom;
line-height:28px;
color:#ffffff;
font-family:arial, helvetica, sans-serif;
font-weight:bold;
font-size:13px;
text-decoration:none;
float:left;
}
a:hover#head-navigation-first{
display:block;
background-image:url("../img/topnavi/Start_m.gif");
}
a#head-navigation{
display:block;
background-image:url("../img/topnavi/bg_n.gif");
height:28px;
text-align:center;
vertical-align:bottom;
line-height:28px;
color:#ffffff;
font-family:arial, helvetica, sans-serif;
font-weight:bold;
font-size:13px;
text-decoration:none;
float:left;
padding:0 8px 0 8px;
}
a:hover#head-navigation{
display:block;
background-image:url("../img/topnavi/bg_m.gif");
}

Ich bin auch gerade nicht ganz sicher, was du meinst. Ich sehe keine andere Lösung, als diese...Hintergrundbilder tausche ich doch aus, kann aber vorher nie wissen, wie gross sie sind, da die Website 4-sprachig ist. Daher ja der Ansatz mit dem einen Hintergrundbild, welches immer da ist und die komplette Navi ausfüllt.

 

[Space Vampire]

Entschuldige, aber da war deine Problembeschreibung etwas irreführend.
ich bin immer noch nicht sicher ob ich es vollständig verstanden habe.

Aber was mir auf anhieb auffällt:
Ich bin mir nicht sicher, ob das so funktionieren kann

a:hover#head-navigation-first

Meiner ansicht nach sollte das so sein

a#head-navigation-first:hover

 

[maphrao]

Entschuldige, aber da war deine Problembeschreibung etwas irreführend.
ich bin immer noch nicht sicher ob ich es vollständig verstanden habe.

Ich werde später mal ein Beispiel hochladen, dann ist es immer einfacher, die Problematik nachzuvollziehen.

Aber was mir auf anhieb auffällt:
Ich bin mir nicht sicher, ob das so funktionieren kann

a:hover#head-navigation-first

Meiner ansicht nach sollte das so sein

a#head-navigation-first:hover

Nein, meine Lösung funktioniert generell schon, bei deiner tut sich gar nichts mehr.

 

[maphrao]

Ich habe mal beide Versionen hochgeschoben, um das Problem zu verdeutlichen.

Hier funktioniert das Mouseover nicht korrekt (wird nur 1px breit angezeigt), da es anscheinend vom Hintergrundbild verdeckt wird:
Aurea Schneidemaschinen

Und hier habe ich dem Div kein Hintergrundbild zugewiesen, es funktioniert alles einwandfrei. Das Problem, was ich bei dieser Lösung habe,
ist aber deutlich zu sehen. Wie fülle ich den fehlenden Rest in der Breite flexibel mit der entsprechenden Grafik auf?
Aurea Schneidemaschinen

Bin natürlich auch für andere Lösungsansätze offen, wobei mich das Problem mit der unvollständigen Anzeige im ersten Beispiel schon sehr interessiert.
Wieso wird das Hover Bild nur 1px breit angezeigt, habe ich einen Denkfehler?

Der Unterschied zwischen Beispiel 1 + 2 ist minimal, die rot markierten Zeilen fehlen im 2.Beispiel:


#head-navigation{
height:35px;
margin-bottom:15px;
background-image:url("img/topnavi/navi-bg.png");
background-repeat:no-repeat;
}

 

[T!P-TOP]

Hast Du dir eigentlich mal dein HTML angesehen?

            <div id="head-navigation">                    <a id="head-navigation-first" href="http://localhost/aurea/" target="_self">START</a>         <img id="head-navigation" src="navigation-Dateien2/NaviTrenn.png">         <a id="head-navigation" href="http://localhost/aurea/" target="_self">AUFSCHNITTMASCHINE</a>          <img id="head-navigation" src="navigation-Dateien2/NaviTrenn.png">         <a id="head-navigation" href="http://localhost/aurea/" target="_self">AUREA MODELLE</a>                <img id="head-navigation" src="navigation-Dateien2/NaviTrenn.png">               <a id="head-navigation" href="http://localhost/aurea/" target="_self">AUREA PRODUKTION</a>                <img id="head-navigation" src="navigation-Dateien2/NaviTrenn.png">         <a id="head-navigation" href="http://localhost/aurea/" target="_self">SHOP</a>          <img id="head-navigation" src="navigation-Dateien2/NaviTrenn.png">         <a id="head-navigation" href="http://localhost/aurea/" target="_self">KONTAKT</a>              <img id="head-navigation" src="navigation-Dateien2/NaviTrenn.png">       </div>

//Edit: Du gibst übrigens im Doctype XHTML an, deine Element schreibst Du aber im HTML Stil.

 

[maphrao]

Hast Du dir eigentlich mal dein HTML angesehen?

Was ist damit?

//Edit: Du gibst übrigens im Doctype XHTML an, deine Element schreibst Du aber im HTML Stil.

Auch das ist völlig irrelevant bei diesem Problem. Ich bat um Hilfe bei der Lösung dieses Problems und nicht um andere Dinge.
Es ist ein Prestashop und das, was ich als Beispiel hochgeladen habe, ist unvollständig und nur die Navigation ist von Interesse.
Wenn du dazu Verbesserungsvorschläge hast, sind sie sehr willkommen.

 

[Space Vampire]

Valides und zum Doctype konformes HTML ist der erste schritt zur Fehlerbehebung.
Beispielsweise hast du mehrfach die gleiche ID vergeben.
Solange dein Code nicht valide ist, kann alles mögliche den Fehler verursachen.

Tipp:
Extrahiere den HTML- und CSS-Code der Problemzone in eine Testdatei.
Das ermöglicht es dir, festzustellen, oder der Fehler ausschließlich von diesem Bereich ausgeht.
Es beschränkt unseren Blick auf das deiner Ansicht nach Wesentliche und macht die Geschichte für uns auch gleich übersichtlicher!