28172 sujets

CSS et mise en forme, CSS3

Menu déroulant qui dépasse à droite

bonsoir,

j'utilise un excellent module sur mon site prestashop qui permet d'avoir un beau menu déroulant, sauf que j'ai beaucoup de sous catégorie et sur un écran 16/9 pas de souci mais sur un écran 4/3 les dernières sous catégories sortent de l'écran.

je souhaiterais juste que en cas d'écran plus petit les catégories qui dépassent s'affichent à gauche et pas à droite. j'ai cherché avec 50 mots clés différents mais je ne trouve pas la solution.

est ce qqun pourrait m'indiquer comment faire? merci d'avance.

vous pouvez voir mon site là: http://www.equidepot.fr/
merci, pourrais tu m'en dire un peu plus, j'apprends chaque jour un peu plus mais en autodidacte, je n'ai aucune formation en informatique donc je galère un peu.
si qqun pouvais un peu plus m'orienter que je puisse au moins faire une recherche un peu plus ciblée.
merci
un petit up; personne pour m'aiguiller?
je cherche plus du coté de jquery maintenant mais là par contre je n'y connais rien donc je patauge.
Salut,

je parlais des media queries qui sont des techniques pour adapter son site pour le web mobile, regarde cet article: Les Media Queries CSS3

Après comme ton CMS est prestashop, il faut modifier le fichier global.css dans " theme/shop/css" normalement.
Modifié par jmlapam (26 Jan 2012 - 18:02)
merci beaucoup, j'ai effectivement vu passer un truc comme ca dans mes recherches.
donc si je récapitule bien il faudrait que j'ajoute ca dans mon css:
@media screen and (max-width:999px) { /*L'écran est inférieur à 999px de large. Ainsi de suite...*/ }


par contre je mets quoi entre mes accolades?

et surtout il y a un truc qui m'interpelle, habituellement je modifie le fichier .tpl pour modifier mes classes et n'appliquer le modif que à celle que je veux, mais là je ne comprend pas très bien comment isoler la dernière catégorie (avec ses sous menus)
) savoir dans mon cas "Librairie et cadeaux"

car si par exemple je demande dans mon css à tout mettre à gauche, ca va aussi mettre à gauche la 1ère catégorie qui ne sera pas visible.

du coup j'ai tout de même essayé d'ajouter ce code:
@media screen and (max-width:1100px) { 
ul.sf-menu li li:hover ul.last,
ul.sf-menu li li.sfHover ul.last{
 left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}}


inspiré de ca: http://matthewjamestaylor.com/blog/centered-dropdown-menus

que j'ai placé sous celui ci: 
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
 left: 20em;	
width: 20em;
	top:			0;

}


mais ca ne change rien à mon affichage, donc j'ai du me**er qq part.
qqun aurait il la gentillesse de me corriger, merci
Sujet clos
Aller à