Page 1 of 2
Navigation mit Bilder
Posted: Wed 23. Dec 2009, 10:11
by 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?
Re: Navigation mit Bilder
Posted: Wed 23. Dec 2009, 11:00
by 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
Re: Navigation mit Bilder
Posted: Wed 23. Dec 2009, 11:12
by 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
Re: Navigation mit Bilder
Posted: Tue 5. Jan 2010, 15:05
by 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.
Re: Navigation mit Bilder
Posted: Tue 5. Jan 2010, 15:30
by photojo
Warum bearbeitest du die nlu_navi1.css nicht? Hier kannst Du doch alles einstellen?!?
Re: Navigation mit Bilder
Posted: Tue 5. Jan 2010, 15:45
by 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
Re: Navigation mit Bilder
Posted: Tue 5. Jan 2010, 18:17
by 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?
Re: Navigation mit Bilder
Posted: Tue 5. Jan 2010, 18:22
by Oliver Georgi
Informiere Dich mal über CSS und @fontface.
Re: Navigation mit Bilder
Posted: Tue 5. Jan 2010, 18:56
by 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;
Re: Navigation mit Bilder
Posted: Wed 6. Jan 2010, 08:39
by Oliver Georgi
flip-flop wrote:@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
Re: Navigation mit Bilder
Posted: Wed 6. Jan 2010, 09:06
by 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
Re: Navigation mit Bilder
Posted: Wed 6. Jan 2010, 09:36
by Oliver Georgi
@font-face ist CSS!
Re: Navigation mit Bilder
Posted: Thu 7. Jan 2010, 16:51
by rogy
Sorry
klar ist CSS... habe mir die Links angesehen und getestet.
Wow..das funktioniert ja wirklich. Es lebe @font-face! Danke
Re: Navigation mit Bilder
Posted: Thu 7. Jan 2010, 23:25
by markus s
@rogy
dann poste hier mal deine erkenntnisse wie du das mittels fontface umsgesetzt hast...
Re: Navigation mit Bilder
Posted: Fri 8. Jan 2010, 08:00
by Oliver Georgi
@Markus! Besuche meine Links von oben - dann siehst Du es. Alter Faulpelz
