Navigation mit Bilder

[rogy]

Navigationen habe ich meistens mit "NAV_LIST_UL" gelöst. (Dank an Flip-Flop)
Nun möchte haber mein Kunde "seine" Schrift für die Navigation verwenden. Also muss ich die Vertikale Navigation mit Gifs aufbauen.
Wie habt Ihr dieses Problem gelöst?

[Uwe367]

Dann schau mal in die nlu_navi1.css
Dort kannst du Hintergrundfarben und Bilder definieren.

Beispiel aus dieser Datei.

Code: Select all

background: #81909F url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;

Gruß Uwe

[flip-flop]

Wenn du eigene Grafiken zu jedem Menüpunkt einsetzt musst du mit IDs arbeiten. Etwa so: http://forum.phpwcms.org/viewtopic.php?p=74552#74552

Eine andere Möglichkeit ist der Einsatz von {GT:Stil}Text{/GT} in der "Seitenebene Überschrift:" natürlichen mit allen Nachteilen die man sich damit erkauft.

Knut

[rogy]

Danke für die Antwort. Habe mal eine Testlauf mit dem GT-MOD gemacht. hover und active geht wohl dann nicht. Mit den ID komme ich nicht klar Gibt es denn keine Möglichkeit dass bei der Seitenebene Überschrift auf ein Gif/PNG verlinkt. Oder einer andere Lösung als die Navigation mit NAV_LIST_UL zu erstellen.

[photojo]

Warum bearbeitest du die nlu_navi1.css nicht? Hier kannst Du doch alles einstellen?!?

[flip-flop]

Mit den ID komme ich nicht klar

- das ist unabdingbar, sonst kommst du kaum ans Ziel. Alternativen sind JS, flash oder uralte Techniken - und hierbei findet Google dann garnix...

Was meinst du mit "Verlinkung bei der Seitenebene Überschrift auf ein Gif/PNG"?
Schreibe bitte einmal ausführlich den HTML und CSS Teil kurz runter, damit ich mir das vorstellen kann.

Wie Jo schreibt, alle Grundlagen sind in den css-Beispielen vorhanden. (Deshalb sind diese Dateien auch so monsterhaft groß, weil wirklich alle Möglichkeiten dort abgedeckt werden).

Knut

[rogy]

Denke so langsam habe ich das mit den IDs verstanden. Mit {NAV_LIST_UL:F,ID,,,active,id} bekomme ich zu jeder Rubrik eine eindeutige ID

Code: Select all

<ul id="id_0">
	<li id="li_id_1" class="sub_no active sub_first"><a href="index.php?Kontakt">Kontakt</a></li>
	<li id="li_id_3" class="sub_no"><a href="index.php?test">Test</a></li>
	<li id="li_id_4" class="sub_no"><a href="index.php?neuheit">Neuheit</a></li>
	<li id="li_id_5" class="sub_no"><a href="index.php?leistung">Leistung</a></li>
</ul>

Nun kann ich beim CSS (nlu_navi1_id_css) die background images inkl. hover und active zu jeder Rubrik (ID) einzeln zuteilen.
Denke so sollte es klappen. Danke Flip-Flop.

Da ich nun die Rubriken wie Kontakt usw. als Backgroundimages definiere brauche ich die HTML Titel nicht mehr. Wie und wo kann ich diese ausklammern?

[Oliver Georgi]

Informiere Dich mal über CSS und @fontface.

[flip-flop]

@fontface: Naja, das sind Tips die im Moment noch hart an der Grenze der Kompatibilität segeln. Trotzdem eine interessante Variante wenn die Besucher der Seite ausschließlich aus dem hippen Medienbereich kommen. Legst du etwas für die Industrie oder das Handwerk an (also dort wo das richtige Leben spielt), vergiss es im Moment noch.

Hier mehr zur Technik: http://www.mediaevent.de/css/font-face.html

Den Seitentitel würde ich auf keinen Fall zerstören, sondern eher in der NAVI per CSS ausblenden. z.B. mit
text-indent: -900px;

[Oliver Georgi]

@fontface: Naja, das sind Tips die im Moment noch hart an der Grenze der Kompatibilität segeln....

Knut, das ist leider nicht richtig. Der IE unterstützt das - also die von Dir kolportierte Zielgruppe kommt hervorragend damit klar. Man muss eben nur wissen, wie es geht. Und der Rest der Anwender arbeitet mit Firefox 3.5 oder Safari. Der Umsetzungsaufwand auf Seiten des Gestalters ist aber um Längen geringer als manuell Grafiken anzufertigen oder/und IDs per CSS zu befüllen.

Die von Dir verlinkte Seite ist leider etwas aus der Zeit.

Hier direkt einsteigen - für Anfänger sozusagen:
Fertige Sets laden: http://www.fontsquirrel.com/
Eigenes Set erstellen: http://www.fontsquirrel.com/fontface/generator

[rogy]

Perfekt , das mit dem text-indent. Herzlichen Dank Flip-Flop.
Die @font-face-Regel sieht auch sehr interessant aus. Bin aber erst mal froh dass ich es mit CSS lösen kann. Danke Oliver

[Oliver Georgi]

@font-face ist CSS!

[rogy]

Sorry klar ist CSS... habe mir die Links angesehen und getestet.
Wow..das funktioniert ja wirklich. Es lebe @font-face! Danke

[markus s]

@rogy
dann poste hier mal deine erkenntnisse wie du das mittels fontface umsgesetzt hast...

[Oliver Georgi]

@Markus! Besuche meine Links von oben - dann siehst Du es. Alter Faulpelz