[britanicus]

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 ~~~~~

[Jean le Chauve]

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

[britanicus]

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.

[Jean le Chauve]

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.

[britanicus]

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.

[Jean le Chauve]

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

[Jean le Chauve]

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.

[britanicus]

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

[Jean le Chauve]

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.

[britanicus]

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

[Jean le Chauve]

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.

[Jean le Chauve]

Résolu ?