Grafische Navigation möglich?

Moin,

es kommt darauf an was du möchtest. Hier mal drei Tuts für grafische navis zum nachbauen:
Text mit im Bild
Bild nur HG
CSS-Sprites (sozusagen weiterentwickelte Sliding doors) ;)

edit bei WP gibt es normal ja den Deppenlink deshalb nimm dieses Plugin um ihn zu vermeiden.

zu fuß verlinken bei wordpress:

Zitat

<?php bloginfo(template_url) ?> /page_ID

ohne gewähr, richtige syntax hier:
http://codex.wordpress.org/Function_Reference/bloginfo

Zitat von Xperia.X10

Ich danke dir schonmal für deine Bemühungen.
Ich denke keines der Tutorials ist für meine Navigation geeignet.

Denn meine Navigation soll diese 5 Seiten haben.
Doch da die Schrift im Bild ist, habe ich 2 Grafiken.
1 im Normalzustand und eine für Hover/Active für jeden Menüpunkt. Der Active Teil wie ich ihn vorher hatte funktioniert durch den dynamischen Content nicht mehr. Desweiteren bleibt das Problem auf was ich die Grafischen Buttons verlinken soll.

du benötigst nur eine Grafik. Der jeweils richtige Teil wird per background-position ins Bild geschoben.
Außerdem hätte eins der Tuts Text mit im Bild) den Vorteil dass auch ein Linktext dagestanden hätte, wenn die Grafiken ausgeschaltet wären.

Hättest du dir die Tuts mal richtig angeschaut wäre dir das sicher aufgefallen.
Wenn allerdings Image Replacement Techniken jenseits deiner Fähigkeiten sind, dann fehlen dir ein paar basics.
Little Boxes ist geeignet dir diese zu vermitteln. ;)

kannst auch html code in den seitentitel schreiben. macht zwar niemand, aber vielleicht hilfts

Zitat von Xperia.X10

koslowski Ich habe mir durchaus deine Tutorials angeschaut.
Jedoch denke ich hast du das Problem nicht erkannt.
Jeder Button brauch denke ich mal eine eigene Grafik,
denn die Beschriftung auf den Buttons ist im Bild.

dann hast du es wohl zu schlecht beschrieben. ;)
Anhand deines unbrauchbaren Codeschnipsels und des kleinen Bildes konnte ich kaum mehr als ein paar Alternativen anbieten.
Das du nur eine Grafik statt zwei für jeden Button brauchst habe ich ja gepostet, anhand deiner Antwort konnte ich leider nicht feststellen ob das überhaupt bei dir angekommen ist.

Ich versteh auch nicht was das mit der Verlinkung soll.
Du erstellst die Seiten in WP und dann machst du das Menü z.B. über Widgets (Backend - Design - Menüs). Einfacher gehts doch kaum. Da muss doch dann nix mehr verlinkt werden. :???:

mmmh.....jetztet verstehe ich dich besser! :D
Das interessiert mich jetzt selber mal. Werde das morgen bei meiner Testinstall mal durchprobieren und geb dir dann Bescheid (evtl. übermorgen erst). ;)

Zitat von Xperia.X10

Doch wenn man es nicht über das Backend macht und einfach die Navigation in der Header.php
hat, dann wäre die Frage welche Verlinkung ich den Buttons zuweisen muss um zu den gewünschten Seiten zu kommen. Denn diese werden ja im Backend erstellt, die verschiedenen Seiten.

Frank Bültge hat hier ein Beispiel was nicht ganz 100%ig paßt, aber zeigt wo ungefähr die Reise hingeht, wenn man das hardcodiert ins Backend schreiben will.

Zitat von Xperia.X10

Also die Hauptnavigation soll aus Grafiken wie auf meinem Bild zu sehen sein.
Und nicht so eine wie über das Backend in nur Textform.

Ich weiss leider nicht wie man den Linktext verhindern kann. Warum sollte man auch? Wenn Bilder und CSS ausgeschaltet ist, hat man da ja sonst gar nix mehr, Stichwort Zugänglichkeit/Accessibility.
Es ist nur die Frage wie man den Linktext am geschicktesten aus dem Viewport schiebt und welchem Element man die HG-Grafiken zuweist (wahrscheinlich li).

Zitat von Xperia.X10

Es muss glaube nicht unbedingt im Backend überhaupt gemacht werden.
Denn ich habe Ja schon feste Navigationspunkte
und es müssen keine beliebigen im Backend erstellt werden können.

Ein CMS ist dazu da das es sowas für einen übernimmt, sonst wäre es ja sinnlos. Irgendwie muss die navi erzeugt/hingeschrieben werden.
Dann würde sich für mich die Frage stellen: Warum überhaupt ein CMS? Dann könnte ich es ja teilstatisch machen, d.h. wiederkehrende (header, footer) und dynamische (navi) per include einbinden und gut ist.

Ich glaube fast du solltest dich noch etwas in WP einarbeiten um zu verstehen wie es arbeitet. :wink:

http://codex.wordpress.org/Dynamic_Menu_Highlighting

okay, habs jetzt mal getestet.
Vorraussetzungen:
Toschos Plugin zur Vermeidung des Deppenlink ist aktiviert.
Das Menü habe ich im Backend unter Design - Menüs erstellt und als primäre navi dort abgespeichert.
Die Startseite habe ich auch extra als Seite erstellt.
Für jeden Menüpunkt gibt es nur eine Grafik, unten der Normalzustand und darüber der hover-Status:
Jeder Listenpunkt ist 100px breit und 50px hoch. Also ist die Grafik insgesamt 100x100px

Der generierte Quelltext:

<div class="menu-header">
<ul id="menu-topnavi" class="menu">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href='/startseite/'>Startseite</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href='/galerie/'>Galerie</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href='/kontakt/'>Kontakt</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href='/beispiel-seite/'>Beispiel-Seite</a></li>
</ul>
</div>

Das CSS dazu:

/* grafische navi */


#access .menu-header li  {
        width:100px;
        height:50px;
}
#access .menu-header li.menu-item-68 a:link  {
    display:block;
    background:url(images/start.png)no-repeat 0 0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
#access .menu-header li.menu-item-69 a:link  {
    display:block;
    background:url(images/zwei.png)no-repeat 0 0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
#access .menu-header li.menu-item-70 a:link  {
    display:block;
    background:url(images/drei.png)no-repeat 0 0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
#access .menu-header li.menu-item-71 a:link  {
    display:block;
    background:url(images/drei.png)no-repeat 0 0;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
#access .menu-header li.menu-item-68 a:hover,
#access .menu-header li.menu-item-68 a.current_page_item  {
    display:block;
    background:url(images/start.png)no-repeat 0 -50px;
    width:100%;
    height:100%;
    text-indent:-9999px;
}
#access .menu-header li.menu-item-69 a:hover,
#access .menu-header li.menu-item-69 a.current_page_item  {
    display:block;
    background:url(images/zwei.png)no-repeat 0 -50px;
    width:100%;
    height:100%;
    text-indent:-9999px;
}


#access .menu-header li.menu-item-70  a:hover,
#access .menu-header li.menu-item-70 a.current_page_item  {
    display:block;
    background:url(images/drei.png)no-repeat 0 -50px;
    width:100%;
    height:100%;
    text-indent:-9999px;
}


#access .menu-header li.menu-item-71  a:hover,
#access .menu-header li.menu-item-71 a.current_page_item  {
    display:block;
    background:url(images/drei.png)no-repeat 0 -50px;
    width:100%;
    height:100%;
    text-indent:-9999px;
}

Funktioniert einwandfrei im FF. ;)

Man kann einen Beitrag scheinbar nur innerhalb von 5 Minuten ändern, wenn man sich vertan hat. Das ist imho entschieden zu kurz!! :roll:

Also hier ein neuer Beitrag, um den vorigen zu korrigieren:
Normalzustand der Grafik ist oben und hover-Status unten!