mouseover-Navigation mit CSS

[xero]

Hi!

Als nächstes möchte ich eine mouseover-Navigation mit CSS lösen. Mein HTML-Code sieht bisher so aus:

Code: Alles auswählen

<ul id="navi">
  <li id="hover1"><a href="#" title="">1</a></li>
  <li id="hover2"><a href="#" title="">2</a></li>
  <li id="hover3"><a href="#" title="">3</a></li>
  <li id="hover4"><a href="#" title="">4</a></li>
  <li id="hover5"><a href="#" title="">5</a></li>
  <li id="hover6"><a href="#" title="">6</a></li>
  <li id="hover7"><a href="#" title="">7</a></li>
</ul>

Ich komm einfach nicht darauf, das mit CSS zu lösen. Die Navigation soll sieben verschiedene Grafiken beinhalten, wobei die Hover-Grafiken noch ein wenig breiter sind als die normalen. Hoffe ihr könnt mir helfen.

[Manuel]

Hi Xero!

Wie schaut denn die dazu gehörige CSS-Datei aus? Denn das wäre ja interessanter...

Es gibt beim Grafikmouseover immer 2 unterschiedliche Wege. Der eine Weg ist einfach, hat aber entscheidende Nachteile. Der andere Weg ist etwas schwieriger, klappt dafür aber besser.
Daher verwende ich selbst ehrlich gesagt nur sehr ungern Grafiken für Buttons.

Wie genau sehen denn die Grafiken aus? Denn das könnte teilweise schwierig werden mit einer Liste, da man dort ja immer Abstände zwischen den einzelnen Punkten und somit auch Grafiken hat. Vielleicht wäre da eine Tabelle sogar mal die einfachste Lösung...

Möglichkeit 1:

Code: Alles auswählen

#hover1 a
{
    background-image: [i]Bild1[/i]
}
#hover1 a:hover
{
    background-image: [i]Bild2[/i]
}

Möglichkeit 2 ist es, ein Bild mit beiden Zuständen zu machen. Dies hat den Vorteil, dass man die Grafik beim Mouseover mit CSS dann einfach verschiebt. Somit hast du keine Ladezeit, denn diese ist im Menü meist sehr ärgerlich und auch bei kleinsten Grafiken spürbar. Ob ein Preloader da wirklich Aushilfe schafft weiss ich nicht.

Wie genau das funktioniert habe ich bei Marcel's Homepage erklärt:
http://www.der-webdesigner.net/forum/ftopic625.html

Lg,
Manuel

[xero]

Ok, habs erstmal nach Variante 1 gemacht (glaube von Ellie). Die buttons funktionieren jetzt mit einem mouseover-Effekt, nur stört micht jetzt noch der Listenpunkt. Wie bekomm ich den denn weg, oder muss ich das ganze dann doch ohne Liste machen?

Code: Alles auswählen

#navi span {
  display: none;
}

#navi_hover1 li {
  background-image: url(../images/layout/navigation/start_inactive.png);
  width: 28px;
  height: 88px;
  display: block;
}

#navi_hover1 a {
  background-image: url(../images/layout/navigation/start_inactive.png);
  width: 28px;
  height: 88px;
  display: block;
}

#navi_hover1 a:hover {
  background-image: url("../images/layout/navigation/start_active.png");
  width: 33px;
  height: 88px;
  display: block;
}

<ul id="navi">
      <li id="navi_hover1"><a href="#" title="Startpage"><span>Start</span></a></li>
</ul>


[SilentStormer]

Code: Alles auswählen

.li {
list-style-type: none;
}


[Manuel]

Ich glaube übrigens, dass du "#navi_hover1 li" komplett löschen kannst, da in einem li ja keine weiteren li liegen. Bin mir da aber auch gerade nicht so sicher, würde es aber eher weglassen oder versuchen anders zu definieren, da du so extrem viel Quellcode bekommst.

Lg,
Manuel