Zitat von
mr.jones
Gibt es eine Darstellung, in der ich evtl. grafisch sehe, womit ich im CSS was in der Navigation beeinflussen kann?
Ich dachte eigentlich, es könne nicht so kompliziert sein...
Hallo Mr.Jones,
ja, du kannst dir die Navigation mit firebug(mein Tipp) ansehen, dort kannst du dann Eigenschaften deaktivieren oder auch ändern und siehst die Auswirkung in Echtzeit. Im Safari kannst du Eigenschaften soviel ich weiß nur deaktivieren. Opera weiß ich jetzt nicht. IE mit developer toolbar kann auch einiges machen.
Ein wenig kompliziert kanns schon werden, je nachdem wie du stylen möchtest. Das mit den runden Ecken wüsste ich jetzt auf Anhieb nicht.
Ich hab dir mal einen Auszug aus meiner Basis-Navigations-CSS unten eingefügt und ein wenig kommentiert. Öffne die Seite mit deinem Menü im FF, binde den Code ein (am besten als letztes), öffne firebug und deaktiviere alle Eigenschaften aus meinem Code. Jetzt aktiviere sie von oben nach unten und schau dir an was passiert.
CSS solltest du als grafischer Gestalter beherschen, sonst kannst du eben *nur* gestalten und musst von jemand anderem umsetzen lassen. Ich selbst bin immer neidisch auf die Gestalter, naja, dafür kann ich umsetzen.
So, jetzt der Code. Fast vergessen, gib deinem Menü die ID subnav mit auf den Weg, sonst funzt der Code nicht.
PHP-Code:
/** * Schriftart alle Menüs */
.mod_navigation li,
.mod_navigation a,
.mod_navigation span {
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
/** * Vertical subnav */
.subnav {
margin: 0;
}
/** * First level */
/** * das ganze Menü */
.subnav ul {
margin: 0 0 0 10px; /*Abstand nach links*/
padding: 0;
border-bottom: 4px solid #888;
}
/** * wegen IE7 Hintergrund nur der 1. Ebene verpassen,
* andere Ebenen verdecken sonst den Rahmen der ersten Ebene */
.subnav ul.level_1 {
background: #fff;
}
/** * Grundeinstellungen */
.subnav li {
color: #000;
list-style-type: none;
border-top: 1px solid #888;
}
/** * alle Zustände */
.subnav li, .subnav a {
font-weight: bold;
font-size: 13px;
margin: 0;
padding: 0;
}
/** * padding nicht auf li, sonder auf die Kindelemente, deswegen auch block */
.subnav a, .subnav span, .subnav.submenu a, subnav.submenu span {
display: block;
padding: 4px;
}
/** * der normale Link, nicht active und kein .trail */
.subnav a {
background: #000;
color: #888;
text-decoration: none;
}
/** * Link hover */
.subnav a:hover {
background: #fff;
color: #000;
text-decoration: none;
}
/** * Hacks */
* html .subnav ul, * html .subnav li {
height: 1px;
}
*:first-child+html .subnav .parent {
height: 3px;
}
/** * Second level */
/** * Die weitere Einrückung wird über .subnav ul {margin...} vererbt, siehe oben */
.subnav .level_2 {
padding-bottom: 4px;
border-bottom: 0;
}
.subnav .level_2 li {
border-top: 0;
border-bottom: 1px solid #888;
}
/** * kleine Schrift sieht fett nicht gut aus */
.subnav .level_2 a, .subnav .level_2 li span {
font-weight: normal;
font-size: 11px;
}
/** * Trail */
/** * Zustand in rootline (.trail) */
.subnav a.trail {
color: #fff;
background: #888;
}
.subnav a.trail:hover {
color: #000;
background: #fff;
}
Ich denke dieser Code ist eine ganz gute Ausgangsbasis, da nicht viel konfiguriert ist - ein wenig Einrückung, Hintergrundfarbe, Schriftfarbe und ganz wenig Rahmengedöns. Du müsstest dein Design dort also gut aufsetzen können.
Viel Spaß, Andreas
Edit: list-style-type: none; gehört eigentlich direkt auf das ul-Element, obwohl es im li auch funktioniert.
Vertikale Navigation
Zitieren
Lesezeichen