[CSS] Wie krieg ich so eine Navigation hin?

[TheMagnificent]

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...

 

[joachim14]

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.

 

[TheMagnificent]

Irgendwie ist da so ein Schatteneffekt. Kann ich das damit auch hinbekommen? Und die Rundungen in den einzelnen Tabs?

 

[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.

 

[TheMagnificent]

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:

<style type="text/css" media="screen">
#supernav {
font: bold 10px/10px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
position: absolute;
top: 81px;
left: 48%;
width: 720px;
margin: 0 0 0 -360px;
padding: 5px 16px; /* duplicate the tab size */
text-align: left;
display: block;
}

#supernav li {
margin: 0;
padding: 0;
text-transform: lowercase;
display: inline;
}

#supernav a {
color: #666666;
background: #E4EDDF;
font-weight: bold;
height: 19px;
padding: 5px 16px;
/* round corner tab - not for IE */
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}

#supernav a:hover {
color: #36393D;
background: #E4EDDF;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}

#supernav .current_page_item a {
color: #666666;
background: white;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-topright: 6px;
-moz-border-radius-topleft: 6px;
}

#hack {
background: #C6DDB1;
height: 22px;
width: 100%;
position: absolute;
top: 110px;
left: 0px;
margin: 0 0 0 0px;
padding: 0;
z-index: 2;
}
</style>

 

[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.

 

[joachim14]

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.

 

[TheMagnificent]

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.

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?

 

[dms]

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?

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

So funktionierts definitiv mit relativen Pfaden. Wenn nicht hast Du irgendwo einen Schreibfehler drin.

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

Auf die gleiche Weise: Hintergrundgrafiken.

 

[moses_78]

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