Forum CMS Made Simple FR
Centrer un menu déroulant - cssmenu_ulshadow.tpl - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : Centrer un menu déroulant - cssmenu_ulshadow.tpl (/thread-184.html)


Centrer un menu déroulant - cssmenu_ulshadow.tpl - britanicus - 21/02/2010

Citation :Bonjour je veux centrer un menu déroulant.
J'utilise présentement ce menu.
{menu template='cssmenu_ulshadow.tpl' start_element='3.1' show_root_siblings='1'}

Vous pouvez voir la page en ligne.


#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS : 1.6.6
#~ Version du MLE si existante : non
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.6.6
#~ Installed Modules:
#~ * CMSMailer: 1.73.14
#~ * FileManager: 1.0.1
#~ * MenuManager: 1.6.2
#~ * ModuleManager: 1.3.1
#~ * News: 2.10.3
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.0.4
#~ * Search: 1.6.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.6.1.1
#~ * CGSimpleSmarty: 1.4.3
#~ * CGExtensions: 1.17.6
#~ * FormBuilder: 0.6.1
#~ * SelfRegistration: 1.2.5
#~ * FrontEndUsers: 1.6.11
#~ * CGBlog: 1.3.1
#~ * IPBlocker: 1.0
#~ * Captcha: 0.4
#~ * CGUserDirectory: 1.1.5
#~ * Jobs: 1.0
#~ * MysqlDump: 1.2.4
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * max_upload_size: 2000000
#~ * default_upload_permission: 664
#~ * assume_mod_rewrite: false
#~ * page_extension:
#~ * internal_pretty_urls: false
#~ * use_hierarchy: true
#~ Php Information:
#~ * phpversion: 5.2.10
#~ * md5_function: On (Vrai)
#~ * gd_version: 2
#~ * tempnam_function: On (Vrai)
#~ * magic_quotes_runtime: Off (Faux)
#~ * memory_limit: 32M
#~ * max_execution_time: 30
#~ * safe_mode: Off (Faux)
#~ * session_save_path: /tmp (1777)
#~ * session.use_cookies: On (Vrai)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.87
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~


Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 22/02/2010

Bizarre, je ne vois pas comment tu as fait pour arrondir pour arrondir à droite du menu.
Sinon, #primary-nav li {width:20%;}
Et tu vires tout ce qu'il y a de trop Wink

Centrer un menu déroulant - cssmenu_ulshadow.tpl - britanicus - 22/02/2010

Ca donne pas le résultat voulu.

Dans le cas avec width:20%, les onglets se partagerons la largeur à 100%.
Ce que je veux c'est que mon onglet soit a 132px, et que si il y a 3 onglets bien qu'ils le soient centrer avec 132px de large pour chacun.

Pour le coin arrondis du menu. C'est que la bande grise est en background de l'entête.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 22/02/2010

Jouer avec des px pour être tip-top, tu vas dans le mur.
Regarde ton site sous IE6, tu vas pleurer.
Ça veut dire quoi : c'est que la bande grise est en background de l'entête ?
C'est ceci : url("http://www.abacus-referencement.com/cms/uploads/images/secondaire/navigation/separateur-menu-gris.gif") no-repeat scroll 964px 2px transparent
Bizarre, drôle de méthode pour placer un | uniquement à droite du dernier élément du menu.
Ça aussi, c'est bizarre : border:0 solid aqua;

De toutes façons, tu as des erreurs dans ton code html au niveau du menu.
Passes au validateur et commences par corriger. Sans cela, tu risques d'avoir des aberrations de mise en page.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - britanicus - 22/02/2010

J'ai corrigé ma page elle passe au validateur.
Pour ce qui est de IE 6, le client ne le supporte pas.

Crois-tu que mon menu peut se centrer. Le nombre d'onglet varie d'une page à l'autre.
J'ai essayé avec cette technique mais sans succès pour des menus déroulant.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 22/02/2010

Ok, j'ai trouvé : header-secondaire.jpg
On verra demain.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 22/02/2010

Je lis ceci :
The <ul> tag is then styled with a relative position and floated left with a left position of 50%.
Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%
Vérifie que ton code correspond exactement à celui de cssplay et ça fonctionnera, mais tu ferais mieux de décomposer ton image.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - britanicus - 22/02/2010

As-tu essayé ce code?
Car moi quand je l'ai essayé je perdais mes sous-menus.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 22/02/2010

C'est celui-ci que tu dois essayer :
Code :
.container {clear:both; float:left; width:100%; overflow:hidden;}
#menu2 {
  padding:0;
  margin:0 auto;
  list-style-type:none;
  float:left;
  position:relative;
  left:50%;
  }
#menu2 li {
  float:left; position:relative; right:50%;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff;
  background:#08c;
  border:1px solid #fff;
  text-decoration:none;
  }
#menu2 a:hover {
  color:#000;
  background:#d4d4d4;
  }
  }
et l'xhtml
Code :
<div class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</div>
Je n'ai pas le temps de tester si les sous-menus fonctionnent mais après un petit coup d'oeil, ça devrait aller.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - britanicus - 22/02/2010

Tu peux aller jeter un oeil, je perds les sous-menus.
http://www.joly-design.com/test/erreur/mc/index-menu.html

Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 23/02/2010

Il n'y a pas disparition des sous-menus. C'est ta css qui les cache.
Pour voir ton sous-menu, je dois supprimer overflow:hidden de #header et de #menuwrapper.
Et je dois mettre #main en display:none.
Ce n'est pas le code css du menu qui est en cause mais le reste.

Centrer un menu déroulant - cssmenu_ulshadow.tpl - Jean le Chauve - 21/07/2010

Résolu ?