CSS-Formatierung für Menüpunkte
Eingetragen von piddy (21)am 03.11.2008 - 16:23 Uhr in
hallo liebe community,
ich habe nochmal eine kurze frage zur drupal menügestaltung.
in drupal gibt es ja ziemlich viele klassen die dem menü zugewiesen sind (erster eintrag, letzter eintrag, collapsed usw).
leider komme ich trotz firebug, ie dev tools etc. an einer stelle nicht weiter.
ich möchte für mein menü bloss 2 dinge:
- das mainlevel soll mit einem hintergrundbild hinterlegt sein (im css "background-image", nur in welcher klasse???)
- alle childlevels sollen nur normale schrift und etwas eingerückt sein
irgendwie bekomm ich das einfach nicht so hin, dabei dürfte es ja nich allzu aufwendig sein.
ich verbleibe mit der bitte um einen gedankenanstoss ;)
gruß piddy
- Anmelden oder Registrieren um Kommentare zu schreiben
!important verwenden
am 03.11.2008 - 16:53 Uhr
Manchmal liegt es bei Drupal daran, dass zu viele Stylesheets an derselben Eigenschaft rumfummeln. Da hilft dann manchmal die Verwendung von !important, um dem eigenen Design genügend Nachdruck zu verschaffen:
http://www.drupalcenter.de/handbuch/6724
Vielleicht hilft das.
Frank
!important
am 04.11.2008 - 11:46 Uhr
also laut firebug beziehen die einzelnen punkte in der navi ihre styles bloss aus der style.css.
ich will eigentlich nur das die mainlevels (also die allerersten punkte die von keinem anderen die kinder sind) das hintergrungbild haben. leider verändert sich immer alles mit jedem klick, da beim öffnen und schliessen der menüpunkte wieder andere klassen zugewiesen werden...
in etwa solls so aussehen:
--> Bundesland (nur dieser Punkt hat ein bg-image)
-----> NRW (wird um 1 eigerückt)
--------> Landeshauptstadt (wird um 2 eigerückt)
--------> Städte (wird um 2 eigerückt)
--------> etc. (wird um 2 eigerückt)
Level deiner Navigation
am 04.11.2008 - 15:38 Uhr
also laut firebug beziehen die einzelnen punkte in der navi ihre styles bloss aus der style.css.
ich will eigentlich nur das die mainlevels (also die allerersten punkte die von keinem anderen die kinder sind) das hintergrungbild haben. leider verändert sich immer alles mit jedem klick, da beim öffnen und schliessen der menüpunkte wieder andere klassen zugewiesen werden...
Auf wie viele Level kommst du denn mit deiner Navigation? Nachfolgend dein Anhaltspunkt.
/* Level 1 */ul.menu li {
background-image: url(./bild.png);
}
/* Level 2 */
ul.menu li ul li {
background-image: none;
}
/* Level 3 */
ul.menu li ul li ul li {
background-image: none;
}
/* Level 4 */
ul.menu li ul li ul li ul li {
background-image: none;
}
/* usw. */
leaf, collapsed, expanded
am 05.11.2008 - 09:32 Uhr
mh ich glaube die schwierigkeit besteht darin, leaf, collapsed und expanded irgendwie unter einen hut zu bringen.
/* Level 1 */
ul.menu li {
background-image: url(./bild.png);
}
/* Level 2 */
ul.menu li ul li {
background-image: none;
}
/* Level 3 */
ul.menu li ul li ul li {
background-image: none;
}
/* Level 4 */
ul.menu li ul li ul li ul li {
background-image: none;
}
/* usw. */
eine struktur in dieser art wird bei mir nicht aufgebaut. alle punkte egal ob main oder sub haben ul.menu li.
und eben eine die drei klassen aus dem betreff.
hat noch jemand einen vorschlag?
Reicht level 1 & 2 nicht?
am 05.11.2008 - 09:40 Uhr
IMHO müssten doch Level 1 & 2 reichen, da die folgenden Level die eigenschaften von Level 2 erben, oder liege ich da total falsch? Eigentlich müte doch eine CSS-Anweisung wie die folgende schon reichen:
li ul li {background-image: none;}Mit der wird doch schon sichergestelt, dass ein li-Tag welches "Enkel" eines anderen li-Tags ist kein Image hat.
Roger
Nicht Vorschlag sondern Lösung
am 05.11.2008 - 10:35 Uhr
hat noch jemand einen vorschlag?
Du bist ja witzig. Das war kein Vorschlag sondern die Lösung. Die Klassen leaf, collapsed und expanded haben nichts mit deinem Problem zu tun. Als Anhaltspunkt und nicht als Endlösung war mein vorheriger Post gedacht. Überlegen musst du schon ein wenig. Erstens funktioniert meine Lösung und zweitens, wenn dich die Stuktur stört, dann packe einfach die Klasse menu mit dazu und fertig.
/* Level 1 */ul.menu li {
background-image: url(./bild.png);
}
/* Level 2 */
ul.menu li ul.menu li {
background-image: none;
}
IMHO müssten doch Level 1 & 2 reichen, da die folgenden Level die eigenschaften von Level 2 erben ...
Eigentlich hast du recht. Wenn man aber total flexibel sein möchte, bietet sich diese Struktur an. Darüber kannst du jedes Level formatieren. War auch nur als Anregung gedacht und nicht als Endlösung.
auf dem richtigen weg
am 05.11.2008 - 10:29 Uhr
ich glaub jetzt sind wir auf dem richtigen weg. die bgimages im mainlevel sehen gut aus und passen.
in den unterlevels sind jetz auch noch bilder, allerdings sind die leicht verschoben und laut firebug dürften da eig keine sein.
hab den background-image:none; mit !important ausgezeichnet und cache ist auch ausgeschaltet.
ich spüre das es fast geschafft ist :-)
ps: würde gern die seite posten, aber die liegt hier local auf nem dev server :(
hier ist mal ein auszug:
/* CSS ---> NAVIGATION (SIDEBAR) */
ul.menu li ul li {
background-image: none !important;
}
ul.menu li ul li ul li {
background-image: none !important;
}
.left {
width:170px;
margin-right:40px;
line-height:26px;
margin-left: 50px;
font-size:12px;
}
ul.menu {
list-style: none;
border: none;
text-align:left;
}
ul.menu li {
margin: 0 0 0 0.0em;
font-family:Verdana;
font-size:12px;
text-align:left;
background-image:url(images/leftblock/button.png);
}
li.expanded {
list-style-type:none;
padding: 0.0em 0.0em 0 0;
margin: 0;
}
li.collapsed {
list-style-type:none;
padding: 0.0em 0.0em 0 0;
margin: 0;
}
li.leaf {
list-style-type:none;
padding: 0.0em 0.0em 0 0;
margin: 0;
}
li a.active {
color: #000;
}
td.menu-disabled {
background: #ccc;
}
ul.links {
margin: 0;
padding: 0;
font-color:#000;
}
ul.links.inline {
display: inline;
}
ul.links li {
display: inline;
list-style-type: none;
padding: 0 0.0em;
font-color:#000;
}
.block ul {
margin: 0;
padding: 0 0 0.0em 0em;
}
unter deine Anweisungen
am 05.11.2008 - 10:45 Uhr
Packe nachfolgenden Code als letzten Punkt unter deine Navigations-Anweisungen.
ul.menu li {background-image: url(images/leftblock/button.png);
}
ul.menu li ul li {
background-image: none;
}
Und schmeiße deine 'Kreation' am Anfang der Anweisungen wieder raus.
ul.menu li ul li {background-image: none !important;
}
ul.menu li ul li ul li {
background-image: none !important;
}
no-repeat
am 05.11.2008 - 10:54 Uhr
jetzt hat es geklappt,
ein weiteres problem war übrigens, dass ich beim bg-image das no-repeat vergessen hatte, deswegen wurde das bild immer bis zum ende der navigation wiederholt.
vieeeeelen dank für eure hilfe ;)