Catégories:
Bonsoir à tous,
Je voudrais remplacer mes liens primaires par des images exemple:’home’ par une image de 30x24 représentant la home. Mon problème c’est que je ne vois pas comment designer un template pour me permettre de mettre les images. Auriez-vous des suggestions ?? Merci d’avance.
- Vous devez vous identifier ou créer un compte pour écrire des commentaires
Il existe peut être des modules pour le faire.
Sinon créé un bloc en créant ton menu à l’intérieur
selinav
1242
Merci pour ton aide selinav ; Dans mon page.tpl.php j’avais defini ma zone de cette façon :
<?php if ($primary_menu or $secondary_menu): ?><div id="nav" class="clear-block">
<?php if ($primary_menu): print $primary_menu; endif; ?>
<?php if ($secondary_menu): print $secondary_menu; endif; ?>
</div> <!-- /nav -->
<?php endif; ?>
Seulement, quand je veux definir un template, il n’est pas pris. Du coup quand je mets le bloc menu dans une zone, mon template est pris en compte… Bref je passerais par cette méthode.
Souhiji
souhiji
58
regarde du coté des modules http://drupal.org/project/modules ?text=image%20menu
Tiens moi au courant s’il y en a un pour faire des menus à partir d’image.
selinav
1242
En effet la liste est exhaustive, mais ne disposant que de peu de temps, pour palier à mon soucis j’ai tout fais à la main, et ça marche très bien. Ne reste plus que la mise en place de ma div dans mon .tpl. Cela dis ta contribution me touche beaucoup et je t’en remercie grandement.
Souhiji
souhiji
58
Tu peux faire ça en css.
Tu mets les ‘li’ de la liste en display:block ; un text-indent négatif suffisamment grand pour «virer» le texte et t’ajoutes ton image avec background-image.
Mes tutos Drupal : http://www.davidpetit.com/tuto/drupal
DavP
105
Salut DavP et merci pour ton idée, seulement, mon menu est en ‘inline’ et le mettre en display:block, ne correspond pas à mes besoins. L’utilisation de text-indent aurais pu m’aider à decaler le text mais il n’en est rien et mes images s’affiges donc en background donc. Je pense qu’en trouvant déjà pourquoi mes liens primaires s’affichent malgré que je n’ai pas placé de bloc (bien qu’il soit definit dans mon page.tpl.php de la manière suivante :
<?php if ($primary_menu or $secondary_menu): ?><div id="nav" class="clear-block">
<?php if ($primary_menu): print $primary_menu; endif; ?>
<?php if ($secondary_menu): print $secondary_menu; endif; ?>
</div> <!-- /nav -->
<?php endif; ?>
Le problème c’est qu’aucun template que je defini n’est pris en compte et j’ignore pour quelle raison. Dans mon template j’ai fais une définition simpliste de la forme :
<?phpfunction theme_menu_item_link($link) {
if (empty($link['localized_options'])) {
$link['localized_options'] = array();
}
if($link['has_children']){
return t($link['title']);
}
return l($link['title'], $link['href'], $link['localized_options']);
}
?>
Souhiji
souhiji
58
Tu mets les li en float:left ; avec display:block ; t’auras le même résultat visuel que du inline …
Comment penses-tu qu’on arrive à faire des menus graphiques horizontaux en css ou avec des sprites ?
Exactement avec cette méthode. ;-)
Pour le text-indent tu mets -3000px si tu vois toujours ton texte c’est que t’as un gros soucis et que les css sont pas interprétés …
Mes tutos Drupal : http://www.davidpetit.com/tuto/drupal
DavP
105
Le texte à bien disparu DavP, mais mes images également du même coup ; Voilà ce que j’ai fais dans mon css :
#nav .primary-links li { float: left; display: block; text-indent:-3000px; list-style: none; margin: 0; padding: 0;}#nav .primary-links .menu-1266 a{background-image:url(../images/connaitre/connaitre.png);}
Souhiji
souhiji
58
C’est normal, tu appliques le text-indent au ‘li’ donc le ‘a’ en hérite et du coup tu décales tout …
Applique le text-indent au ‘a’ uniquement et le background tu le mets dans le ‘li’.
Ajoute un display:block au ‘a’ aussi pour être sûr que le bouton de ton menu soit comme un block.
NB : Pourquoi tu ne mets pas
#nav .primary-links li aà la place de#nav .primary-links .menu-1266 a?Mes tutos Drupal : http://www.davidpetit.com/tuto/drupal
DavP
105
En fait si je spécifie c’est tout simplement parce que la même image ne doit pas s’afficher. En fait j’ai 6liens (li) dans mon menu et tous sont identifiés par une classe particulière(menu-1266, menu-1267,…). Donc pour que les images différentes s’affichent bien derrière le bon lien je pense qu’il me faut bien spécifier. Tu ne crois pas. En tout cas merci encore, ça marge bien. J’ai du redimensionner les tailles de mes ‘a’ vue qu’ils sont en display:block.
Merci encore DavP
Souhiji
souhiji
58
Ah oui excuse-moi !
Tu es obligé d’utiliser une image différente pour chaque li, j’avais oublié.
Dans ce cas, normal alors !
PS : Tu peux pour optimiser ton menu au niveau des images, utiliser la méthode des sprites ; en gros, dans une seule image ; tu as tous tes boutons côte à côte ainsi que les différents état (survol, actif, normal).
Et tu mets le bon background-position pour chaque lien et c’est bon. ;-)
Mes tutos Drupal : http://www.davidpetit.com/tuto/drupal
DavP
105
Oui tu as vue juste ;) c’est d’ailleurs ce que j’ai fais :) Mille merci DavP. A présent il me faut régler mon dernier soucis et je pense que je serais pas mal.
Souhiji
souhiji
58