[Solved] Navigation mit diversen Icons

**Marcello** · 01.10.2009, 18:50

Hallo und guten Tag

Ich erstelle gerade eine webseite welcher ich gerne den fünf Hauptmenupunkten jedem ein anderes Hintergrundbild laden möchte, d.h, neben jdem Hauptmenu Punkt soll ein Icon sein (das sich beim hovern hervorhebt).

Es handelt sich um ein aufklappmenu bis level2 (also 1,2,3)

Nun wie kann ich in typolight denn einselne Navigation .li per CSS ansprechen, respektive wie kann ich sagen das .li 1 CSS ID "Home" hat .li 2 CSS ID "about" etc.

Und wenns geht wärs noch besser wenn das mit dem "Mootols Navigation" Plugin auch funktionieren würde!

Besten Dank schon im Voraus.

***Nina*** · 01.10.2009, 19:09

Du kannst in der Seitenstruktur jeder Seite eine eigene CSS-Klasse zuweisen. Diese wird dann auch in der Navigation ausgegeben und kann somit von dir für die Zuweisung der Icons im Stylesheet genutzt werden.

**Andreas** · 01.10.2009, 19:15

Hallo Marcello,

du kannst der Seite eine Klasse mitgeben, diese findest du dann im Listenpunkt. Desweiteren könntest du nav_default.tpl modden, um dir Klassen oder IDs in die Listenpunkte du generieren.

Andreas

**Marcello** · 01.10.2009, 19:34

Wow das gin ja fix, werd ich sofort testen!

Danke an auch beide!

**bitman** · 25.07.2011, 19:11

Hallo Forum,

ich habe mir das hier gerade herausgesucht, weil ich auch eine derart grafisch aufgelockerte Navigation erstellen wollte. Die Bindung über die Klasse finde ich sauber...

Aber wohin legt man die Icons für die Navigation am besten? In welchem Verzeichnis sollte man sie speichern? Gibt es da eine Vorgabe oder Empfehlung?

Danke für Antworten
(hoffentlich sieht meine Frage hier überhaupt noch jemand)

bitman

**Mr. Acylase** · 25.07.2011, 19:43

Hallo Marcello,

wie meine Vorredner schon geschrieben haben kann Du in der Seitenstruktur jeder Seite eine eigene Klasse beziehungszweise eine eingene ID vergeben. Diese kannst Du dann per CSS getrennt ansprechen. Die könnte z.B. so aussehen:

ul.level_1 li.home a

ul.level_1 li.home a:hover

Hallo Bitman,

mir sind da keine Vorgaben bekannt. Ich mache es so das ich für meine Grafikdatein getrennte Ordner anlege (über die Dateiverwaltung). Die Ornder nenne ich dann zum Beispiel nav, layout, images usw...

Grüße

Stefan

**bitman** · 25.07.2011, 20:28

Zitat von Mr. Acylase

mir sind da keine Vorgaben bekannt. Ich mache es so das ich für meine Grafikdatein getrennte Ordner anlege (über die Dateiverwaltung). Die Ornder nenne ich dann zum Beispiel nav, layout, images usw...

Stefan

Ich habe mich im Moment an das Buch von Peter Müller gehalten, und in tl_files ein Verzeichnis mit dem Projektnamen und darin ein Verzeichnis "themes/themename/grafics" angelegt.

Wäre das von der Contao-Logik so sinnvoll? Jedes Theme kann ja andere Graifiken und Icons verwenden...

Das ist dann nachher im CSS allerdings ein ziemlich langer Pfad und ich bin mir total unsicher, ob das das dann auch bei Wechsel des Themes noch schlüssig ist.

Grüße

bitman

**Mr. Acylase** · 25.07.2011, 20:38

Ich finde das sogar sehr sinnvoll für jedes Projekt einen eigenen Ordner anzulegen. Es mag ein wenig gewöhnungsbedürftig sein aber nach einer gewissen Zeit findest Du Dich wahrscheinlich damit besser zu recht als wenn Du die verwendeten Grafiken einfach abspeicherst. Und was den langen Pfad angeht, da würde ich mir erstmal keine Gedanken machen.

Grüße

Stefan

**pmmueller** · 26.07.2011, 07:47

Zitat von bitman

Das ist dann nachher im CSS allerdings ein ziemlich langer Pfad ...

Wenn dir der Pfad zu lang ist, gib dem Theme-Ordner und dem Grafik-Ordner kurze Namen:
/tl_files/red/gfx oder sowas in der Art.
"grafics" ist sowieso eine eher seltene Schreibweise. Die Anglisten schreiben lieber "graphics", und die Germanisten "grafiken"

**Andreas** · 27.07.2011, 18:46

Als Neueinsteiger brauchst du dir keine Gedanken über Themes zu machen. Ich habe noch in keinem Projekt Themes gebraucht. Ich habe mein CSS hier tl_files/css/ und meine Bilder die per CSS eingebunden werden hier tl_files/css/img/. Willst du ein zweites Projekt realisieren bietet es sich an eine neue Installation mit eigener DB aufzusetzen.

Grüße

**bitman** · 28.07.2011, 11:35

Schon mal ein zwischenzeitlicher Dank fürs Mitlesen und die Tipps.

Ich habe das nun ruhig schon mal "aufgebohrt" gespeichert. "grafics" kam mir aber doch gleich so ulkig vor ;-)

Aber nun habe ich noch ein CSS-Problem mit den Listen der Navigation. Ich bekomme zwar die Bildchen (sind 80x80px groß) per CSS eingebunden und auch seitlich positioniert, aber der Linktext steht dann immer mit der ersten Zeile bottombündig zum Bildchen. Wenn er länger wird, wird umgebrochen und die zweite Zeile steht dann _unter_ der unteren Bildkante. Das sieht sch.... aus.

Wie kann ich es hinbekommen, dass der Text des Links an der Oberkante des Bildchens beginnt?

Auf Hintergrundbilder wollte ich eigentlich nicht zurückgreifen.
Schön wäre es außerdem, wenn auch das Bild linksensitiv wäre...

Grüße
bitman

**pmmueller** · 28.07.2011, 11:39

Wenn du die Grafik per <img> einbindest ist das normales Verhalten, dass der Text im selben Block-Element unten steht.

Adhoc-Lösung: im HTML <img ... align="left">. Abstände mit hspace und vspace regeln (Syntax bei Selfhtml).

Eleganter: im CSS die Grafik mit float:left; floaten.

Gibt es einen Link zur Beispielseite?

**psren** · 28.07.2011, 12:14

oder komplett per CSS

Code:

.mod_navigation a.deineseite:before {
  content: url('tl_files/pfad/zum/bild.png');
}

wird aber afaik erst ab ie8 unterstützt.
Die Bildchen könnte man dann auchnoch in eine Sprite-Grafik zusammenfassen und dann mit
clip den richtigen Ausschnitt anzeigen ;-)

Also, wenn du mal experimentieren willst ;-)

**bitman** · 28.07.2011, 17:19

Zitat von pmmueller

Wenn du die Grafik per <img> einbindest ist das normales Verhalten, dass der Text im selben Block-Element unten steht.
gibt es einen Link zur Beispielseite?

Ich habe ordnungsgemäß über die CSS-Klassen-Zuordnung zu den Seiten gearbeiet. Diese wird im Navigationsmodul dann auch den List-Elementen zugewiesen, die den Link auf die Seite aufnehmen.

Code:

ul
{
	margin-left:60px;
	padding-left:0;
}

li
{
	list-style-position:outside;
	    padding-left:10px;
	    margin-bottom:20px;
}

li.pg-home
{
	list-style-type:none;
	list-style-image:url("/tl_files/harzhirt/themes/01-green/icons/icon_home.png");
}

li.pg-walking
{
	list-style-type:none;
	list-style-image:url("/tl_files/harzhirt/themes/01-green/icons/icon_nordic_walking.png");
}

li.pg-biking
{
	list-style-type:none;
	list-style-image:url("/tl_files/harzhirt/themes/01-green/icons/icon_biking.png");
}

usw.

Wie könnte ich dennordnungsgemäß über die Seitenstruktur dem Listelement der Navigation ein Image zuweisen?

Die URL der Seite lautet http://harzhirt.lan. Ich glaube (hoffe), dass Du die nicht erreichen kannst von deinem Lappi aus.

Aber hier ein Bild als Beispiel

Harzhirt - Menu als Liste.png

Da muss es doch Leute geben, die sowas in Contao schon gemacht haben, ohne sich zu verrenken?

Grüße
bitman

**bitman** · 28.07.2011, 17:32

Zitat von psren

oder komplett per CSS

Code:

.mod_navigation a.deineseite:before {
  content: url('tl_files/pfad/zum/bild.png');
}

wird aber afaik erst ab ie8 unterstützt.

sollte natürlich überall funktionieren. Ich schaue mir den Vorschlag aber noch genauer an.

(Dummerweise habe ich momentan keinen lauffähigen IE mehr. Auf meinem WinDOS (XP) streikt der seit geraumer Zeit. Ich weiß nicht woran es liegt. Der funktioniert immer nur einige Stunden nach einer kompletten Neuinstallation. Irgendein Tool muss da rott sein oder ich habe einen verdammt schlauen Virus im System, der selbst das Hartformatieren überlebt)

Gibt es denn eine andere Möglichkeit, z.B. in der Seitenbeschreibung eine Variable zu hinterlegen mit der Bildreferenz, die man dann im Navigationsmenu wieder ausliest? Aber auch dann müsste ich in das mod_navigation eingreifen. Das will ich aber ganz bewusst nicht tun.

Grüße aus dem Harz
bitman

**psren** · 28.07.2011, 17:43

Zitat von bitman

Der funktioniert immer nur einige Stunden nach einer kompletten Neuinstallation.

Ich würde nie behaupten, dass der Funktioniert.

Soweit ich mich erinnere gibt es eine Erweiterung dafür. Ich dachte, da gibt/gab es mal eine Erweiterung dazu imagenavigation oder so... aber ich kann das nicht mehr finden.

Lohnt sich meiner ansicht nach auch nicht, da man den Hover-Effekt ja sowieso am besten mit Image-Sprites macht...

**pmmueller** · 28.07.2011, 18:12

Die Pseudoklassen :before und :after funktionieren erst seit IE8.

Die beste Art die Bilder unterzubringen ist eigentlich wirklich als Hintergrundbild im CSS. Spricht irgendwas dagegen, die Bilder über die Eigenschaft background direkt an den Hyperlink in den Listenelementen zu hängen?

Code:

a.pg-home {
  background: #rrggbb url("/tl_files/harzhirt/themes/01-green/icons/icon_home.png") no-repeat left center;
  padding-left: 20px; /* entspricht etwa der Breite des Bildes */
}

Ich gestalte Navigationen eigentlich meist lieber über die Links als über die <li>s.

Wenn du bei den Listenelementen bleiben willst, dann probiere statt der Eigenschaft list-style-image (was eigentlich für den Job gedacht ist) auch hier mal background für das Bild. Damit hast du zumindest ansatzweise die Möglichkeit, die Grafiken zu positionieren. Zum Beispiel so:

Code:

li.pg-home {
  list-style-type:none;
  background: #rrggbb url("/tl_files/harzhirt/themes/01-green/icons/icon_home.png") no-repeat left center;
  padding-left: 20px; /* entspricht etwa der Breite des Bildes */
}

#rrggbb steht für eine Hintergrundfarbe. Das padding-left macht Platz für die Grafik. Statt center kannst du auch Angaben in Prozent oder Pixel machen.

**Andreas** · 01.08.2011, 01:15

Ich würde dir auch dazu raten es so ähnlich zu machen wie pmmueller schreibt.

Wenn du den As und SPANs im Menü display:block gibst, kannst du sie wunderbar mit background, padding usw. formatieren. Dann hast du auch eine schöne große sensible Fläche für den Hover-Effekt (das Hintergrundbild ist dann auch "sensibel"). Ich sehe immer wieder, dass das padding den LIs gegeben wird und die As kein padding haben, damit wird der Bereich zum Hovern sehr klein.

So brauchst du auch keinerlei Template-Anpassung vorzunehmen.

Die Browser-Listenformatierung würde ich mit list-style-type:none ganz ausschalten. Dann brauchst du auch kein vertical-align. Mit line-height kannst du dann vertikal zentrieren, wenn du möchtest. Ansonsten fängt der Text oben links an (mit den entsprechenden Abständen natürlich).

Möchtest du einen Hover-Effekt (anderes Bild), dann mach es mit Sprites (beide Bilder in einem Bild), wie dir schon gesagt wurde. (Bild dann mit CSS nur hoch und runter schieben).

Da muss es doch Leute geben, die sowas in Contao schon gemacht haben, ohne sich zu verrenken?

Ja, da hast du recht, das ist tägliches Brot, wird in fast jedem vertikalen Standardmenü angewendet. Wenn du es so machst wie beschrieben, hast du es ab da auch drauf ;-).

(Firebug für Firefox hilft dir beim Echtzeit-Entwickeln).

Grüße