✔ Navigation, Hintergrundbilder inkl. Text als PNG

[GFX-Händchen]

Hi all,

habe wieder ein verwziscktes Problem.

Meine Navigation ist 60px hoch, die verwendeten Bilder inkl. Text haben eine Breite von 122px und eine Höhe von 84px.
Der Text ist also mit in der Grafik.
Die Hälfte der Bilder ist das normale Bild, der andere Teil das Rollover.

Möchte also nich nur 1 Hintergrundbild inkl. Rollover-Effekt für die komplette Navigation, sondern für jeden Navigationspunkt einen eigenen Button.

Jetzt hab eich mir extra noch von v2b das DW-Tutorial zugelegt, aber darin wird nur 1 Navi-Punkt gezeigt..... funktioniert also nicht mit untersch. Bildern.

So sieht der Code bis jetzt aus:

<div id="navi">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Tabellen</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">G&Auml;stebuch</a></li>
  <li><a href="#">Impressum</a></li>
  </ul>
</div>

#navi {
	height: 60px;
	width: 900px;
	background-image: url(Neuer%20Ordner/content-bg1.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	padding: 0px;
}
#navi ul {
	float: left;
	width: 900px;
}
#navi ul li {
	float: left;
	list-style-type: none;
	display: block;
	margin-right: 10px;
}
#navi ul li a {
	text-decoration: none;
	/* [disabled]display: block; */
	height: 42px;
	width: 122px;
}

 

[Maik]

Hi,

ist dir in deinen beiden Themen der letzte Tage in meiner Signatur nicht mein erstgenanntes Tutorial ins Auge gestochen?

Im Anschluß daran folgt CSS-Rollover - Teil 2, der sich mit deiner Aufgabenstellung beschäftigt.

mfg Maik

 

[GFX-Händchen]

Ist mir leider nicht aufgefallen.:-(
Ahh, gut, schaue ich mir an.

 

[GFX-Händchen]

Habs mir jetzt lange angeschaut, aber irgendwie klappt das bei mir nicht.

HTML

<div id="navi">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Tabellen</a></li>
  <li><a href="#">Forum</a></li>
  <li><a href="#">G&Auml;stebuch</a></li>
  <li><a href="#" id="nav-pic-impressum">Impressum</a></li>
    </ul>
</div>

CSS

#navi {
	height: 60px;
	width: 900px;
	background-image: url(Neuer%20Ordner/content-bg1.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	padding: 0px;
}
#navi ul {
	float: left;
	width: 900px;
}
#navi ul li {
	float: left;
	list-style-type: none;
	display: block;
	margin-right: 10px;
}
#navi ul li a {
	text-decoration: none;
	/* [disabled]display: block; */
	height: 42px;
	width: 122px;
}
#nav-pic-impressum  {
	background-image: url(Neuer%20Ordner/impressum.png);
	display: block;
	height: 42px;
	width: 122px;
	background-position: left top;
}
#nav-pic-impressum a:hover {
	background-image: url(Neuer%20Ordner/impressum.png);
	background-position: 0px -42px;
	display: block;
	height: 42px;
	width: 122px;
}

Bekomme kein Rollover zustande.

Wo liegt mein Fehler?

 

[Maik]

Bekomme kein Rollover zustande.

Wo liegt mein Fehler?

Hier, wo du für das <a>-Element mit dem ID-Bezeichner #nav-pic-impressum ein weiteres <a>-Element als dessen Nachfolger angibst:

#nav-pic-impressum a:hover {
	background-image: url(Neuer%20Ordner/impressum.png);
	background-position: 0px -42px;
	display: block;
	height: 42px;
	width: 122px;
}

Abgesehen von der background-position-Eigenschaft sind hier alle übrigen Angaben überflüssig, da sie schon in der Regelmenge zuvor für dieses Element deklariert wurden.

mfg Maik

 

[GFX-Händchen]

Hmm ok, aber wie bekomm ich dann
1. das Hintergrundbild für den entsprechenden Link hin? und
2. den Rollover-Effekt?

 

[Maik]

Wie wäre es hiermit?

#nav-pic-impressum:hover {
	background-position: 0px -42px;
}

Ansonsten studier mal die Quellcode-Beispiele meines Tutorials gescheit, denn die beantworten deine Fragen.

mfg Maik

 

[GFX-Händchen]

Danke!
Nun komme ich weiter.

Leider schreibst du ja den Quellcode anders als DW.
So wie es DW schreibt so kenne ich es halt auch.

 

[Maik]

Leider schreibst du ja den Quellcode anders als DW.

So ein Pech aber auch

Und der Umstand, dass mein Code anders formatiert ist, als in bzw. von DW, hat dir diese Verständnisprobleme bereitet?

Sachen gibt's :suspekt:

mfg Maik

 

[GFX-Händchen]

Ja leider, da ich längere Zeit ja nichts mehr gemacht habe, da muss ich erstmal wieder reinkommen.