[CSS] Wie krieg ich so eine Navigation hin?

Diskutiere mit über: [CSS] Wie krieg ich so eine Navigation hin? im Web Page Design Forum

  1. TheMagnificent

    TheMagnificent Thread Starter MacUser Mitglied

    Beiträge:
    411
    Zustimmungen:
    0
    Registriert seit:
    16.11.2004
    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:

    • nav.jpg
      Dateigröße:
      14,7 KB
      Aufrufe:
      85
  2. joachim14

    joachim14 MacUser Mitglied

    Beiträge:
    7.295
    Zustimmungen:
    433
    Registriert seit:
    08.02.2005
    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

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

    dms Gast

    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

    Beiträge:
    411
    Zustimmungen:
    0
    Registriert seit:
    16.11.2004
    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:

    • nav2.jpg
      Dateigröße:
      9,8 KB
      Aufrufe:
      51
  6. dms

    dms Gast

    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

    Beiträge:
    7.295
    Zustimmungen:
    433
    Registriert seit:
    08.02.2005
    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

    Beiträge:
    411
    Zustimmungen:
    0
    Registriert seit:
    16.11.2004
    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 Gast

    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.
     
    Zuletzt von einem Moderator bearbeitet: 24.11.2005
  10. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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...
Ähnliche Themen - [CSS] krieg eine Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
CSS: Styling von Abonnieren-Feld Web Page Design 20.08.2014

Diese Seite empfehlen

Benutzerdefinierte Suche