Als Aufzählung habe ich ein Bild list-style-image: url('quader.gif'); list-style-type: square;
Nun benötige ich aber einen Hovereffekt, wenn der User über ein Menüpunkt geht (stellt euch a Tags vor) soll an der Stelle ein ein anderes Bild angezeigt werden.
Eine Liste ist ja laut Buch semantisch richtig, was meint ihr, wie kann ich da am sinnvollsten vorgehen?
Hallo Ponti, zunächst muss ich erst fragen: Handelt es sich bei Menu 1-4 um Menü-Unterpunkte oder stehen sie für eine weitere Liste?
Im ersten Fall würd ich auch sagen, dass die Liste der exakt richtige Ansatz ist. Wegen des Listenbildes und des Hover-Effekts würde ich allerdings zu einem etwas anderen Vorgehen raten. Du könntest einfach ganz auf ein list-style-image verzichten und die Grafik als Hintergrundgrafik des <li>-Tags umsetzen. Dann könntest Du mittels li:hover eine andere HIntergrundgrafik für den Hover-Effekt einsetzen. Wenn dies auch mit dem IE funtzen soll, musst du dasselbe, glaube ich, mit dem entsprechenden <a>-Tag durchführen. Ein kleiner CSS-Schnipsel: ul { list-style-type:none;} li { background:url(images/Listenbild.png) top left no-repeat; padding-left:20px;} li:hover { background:url(images/Listenbild_hover.png) top left no-repeat;}
Wenn ich dein Problem richtig verstanden habe, sollte dieser Ansatz es lösen.
das "Problem" liegt hierbei, dass der ganze Pfad hervorgehoben wird. Gibt es hierfür auch noch einen workaround? Es sollen nur die jeweils überfahrenenden Items gehovert werden, und nicht auch deren Eltern. Im IE funktioniert der untere Code noch nicht, aber das spielt hierbei noch keine Rolle, mit dem a Attribut funktionierts.
Bin echt gespannt.
Noch eine kleine Anmerkung: Falls das css File extern liegt, funktioniert das alles nicht mehr. Seehhhr suspekt!! <link rel="stylesheet" type="text/css" title="Default Style" media="screen" href="style/screen.css" />
Viele Grüße Ponti
Dieses Menü kann weiter verschachtelt sein, hier ist es nur bis zur zweiten Ebene verzweigt:
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Neue Seite 1</title> <style> ul { list-style-type:none; } li { background: url(images/nav/quad2.gif) top left no-repeat; padding-left:20px; } li:hover { background: url(images/nav/quado2.gif) top left no-repeat; }
Hallo Ponti, Ja, da gibt es einen workaround. Ob der allerdings so ganz xhtml-konform ist, weiß ich nicht. Du hast die Liste korrekt verschachtelt, indem du die Unterliste in den Oberpunkt Test gesteckt hast. <ul> <li>Bla <ul> <li>BlaBla</li> <li>BlaBlaBla</li> </ul> </li> <li>Blub</li> </ul>
Wenn du nicht willst, dass Bla mit hervorgehoben wird, schenkst du der Unterliste einfach ein eigenes leeres <li></li>.
Die Sache hat bei horizontalen Navileisten allerdings leider einen Haken: Das leere <li>-Element nimmt leider einen kleinen aber dennoch störenden Platz ein, d.h. in der Leiste entsteht ein zusätzlicher Freiraum von ca. 5px. Dadurch bewegt sich die ganze Leiste und das Layout wird ggf. zerschossen. Das müsste wegfallen, wenn man folgende nicht ganz saubere Naviliste schreibt: <ul> <li>Bla</li>
<ul> <li>BlaBla</li> <li>BlaBlaBla</li> </ul>
<li>Blub</li> </ul>
Bei vertikalen Navileisten brauchst du dich darum allerdings nicht zu sorgen.
Ach ja: der zusätzliche Freiraum kann auch umgangen werden, wenn man der Unterliste das style-Attribut position:absolute; zuweist. Allerdings kann ich dir gleich sagen, dass FF und IE sie dann seeehr unterschiedlich positionieren und du daher ein zusätzliches Stylesheet mit z.B.
Eine neue neue Ungeordnete Liste außerhalb eines LI Tags aufzumachen ist _nicht_ XHTML konform und fällt damit eigentlich aus. Was genau soll die Liste denn darstellen? Allem Anschein nach wird das ganze ja eine Navigation.. warum dann also den hover effekt nicht einfach auf die Links legen? Dann wäre auch kein Workaround vonnöten. meinst du in etwa sowas: http://www.o315.de/tmp/xhtmlcss/index.html ?