Centrer un menu déroulant - cssmenu_ulshadow.tpl

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
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 ~~~~~
Répondre
#1
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 ~~~~~
Répondre
#2
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
Répondre
#2
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
Répondre
#3
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.
Répondre
#3
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.
Répondre
#4
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.
Répondre
#4
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.
Répondre
#5
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.
Répondre
#5
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.
Répondre
#6
Ok, j'ai trouvé : header-secondaire.jpg
On verra demain.
Répondre
#6
Ok, j'ai trouvé : header-secondaire.jpg
On verra demain.
Répondre
#7
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.
Répondre
#7
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.
Répondre
#8
As-tu essayé ce code?
Car moi quand je l'ai essayé je perdais mes sous-menus.
Répondre
#8
As-tu essayé ce code?
Car moi quand je l'ai essayé je perdais mes sous-menus.
Répondre
#9
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.
Répondre
#9
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.
Répondre
#10
Tu peux aller jeter un oeil, je perds les sous-menus.
http://www.joly-design.com/test/erreur/m...-menu.html
Répondre
#10
Tu peux aller jeter un oeil, je perds les sous-menus.
http://www.joly-design.com/test/erreur/m...-menu.html
Répondre
#11
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.
Répondre
#11
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.
Répondre
#12
Résolu ?
Répondre
#12
Résolu ?
Répondre


Atteindre :


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