problem de CSS pour un menu

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
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!
Répondre
#1
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!
Répondre
#2
Si tu enlèves width:100% de #menu #primary-nav ul.unli li, ça semble fonctionner.
Répondre
#2
Si tu enlèves width:100% de #menu #primary-nav ul.unli li, ça semble fonctionner.
Répondre
#3
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.
Répondre
#3
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.
Répondre
#4
Vu, alors essaye ceci : #menu #primary-nav ul.unli li a, #menu #primary-nav ul.unli ul.unli li a {width:100%;
Répondre
#4
Vu, alors essaye ceci : #menu #primary-nav ul.unli li a, #menu #primary-nav ul.unli ul.unli li a {width:100%;
Répondre
#5
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
Répondre
#5
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
Répondre
#6
Ç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...er-6.html)
Répondre
#6
Ç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...er-6.html)
Répondre
#7
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)
Répondre
#7
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)
Répondre
#8
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
Répondre
#8
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
Répondre
#9
On s'est croisés, relis mon dernier post.
Répondre
#9
On s'est croisés, relis mon dernier post.
Répondre
#10
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.
Répondre
#10
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.
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)