[gelöst] primary links mit CSS Sprites
Eingetragen von bu (4)am 12.03.2010 - 17:32 Uhr in
Hallo Drupal-Gemeinde,
ich möchte gerne meine primary links durch CSS Sprites ersetzen. Im Html-entwurf sieht die Sache wie folgt aus:
ul#sprite_menu {
list-style: none;
}
ul#sprite_menu li a {
background-image: url(images/mainmenu_sprite.png);
display: block;
float: left;
height: 35px;
text-indent: -9999px;
}
ul#sprite_menu li a.Aktuelles {
background-position: 0 0;
width: 88px;
}
ul#sprite_menu li a.Aktuelles:hover, ul#sprite_menu li a.Aktuelles:focus {
background-position: 0 -35px;
width: 88px;
}Daraus wird dann im Html dies:
<ul id="sprite_menu">
<li><a href="#Aktuelles" class="Aktuelles">Aktuelles</a></li>
</ul>Allerdings stehe ich jetzt bezüglich der Umsetzung in Drupal (-> page.tpl.php) ziemlich auf dem Schlauch.
Drupal schmeißt mir jetzt das entgegen:
<div id="primary" class="clear block">
<ul class="links primary-links">
<li class="menu-293 first"
<a href="/xxx/?q=aktuelles">Aktuelles</a>
</li>
<ul>Habe jetzt einen ziemlichen Knoten im Hirn. Wie müsste ich die page.tpl.php anpassen oder muss das gar woanders geschehen? Mein CSS-Code steht in der style.css - müsste ich da etwas ändern?
Hilfe wäre spitze :) Ich komme grad mit google und Co nicht weiter, falls es da noch Tipps zum Selbststudium gibt, immer her damit.
(was Bob von den Senfmedien veranstaltet, erscheint mir schlüssig, nur wie auf die primary links anwenden?)
- Anmelden oder Registrieren um Kommentare zu schreiben
Also wenn ich mir das so
am 12.03.2010 - 18:49 Uhr
Also wenn ich mir das so ansehe, würde ich einfach den String "ul#sprite_menu" im CSS durch "#primary ul.primary-links" ersetzen.
Beste Grüße
Werner
Lösung
am 13.03.2010 - 12:19 Uhr
... sieht bis jetzt so aus:
page.tpl.php
<?php if (!empty($primary_links)): ?><div id="main_menu_wrapper" >
<?php print theme('links', $primary_links, array('class' => 'links primary-links')); ?>
</div> <!-- main_menu_wrapper -->
<?php endif; ?>
CSS
#main_menu_wrapper {
/*Hier darf jeder selbst probieren*/
}
ul.primary-links li a {
background-image: url(images/mainmenu_sprite.png);
list-style: none;
display: block;
float: left;
height: 35px;
list-style: none;
text-indent: -9999px;
}
ul.primary-links li.menu-293 a { /*1. Link -> Normalzustand*/
background-position: 0 0;
width: 88px;
}
ul.primary-links li.menu-291 a { /*2. Link -> Normalzustand*/
background-position: -88px 0;
width: 89px;
}
ul.primary-links li.menu-293 a:hover, ul.primary-links li.menu-293 a:focus, ul.primary-links li.menu-293 a.active { /*1.Link*/
background-position: 0 -35px;
width: 88px;
}
ul.links li.menu-291 a:hover, ul.primary-links li.menu-291 a:focus, ul.primary-links li.menu-291 a.active { /*2. Link*/
background-position: -88px -35px;
width: 89px;
}
Fazit:
Kleiner Hinweis: für den active-Status klappts nur mit der Klasse (a.active), nicht mit der Pseudoklasse (a:active).
Falls ich hier irgendwo einen Fehler drin haben sollte, der mir bis jetzt noch nicht auf die Füße gefallen ist, wären Hinweise wünschenswert. Ansonsten hoffe ich, dass diese CSS-Sprite Lösung für das eine oder andere Projekt hilfreich sein kann.