Hover bei Bildern, Hänger

[Wischnutz]

Hallo,

Also das Thema wurde schon oft behandelt und eigentlich habe ich das schon mal auf die Art gemacht wie ich es euch jetzt darlegen möchte, aber irgendwie hängts bei mir grad...

--------------------------------------------------------------------

CSS:

/* - Menü - */
#menu {
  background: #000;
  padding: 5px; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  margin: 0;
  text-align: center;
  color: #ab4804; /* Hier definieren wir die Farbe des Menüpunktes, der kein Link ist, also den Menüpunkt der Seite auf der wir uns gerade befinden. */
}
#menu li {
  font-size: 1.2em;
  display: inline; /* Damit die Menüpunkte nebeneinander und nicht untereinander erscheinen. */
  list-style-type: none; /* Die Bullets vor den Menüpunkten schalten wir ab. */
  border-left: 1px solid white; /* Ein optischer Trennungsstrich */
  padding: 0 10px 0 15px;
  font-weight: bold;
}
#menu li a {
  color: white; /* Hier ist das mit der Linkfarbe genau so, sie soll weiß sein. */
  text-decoration: none;
}

#menu img {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Link Hover Effekte im Menü */

.Gilde span {
 display:   none;
}
.Gilde:link, .Gilde:visited {
 display:   inline;
 width:    74px;
 height:    30px;
 background:   url(../img/Buttons/Gilde_in.gif);
}
.Gilde:hover, .Gilde:active, .Gilde:focus {
 background-image: url(../img/Buttons/Gilde_on.gif);
}

--------------------------------------------------------------------
HTML:
<ul id="menu">
   <li><img src="img/Buttons/Home_in.gif"></li>
   <li><a href="#" class="Gilde"><span>Gilde</span></a></li>
</ul>

--------------------------------------------------------------------
Aber ich bekomme nur den Text Gilde den ich ja eigentlich nur für den Falle das keine Bilder angezeigt werden eingebaut habe.
Wie kommts? Was ist falsch?

Danke für eure Hilfe

[Ingo Turski]

Hi,

padding: 5px; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */

dann verwende die Einheit %.

.Gilde:link, .Gilde:visited {
display:   inline;
width:    74px;
height:    30px;

Dein Fehler: bei inline scheidet width und height aus.

freundliche Grüße
Ingo

[Wischnutz]

Hi,

padding: 5px; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
dann verwende die Einheit %.

Ups ein alter Comment.. aber das passt :D

.Gilde:link, .Gilde:visited {
display:   inline;
width:    74px;
height:    30px;
Dein Fehler: bei inline scheidet width und height aus.

Aber wie halte ich dann den Platz für das Bild frei? Es schiebt sich immer zusammen...

[Ingo Turski]

Hi,

Dein Fehler: bei inline scheidet width und height aus.

Aber wie halte ich dann den Platz für das Bild frei? Es schiebt sich immer zusammen...

indem Du auf display:inline verzichtest. Dazu müsstest Du Deine Navigation wohl auf float umstellen.

freundliche Grüße
Ingo