1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

navi mit 3 bildern

Dieses Thema im Forum "Design" wurde erstellt von cycorps, 22. Juni 2009.

  1. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    Hi,

    ich will für meine Navigation jeweils 3 Bilder Pro Button verwenden (normal, mouseover, und "aktiv" also wenn die Seite geöffnet ist)

    Wie macht man es am besten? Ich wollte eig ein div machen mit dem bild als Background-image und dann per hover etc die eigenschaften ändern.?

    Richtiger Weg oder gibts bessere Möglichkeiten? Fürs erste muss es nicht dynamisch sein.
     
  2. JonnyBauer

    JonnyBauer Well-Known Member

    Registriert seit:
    11. Oktober 2008
    Beiträge:
    93
    Zustimmungen:
    0
    Für aktive Elemente, z.B. von wp_list_categories, gibt es extra die Klasse "current-cat" dasselbe für wp_list_pages (current-page-item) ;)

    für mouseover ist :hover der richtige weg ;)
     
  3. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    wenn ich aber nicht mit den wp-listes arbeite? Ich die Links fest per CSS/HTML definiere?

    was gibts dann für eine Möglichkeit?
     
  4. alchymyth

    alchymyth Well-Known Member

    Registriert seit:
    7. Juni 2009
    Beiträge:
    3.959
    Zustimmungen:
    0
    ich hatte das gleiche problem und habe von den folgenden beitraegen gelernt (leider in englisch, aber die html und css sollte klar sein)

    beispiel 1

    beispiel 2
     
  5. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    Danke für deine Antwort. Interessant zu wissen. Allerdings weiß ich nicht ob es mir bei meinem Problem hilft.

    Mit "active" oder "visited" schaffe ich es ja nicht, den Button anders darzustellen, wenn die Seite aktuell aufgerufen ist.
     
  6. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    Alternative, um es mit wp_list zu machen:

    horizontale Navigation wird via wp_listxxx eingebunden nimmt aber nur die Seiten, die unter die Oberkategorie/Oberseite "headnavigation" sortiert wurden.

    möglich?
     
  7. kaiser

    kaiser Well-Known Member

    Registriert seit:
    20. November 2008
    Beiträge:
    1.840
    Zustimmungen:
    0
    Hab´s vor kurzem einmal gebraucht und mir zuerst lokal erstellt. Hier also der Code in "Reinform":

    Anm.: Die Lösung hat mehrere Vorteile:

    • Valide in allen Browsern
    • Bilder werden per Css vorgeladen - keine zusätzlichen Ladezeiten oder "blank"s bis das Bild geladen wird
    Einzige Voraussetzung ist, dass Du die Hover-States ins ursprüngliche Bild unterhalb gleich mit einfügst. Du verschiebst das Bild an der linken oberen Ecke. Werte entsprechend anpassen.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Sieh´s als Rat der Weisen (besser geht ned). :mrgreen:
     
  8. koslowski

    koslowski Well-Known Member

    Registriert seit:
    9. Juni 2009
    Beiträge:
    645
    Zustimmungen:
    0
    Moin,

    sorry wenn ich das mal so anmerke, aber ein wenig besser gehts schon. ;)

    Warum a:active da mit reingenommen wird ist mir ein Rätsel, da es ja nur im Moment des Klicks gilt.

    Die Grafiken haben ja keinen Bezug zum Inhalt und gehören deshalb nicht ins Markup.

    Wenn die Grafiken ausgeschaltet sind ist "Ende Gelände" mit der Navi.

    Tutorial eines einfachen, horizontalen, grafischen Menüs(vertikal ist ja noch einfacher, nur ist die Grafik da 240x40px!):

    Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
    Normalzustand ist oben in der Grafik, der Hoverzustand darunter

    Doctype ist "strict" um immer im Standardmodus zu sein.
    Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

    Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
    Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

    XHTML:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    <a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
    overflow:hidden ist dafür, damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
    Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Mmh..., und damit ist auch der IE einverstanden??
    Nicht ganz:
    Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
    Das wird ihm per CC wieder beigebracht.
    Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern (oft) in der hover-position stehen
    und springt nicht zurück auf die "Normal-Position".
    Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber.
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte.
    Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor
    auf das betroffene Menü angewendet wird.

    Es kann sein das Gilder/Levin bei WP etwas Probleme macht, dann schiebt man den Linktext einfach per CSS aus dem Viewport.
    Evtl klappt das auch mit dem strong statt a nicht, das bräuchte man ne Funktion die das strong in WP einsetzt.
    Vielleicht deshalb einfach auf strong verzichten, ganz normal a hinschreiben

    Gruß
    koslowski
     
    #8 koslowski, 25. Juni 2009
    Zuletzt bearbeitet: 25. Juni 2009
  9. kaiser

    kaiser Well-Known Member

    Registriert seit:
    20. November 2008
    Beiträge:
    1.840
    Zustimmungen:
    0
    @Koslowski: Wie Du siehst, hab ich bei

    ul {font-size: 0; text-intend: -900%} stehen. Das Du die Menüpunkte noch beschriften solltest ist klar. Nur in einem Beispiel natürlich ned drinnen. (Die Grafiken heißen nacher vermutlich auch ned AAA, BBB, oder?). Genauso wie man den Container nicht "absolute" positionieren sollte... Wie schon gesagt, es ist ein Beispiel, dass man sich kopieren und anpassen kann. Und genau wegen dem IE-background-position Fehler verwende ich Deine Lösung nicht mehr. Die Grafiken sind dann zwar im Mark-Up, aber nachdem ich Menüs immer separat mache und per include hole, ist´s mir gelinde gesagt wurscht.

    So, aber jetzt bin ich auf´s Ergebnis unserer Bemühungen gespannt :D
     
  10. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    Huhu, danke für die Antworten.

    Hab jetzt die Idee von Kaiser aufgegriffen. Funktioniert auch soweit allerdings habe ich folgende Probleme:

    1.) Gebe ich den "Buttons" bei left: 2px um den Abstand zwischen den einzelnen Buttons zu erhöhen wird der Button immer auf der rechten Seite um 2px gekürzt? Warum welche Einstellung ist das?

    2.) Wie bau ich dort jetzt das 3 Image ein, wenn eine Seite aktuell geöffnet ist?

    3.) Kann ich das ganze Links orientieren? Die Buttons sind bei mir irgendwie zentriert.
     
  11. kaiser

    kaiser Well-Known Member

    Registriert seit:
    20. November 2008
    Beiträge:
    1.840
    Zustimmungen:
    0
    Ad 1) mach einfach in der Ausgangsdatei einen 2px Abstand und vergrößer den "top"-Parameter auch um 2px. Logisch, oder? Schau einmal in KOSLOWSKIS Kommentar oben. Er erklärt ganz gut, was es mit der 3-fach-Grafik auf sich hat.

    Ad 2) Du musst via php eine Weiche einbauen, falls das Objekt aktiv ist: füge die Klasse "Current_page_item" ein: <li class="nav span-4 pull-menu <?php if ( is_page('BLABLA') ) { ?>current_page_item<?php } ?>"><a><img></a></li>

    Ad 3) sollte eigentlich links orientiert sein. Poste doch einen Link, dann geht´s einfacher:
    position: relative; left: 0px;
     
    #11 kaiser, 25. Juni 2009
    Zuletzt bearbeitet: 25. Juni 2009
  12. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    1) hab einfach #menu li die eigenschaft: margin-right: 2px zugefügt. da es nicht genau bündig endet muss scheint es zu gehen.

    2) werd ich mal probieren. Wie muss ich denn im style.css das 3 bild nennen?
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    so siehts momentan aus.
     
  13. kaiser

    kaiser Well-Known Member

    Registriert seit:
    20. November 2008
    Beiträge:
    1.840
    Zustimmungen:
    0
    Ad 2) Die Klasse liefert Wordpress: .current_page_item (wie i d if-Weiche oben). Du hast übrigens auch noch andere Stati/Pseudoelemente zur Verfügung: ":link, :visited, :focus, :hover & :active" sind möglich.

    Ein Bsp: ".current_page_item {cursor: default; position: relative; left: 0px; top: -64px;} UND #menu img.home:active {position: relative; left: 0px; top -64px;}"

    Im Bsp ist der UND-Teil mit Pseudoelement active dafür zuständig dann für den Zustand während die Maustaste gedrückt ist, denselben Zustand zu zeigen, wie wenn der Menüpunkt die gerade aktive Seite anzeigt. Das cursor: default; mache ich um Punkto Useability besser zu zeigen, dass die Seite gerade dargestellt wird (Der Link bleibt trotzdem ein Link).

    Ad 1) Mach lieber Deine Grafik 2px breiter. Alles was Code spart, schafft Übersichtlichkeit und erhöht die Wahrscheinlichkeit, dass Du den Code wieder verwenden kannst.

    Zeig Deine Seite einmal her, damit man sieht wobei wir helfen konnten.

    EDIT: Weil ich mein Bsp oben gerade angesehen habe: Die Klassen pull, push, span, etc. sind aus dem Blueprint-Css-Framework, dass ich auf jeden Fall empfehlen kann.
     
  14. koslowski

    koslowski Well-Known Member

    Registriert seit:
    9. Juni 2009
    Beiträge:
    645
    Zustimmungen:
    0
    Moin,

    bei dieser Angabe solltest du allerdings bedenken das der IE6 :hover nur in Verbindung mit a kennt, weshalb er diese Anweisung ignorieren wird. ;)

    Gruß
    koslowski
     
  15. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
  16. kaiser

    kaiser Well-Known Member

    Registriert seit:
    20. November 2008
    Beiträge:
    1.840
    Zustimmungen:
    0
    2 Mögliochkeiten: (a = nicht sicher)

    a) den umgebenden div mit overflow:hidden versehen
    b) Du hast keine <a> um die Bilder.
     
  17. koslowski

    koslowski Well-Known Member

    Registriert seit:
    9. Juni 2009
    Beiträge:
    645
    Zustimmungen:
    0
    Hi,

    normal braucht li ne Höhe und ne Breite und zwar die der halben Grafik( wenn sie zwei Zustände enthält).
    a braucht dann wohl display:block und height/width:100% (damit es auf die Ausmasse von li ausgedehnt wird).
     
  18. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    was wenn die Grafiken alle unterschiedlich "breit" sind?
     
  19. koslowski

    koslowski Well-Known Member

    Registriert seit:
    9. Juni 2009
    Beiträge:
    645
    Zustimmungen:
    0
    Moin,

    das ist doch wohl überhaupt kein Problem.

    Hast du mein Beispiel mal durchgearbeitet, um zu verstehen wie das technisch funktioniert? Ich glaube mal eher nicht.

    Dort hat jeder Listenpunkt eine eigene id, kann also gesondert per CSS angesprochen werden.

    Genau genommen bräuchtest du sogar nur eine Grafik für alle Links und alle Linkzustände.
    Aber das ist etwas schwieriger, deshalb habe ich in meinem Beispiel für jeden Link eine Grafik genommen.

    Die Technik ist unter dem Namen CSS-Sprites bekannt und im März 2004 von David Shea vorgestellt worden. Guckst du hier.
    Deutsche Artikel gibts auch einige dazu. Dafür guckst du hier z.B.

    Okay ich hab das noch mit Image Replacement nach Gilder/Levin gemischt, damit die Links bei ausgesch- Grafiken und/oder CSS noch funktionieren.

    Ich mag solche Techniken auch schon deshalb, weil ich damit meiner HP nen schönen Look verpassen kann und trotzdem nicht auf "Barrierearmut" verzichten muss. ;)

    Gruß
    koslowski
     
  20. cycorps

    cycorps Well-Known Member

    Registriert seit:
    10. Januar 2008
    Beiträge:
    75
    Zustimmungen:
    0
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Das jeder Button einen eignen CSS-Abschnitt hat weiß ich. Du hast aber geschreiben, dass die height: (halbehöhe der Grafik) in Li soll. und da kann ich ja schlecht 100 verschiedene Breiten angeben

    wenn ich LI die höhe 32px gebe, presst IE7 die Grafiken von 64px höhe in die 32px große LI.
     
    #20 cycorps, 28. Juni 2009
    Zuletzt bearbeitet: 28. Juni 2009
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden