✔ Navigation mit Bildern

[lisali]

Hallo,

ich möchte gerne eine Navigation, bestehend aus Bildern bauen und habe eine einzige Bilddatei. In der Bilddatei ist ein bestimmter Bereich für die Darstellung zuständig, wenn man mit der Maus drüberfährt und einmal die Standard-Darstellung. Die Navigation soll horizontal nebeneinander ausgerichtet werden.

Jetzt ist meine Frage was der optimalste Weg dafür wäre das zu machen?

Danke schonmal.

 

[Maik]

Moin,

hierfür stehen dir CSS Sprites zur Verfügung.

Mit dieser Technik wird der jeweilige Bildausschnitt im Anzeigebereich des Elements mittels background-position angezeigt.

In meinem CSS-Tutorial CSS-Rollover & CSS-Rollover - Teil 2 stelle ich die Technik jeweils im Abschnitt "CSS-Rollover mit background-position" im kleinen Maßstab vor.

mfg Maik

 

[lisali]

Danke dir!

Also, ich hab es jetzt hinbekommen und im IE, Chrome und FF getestet und es gibt jedenfalls von der Darstellung her keine Unterschiede.
Und nun wollte ich nur noch fragen, was ich hier machen könnte, damit er sowohl bei "current" als auch beim hover die selben CSS Eigenschaften annimmt?

ul#panel {margin:0;padding:0;list-style:none; bottom:0; position:absolute}
ul#panel a {display: block; width:94px; height:65px}
ul#panel li {float:left}
ul#panel li a#home {background:url(images/panel.png) 0 -65px; width:46px; height:65px}
ul#panel li a#home:hover, .current {background:url(images/panel.png) 0 0}
ul#panel li a#user {background:url(images/panel.png) -46px -65px; width:96px; height:65px}
ul#panel li a#user:hover, .current {background:url(images/panel.png) -46px 0}
ul#panel li a#forum {background:url(images/panel.png) -142px -65px; width:97px; height:65px}
ul#panel li a#forum:hover, .current {background:url(images/panel.png) -142px 0}
ul#panel li a#groups {background:url(images/panel.png) -239px -65px; width:107px; height:65px}
ul#panel li a#groups:hover, .current {background:url(images/panel.png) -239px 0}
ul#panel li a#asking {background:url(images/panel.png) -346px -65px; width:94x; height:65px}
ul#panel li a#asking:hover, .current {background:url(images/panel.png) -346px 0}
ul#panel li a#media {background:url(images/panel.png) -440px -65px; width:99px; height:65px}
ul#panel li a#media:hover, .current {background:url(images/panel.png) -440px 0}
ul#panel li a#events {background:url(images/panel.png) -539px -65px; width:97px; height:65px}
ul#panel li a#events:hover, .current {background:url(images/panel.png) -539px 0}
ul#panel li a#more {background:url(images/panel.png) -636px -65px; width:31px; height:65px}
ul#panel li a#more:hover, .current {background:url(images/panel.png) -636px 0}

html:

<ul id="panel">
    <li class="current"><a href="#" id="home"></a></li>
    <li><a href="#" id="user"></a></li>
    <li><a href="#" id="forum"></a></li>
    <li><a href="#" id="groups"></a></li>
    <li><a href="#" id="asking"></a></li>
    <li><a href="#" id="media"></a></li>
    <li><a href="#" id="events"></a></li>
    <li><a href="#" id="more"></a></li>
</ul>

Ich möchte nämlich per PHP immer prüfen wo der User gerade ist und dieses <li> wird dann mit der class=current versehen.
Ich weiß nur nicht genau was ich im CSS schreiben soll, damit er sowohl beim Hover als auch wenn die Klasse eingetragen wurde, er die Eigenschaften annimmt.

 

[Maik]

Verwende dafür die folgenden gruppierten Selektoren - hier exemplarisch für den ersten Menüpunkt "home":

ul#panel li a#home:hover, 
ul#panel li.current a#home:link, 
ul#panel li.current a#home:visited {background-position: 0 0}

Mit der "CSS Sprites"-Technik wird in diesen Selektoren die Eigenschaft background-image:url() nicht benötigt, sondern ausschließlich background-position, handelt es sich hierbei doch um ein und dieselbe Grafikdatei.

Und wenn du background-image:url(images/panel.png) in diese Regel mitaufnimmst:

ul#panel a {display: block; width:94px; height:65px}

brauchst du sie nicht für jeden Menüpunkt zu wiederholen, sondern beschränkst dich hier auf die Hintergrundbildpositionierung.

Die height:65px-Regel deklarierst du ebenso für jeden Menüpunkt unnötigerweise doppelt.

mfg Maik

 

[lisali]

Super, vielen Dank.

Ich hab noch eine andere generelle Frage, da ich grad das Layout zurechtschneide, usw.

Warum hast du beim Rollover entschieden eine Liste dafür zu benutzen und keine <div>'s oder ähnliches?

Ich frage das nur, weil ich gerne generell wissen möchte in welchen Fällen man was am besten anwenden sollte... z.B. bei mehrspaltigen Dingen... ?

 

[Maik]

Ein Navigationsmenü wird in der CSS-Praxis üblicherweise mit einem Listenelement ausgezeichnet - stellt es doch eine Liste von Links dar, dessen semantisches Markup mit Hilfe von CSS in die gewünschte Form gebracht wird

• Cascading Style Sheets { Tutorials und Artikel : Index } / Listen-Navigationen
• CSS-basierte Navigationsleisten
• Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Durch verschachtelte <ul>-Elemente lassen sich Menüstrukturen mit weiteren Untermenü-Ebenen erzeugen, die zunächst in der Seitenansicht verborgen, und durch Interaktion des Seitenbesuchers angezeigt werden:

• Son of Suckerfish Dropdowns
• Stu Nicholls | CSSplay | CSS only menus ("Multi-Level CSS Only", "Multi-Level - Flyout", "Multi-Level - Dropline", "Multi-Level - Dropdown")

mfg Maik

 

[lisali]

Das heißt man benutzt generell gesagt bei Menüs oder Navigationen die ul-Listen?


Ich hab mal was angehangen... Einmal Cliboard, wie das Menü bei mir aussehen soll (den Inhalt muss man sich drinnen vorstellen).

Und einmal die Sprite-Datei menu.png.


Jetzt hab ich folgendes versucht:

    <ul style="list-style:none; padding:0; margin:0">
    <li style="height:7px; background: url(images/menu.png) 0 15px no-repeat"></li>
    <li style="height:20px; background: url(images/menu.png) 0 5px repeat-y">a<br />b<br />c<br /></li>
    <li style="height:11px; background: url(images/menu.png) 0 13px no-repeat"></li>
    </ul>

Also, erstmal zum Testen... aber hier wird schon gar nicht der Inhalt mitgeschleift... also, der Text überschreibt die Grafik. Was kann ich da machen?

 

[Maik]

Das heißt man benutzt generell gesagt bei Menüs oder Navigationen die ul-Listen?

Hat meine Antwort mit den empfohlenen Links die Frage nicht hinreichend beantwortet?

Oder willst du es in deinem Markup zu Div Wahnsinn, Div Suppe oder Div Chaos. kommen lassen?

Zu deinem Versuchsballon.

Fehler Nr.1: height:20px wird von den standardkonformen Browsern als absolute Elementhöhe interpretiert, weshalb dein dreizeiliger Inhalt über den unteren Elementrand hinaus läuft. min-height:20px wäre hier die Regel deiner Wahl, um eine Mindesthöhe zu definieren, sodass das Element bei zunehmenden Inhaltsumfang mitwächst.

Fehler Nr.2: Ein vertikal zu wiederholendes Hintergrundbild (repeat-y) lässt sich nicht vertikal positionieren (top = 5px). Die gleiche Gesetzmäßigkeit gilt für ein horizontal zu wiederholendes Hintergrundbild und eine horizontale Positionsangabe (left/right).

mfg Maik

 

[lisali]

Danke für den Link.

Heißt das, dass der Bereich, der sich durch den Inhalt ständig wiederholen lassen soll, eine einzelne Grafikdatei sein muss?

 

[Maik]

Kommt ganz darauf an, wie die Sprite-Grafik im einzelnen aufgeteilt ist.

Wenn sich beispielsweise darin alles in horizontaler Achse abspielt, die einzelnen "Motive" also alle nebeneinander angeordnet sind, lässt sich der gewünschte Bildausschnitt vertikal wiederholen, ohne die benachbarten Motive zu Gesicht zu bekommen.

mfg Maik