Forum CMS Made Simple FR
problem de CSS pour un menu - Version imprimable

+- Forum CMS Made Simple FR (https://www.cmsmadesimple.fr/forum)
+-- Forum : Général (https://www.cmsmadesimple.fr/forum/forum-3.html)
+--- Forum : Graphisme (https://www.cmsmadesimple.fr/forum/forum-9.html)
+--- Sujet : problem de CSS pour un menu (/thread-1933.html)



problem de CSS pour un menu - snatch1974 - 27/04/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site : http://dmc.yannlamy.com
#~ Hébergeur / Soft : hébergeur pas cher
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.3
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ CMSPrinting: 1.0
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ MicroTiny: 1.1.1
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ Gallery: 1.5.3
#~ TinyMCE: 2.9.6
#~ JQueryTools: 1.0.10
#~ CGExtensions: 1.28.1
#~ CGContentUtils: 1.3
#~ AdvancedContent: 0.9.3
#~ CTLModuleMaker: 2.0.3
#~ spots_details: 1.0
#~ FormBuilder: 0.7.2
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 6000000
#~ default_upload_permission: 664
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.8
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 64M
#~ max_execution_time: 90
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 10M
#~ upload_max_filesize: 6M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.62
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour à tous,

j'ai fait un menu horizontal avec les sous-menus qui s'ouvrent façon lightbox, juste en dessous.
Le soucis est dans le troisième niveau du menu:
la balise <ul> contenant le menu prend automatiquement une taille à la con, mettant certaines options sur 2 lignes au lieu d'une seule.
si je retire la declaration css (left:100%Wink de #menu #primary-nav ul.unli ul, la taille de cette balise <ul> reprend une largeur plus naturelle mais reste au maximum aussi large de la balise contenante.
Bien qu'elle soit en position absolute, je voudrais qu'elle puisse prendre dynamiquement la largeur nécessaire des opitions qui la compose afin d'avoir 1 seule ligne par option... est-ce bien clair?!
Bref, si quelqu'un a compris et peux m'aider à résoudre ce soucis, je suis partant! ;-)

PS: je sais que le code n'est pas valide w3c... on ne met pas une div à l'intérieur d'une ul mais c'est la seule solution trouvée jusqu'à présent pour gérer mon contour transparent!


problem de CSS pour un menu - Jean le Chauve - 27/04/2012

Si tu enlèves width:100% de #menu #primary-nav ul.unli li, ça semble fonctionner.


problem de CSS pour un menu - snatch1974 - 27/04/2012

non Jean, ça deconne puisque dans le premier niveau du menu club "posrt saint louis du rhone" est rendu sur 2 lignes maintenant au lieu d'une seule!
les <ul> prennent la taille du <li> du premier niveau et pas plus grand.


problem de CSS pour un menu - Jean le Chauve - 27/04/2012

Vu, alors essaye ceci : #menu #primary-nav ul.unli li a, #menu #primary-nav ul.unli ul.unli li a {width:100%;


problem de CSS pour un menu - snatch1974 - 27/04/2012

Non toujours pas!!!

ca sembalit fonctionner car les titres des menus sont assez courts mais si je les rallonge pour bien vérifier le truc... Ca marche plus!
je laisse le titre long, le temps des tests... Wink

en tout cas merci de te pencher sur le soucis! :p


problem de CSS pour un menu - Jean le Chauve - 27/04/2012

Ça vient de là, en tous cas, car si je mets :
#menu #primary-nav ul.unli li a, #menu #primary-nav ul.unli ul.unli li a {width:200px;
ça marche.
(sauf avec IE6 qui ne reconnait pas min-width, pour corriger son comportement, regarde le titre 3 ici : http://www.alsacreations.com/astuce/lire/72-min-width-max-width-min-height-et-max-height-sur-internet-explorer-6.html)


problem de CSS pour un menu - Jean le Chauve - 27/04/2012

En fait, lorsque tu utilises width:100%, ça correspondt à la valeur max du width du bloc parent, ici #menu ul#primary-nav li{width:145px
Donc, écris plutôt #menu ul#primary-nav li{min-width:145px}
Et tu n'auras aucune autre modification à faire (à part IE6)


problem de CSS pour un menu - snatch1974 - 27/04/2012

j'avais vu lors de mes recherches et tests qu'en entrant une valeur précise ça fonctionnait, mais je pensait qu'une mauvaise déclaration dans un des conteneurs pouvait être à l'origine du bug.
Du coup, le problème est toujours là car en mettant une valeur définie je perds la partie dynamique de la taille du contenu.
Ce que je comprends pas, c'est que ça fonctionne nickel au second niveau mais plus au 3e


problem de CSS pour un menu - Jean le Chauve - 27/04/2012

On s'est croisés, relis mon dernier post.


problem de CSS pour un menu - snatch1974 - 27/04/2012

Même avec me min-width ça ne fonctionne pas correctement.
J'ai encore essayé plein de trucs avec ce min-width et la solution la plus acceptable est de le mettre dans #menu #primary-nav ul.unli ul.unli mais du coup, il 3e niveau fait au minimum la taille du second.
lorsque le 3e niveau est plus long que le 2e y'a une cassure de ligne a chaque fois.

je comprends pas pourquoi le 3e niveau ne sort pas du flux avec sa position absolute et reste soumis aux contraintes du second niveau.