[CSS] Wie krieg ich so eine Navigation hin?

  1. TheMagnificent

    TheMagnificent Thread Starter MacUser Mitglied

    Mitglied seit:
    16.11.2004
    Beiträge:
    411
    Zustimmungen:
    0
    Ich möchte mir eine private Homepage mit Wordpress basteln. Bin darin nicht allzu bewandert, möchte aber eine Navi bauen wie sie in der angehängten Grafik ist. Es handelt sich hierbei um CSS. Wurden da irgendwie Grafiken verwendet oder kann man das komplett mit CSS realisieren?

    Hier ist z.B. ein Beispiel für eine ähnliche Navigation:

    http://www.liewcf.com/blog/archives/2005/05/wordpress-navigation-bar/

    Könnte ich es damit hinbekommen? Für Tipps wäre ich dankbar... ;)
     

    Anhänge:

    • Dateigröße:
      14,7 KB
      Aufrufe:
      89
  2. joachim14

    joachim14 MacUser Mitglied

    Mitglied seit:
    08.02.2005
    Beiträge:
    7.295
    Zustimmungen:
    433
    Geht im Prinzip mit css, wenn Du nicht auf ganz spezielle Schriften in den Tasten Wert legst.
    Ob Wordpress eine Hilfe ist, weiß ich nicht. Im Zweifel hilft bei Beispielen immer ein Blick in den Quelltext.
     
  3. TheMagnificent

    TheMagnificent Thread Starter MacUser Mitglied

    Mitglied seit:
    16.11.2004
    Beiträge:
    411
    Zustimmungen:
    0
    Irgendwie ist da so ein Schatteneffekt. Kann ich das damit auch hinbekommen? Und die Rundungen in den einzelnen Tabs?
     
  4. dms

    dms

    Die Grafik funktioniert leider nicht.
    Hinter dem Link die Navigation ist ohne Grafiken gestaltet. Ist im Prinzip aber egal, da beides auf die gleiche Weise umgesetzt wird.

    Im Grunde sind nur folgende CSS-Eigenschaften wichtig (für die A-Tags des Menü's)

    display:block;
    width:beliebigee Grösse;
    line-height:beliebige Grösse; <=zum Festlegen der Höhe der Fläche
    background-color:beliebige Farbe;
    color:beliebige Farbe;


    Für die Hover-Effekte definierst Du eine Pseudo-Klasse a.menue:hover mit den gewünschten Farben.
     
  5. TheMagnificent

    TheMagnificent Thread Starter MacUser Mitglied

    Mitglied seit:
    16.11.2004
    Beiträge:
    411
    Zustimmungen:
    0
    Also: Es sieht jetzt bei mir so aus wie auf der angehängten Grafik.

    Mein Problem: Der grüne Balken soll natürlich hinter den Tabs sein. Wie mache ich das?

    Und: Wie kann ich die Schatten da in den grünen Balken und die Tabs reinbekommen?

    Hier ist ein Auszug aus der entsprechenden Datei:

     

    Anhänge:

    • Dateigröße:
      9,8 KB
      Aufrufe:
      56
  6. dms

    dms

    Sag mal, was sind das für beschissene Grafiken, die nur im Safari funktionieren?

    Die runden Ecken sind Grafiken, ja. Den grünen Streifen würde ich einfach mit einem umschliessenden Element umsetzen oder wenn Du sowieso Listen verwendest die Eigenschaften auf das ul-Tag legen.

    Schatten = ebenfalls Grafiken.
     
  7. joachim14

    joachim14 MacUser Mitglied

    Mitglied seit:
    08.02.2005
    Beiträge:
    7.295
    Zustimmungen:
    433
    Vorne und hinten:
    In dem Beispielcode kommt nur einmal der z-index vor. Vermutlich musst Du die Elemente, die Du vorne oder hinten haben willst, jeweils mit einem passenden z-index versehen.
     
  8. TheMagnificent

    TheMagnificent Thread Starter MacUser Mitglied

    Mitglied seit:
    16.11.2004
    Beiträge:
    411
    Zustimmungen:
    0
    Wie muss ich das genau machen? Es geht bei mir irgendwie nur wenn ich die komplette URL eingebe. Es müsste aber doch aus so gehen:

    background-image: ul(images/grafik.jpg); Wie kriege ich das hin?

    Und wie kann ich anstatt der Tabs für die Navigation Grafiken verwenden?
     
  9. dms

    dms

    background-image: url(images/grafik.jpg);

    So funktionierts definitiv mit relativen Pfaden. Wenn nicht hast Du irgendwo einen Schreibfehler drin.
    Auf die gleiche Weise: Hintergrundgrafiken.
     
  10. moses_78

    moses_78 MacUser Mitglied

    Mitglied seit:
    08.04.2005
    Beiträge:
    1.264
    Zustimmungen:
    22
    einen -in meinen augen- ziemlich guten artikel über als menuleisten formatierte listen
    gibts hier. musst
    halt nur hintergrundgraphiken statt farben verwenden, wie dms schon erklärt hat.

    ansonsten saugste dir halt rapid weaver, und siehst dir mal an, wie das bei der
    navigationsleiste vom theme "tiger pop" gelöst ist, die könnte man auch wunderbar klauen ;)
     
Die Seite wird geladen...