Forum CMS Made Simple FR
Comment intégrer un menu en CSS+images - 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 : Comment intégrer un menu en CSS+images (/thread-1199.html)


Comment intégrer un menu en CSS+images - Eugenix - 03/05/2011

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.9.4.1
#~ Url du site : www.bioadvise.com
#~ Hébergeur / Soft : OVH
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.9.4.1
#~ Installed Modules:
#~ CMSMailer: 2.0.1
#~ FileManager: 1.1.0
#~ MenuManager: 1.7.6
#~ ModuleManager: 1.4.2
#~ News: 2.11.2
#~ nuSOAP: 1.0.2
#~ Printing: 1.1.2
#~ Search: 1.6.10
#~ ThemeManager: 1.1.4
#~ TinyMCE: 2.8.4
#~ CGExtensions: 1.23.2
#~ ContentCache: 1.1
#~ GBFilePicker: 1.3
#~ MleCMS: 1.5
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 64000000
#~ default_upload_permission: 664
#~ url_rewriting: mod_rewrite
#~ page_extension: .html
#~ 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.2.17
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: cgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.1.49
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Hello à tous!
J'ai une petite question...
J'essaye d'intégrer un menu en css sur le site mais je ne sais pas trop comment faire.
Si je mets l'intégrité des codes html dans mon template de menu, il n'affiche que ce qui est dans ce code...
Alors, voici ma question:
qu'est ce qu'il faut faire pour créer un template de menu qui marche (avec les images et les paramétrés CSS qu'il faut)???

Comme l'exemple, voici le code HTML de mon menu et le code CSS approprié:

HTML:
Code :
<div class="art-vmenublock">
                              <div class="art-vmenublock-body">
                                          <div class="art-vmenublockheader">
                                              <div class="l"></div>
                                              <div class="r"></div>
                                              <h3 class="t">Navigation</h3>
                                          </div>
                                          <div class="art-vmenublockcontent">
                                              <div class="art-vmenublockcontent-body">
                                                          <ul class="art-vmenu">
                                                              <li>
                                                                  <a href="page.html?i1"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
                                                              </li>
                                                              <li>
                                                                  <a href="page.html?i2"><span class="l"></span><span class="r"></span><span class="t">News</span></a>
                                                                          <ul>
                                                                      <li><a href="page.html?">Top 10</a></li>
                                                                  </ul>
                                                              </li>
                                                              <li class="active">
                                                                  <a class="active" href="page.html?i3"><span class="l"></span><span class="r"></span><span class="t">Menu Item</span></a>
                                                                  <ul class="active">
                                                                      <li><a href="page.html?i3s1">Subitem 1</a></li>
                                                                      <li><a href="page.html" class="active">Subitem 2</a></li>
                                                                      <li><a href="page.html?i3s3">Subitem 3</a></li>
                                                                  </ul>
                                                              </li>
                                                              <li>
                                                                  <a href="page.html?i4"><span class="l"></span><span class="r"></span><span class="t">Video</span></a>
                                                              </li>
                                                              <li>
                                                                  <a href="page.html?i5"><span class="l"></span><span class="r"></span><span class="t">Archive</span></a>
                                                                  <ul>
                                                                      <li><a href="page.html?i5s1">2008</a>
                                                                          <ul>
                                                                              <li><a href="page.html?i5s1s1">January</a></li>
                                                                              <li><a href="page.html?i5s1s2">February</a></li>
                                                                              <li><a href="page.html?i5s1s3">March</a></li>
                                                                          </ul>
                                                                      </li>
                                                                      <li><a href="page.html?i5s2">2007</a>
                                                                          <ul>
                                                                              <li><a href="page.html?i5s2s1">January</a></li>
                                                                              <li><a href="page.html?i5s2s2">February</a></li>
                                                                              <li><a href="page.html?i5s2s3">March</a></li>
                                                                          </ul>
                                                                      </li>
                                                                      <li><a href="page.html?i5s3">2006</a>
                                                                          <ul>
                                                                              <li><a href="page.html?i5s3s1">January</a></li>
                                                                              <li><a href="page.html?i5s3s2">February</a></li>
                                                                              <li><a href="page.html?i5s3s3">March</a></li>
                                                                          </ul>
                                                                      </li>
                                                                  </ul>
                                                              </li>
                                                              <li>
                                                                  <a href="page.html?i6"><span class="l"></span><span class="r"></span><span class="t">Forum</span></a>
                                                              </li>
                                                              <li>
                                                                  <a href="page.html?i7"><span class="l"></span><span class="r"></span><span class="t">About</span></a>
                                                              </li>
                                                              <li>
                                                                  <a href="page.html?i8"><span class="l"></span><span class="r"></span><span class="t">Contact</span></a>
                                                              </li>
                                                          </ul>
                                          
                                                  <div class="cleared"></div>
                                              </div>
                                          </div>
                                  <div class="cleared"></div>
                              </div>
                          </div>
CSS:
Code :
/* begin BlockHeader, VMenuBlockHeader */
.art-vmenublockheader
{
  margin-bottom: 2px;
}

.art-vmenublockheader, .art-vmenublockheader h3.t
{
  position: relative;
  height: 26px;
}

.art-vmenublockheader h3.t,
.art-vmenublockheader h3.t a,
.art-vmenublockheader h3.t a:link,
.art-vmenublockheader h3.t a:visited,
.art-vmenublockheader h3.t a:hover
{
  color: #000000;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
}

.art-vmenublockheader h3.t
{
  margin:0;
  padding: 0 11px 0 31px;
  white-space: nowrap;
  line-height: 26px;    
}

.art-vmenublockheader .l, .art-vmenublockheader .r
{
  position: absolute;
  height: 26px;
  background-image: url('images/vmenublockheader.png');
}

.art-vmenublockheader .l
{
  left: 0;
  right: 25px;
}

.art-vmenublockheader .r
{
  width: 980px;
  right: 0;
  clip: rect(auto, auto, auto, 955px);
}

/* end BlockHeader, VMenuBlockHeader */

/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublockcontent-body
{
  position: relative;
  padding: 0;
}


.art-vmenublockcontent
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-vmenublockcontent-body
{
  position: relative;
  padding: 0;
}


/* end Box, Box, VMenuBlockContent */

/* begin VMenu */
ul.art-vmenu, ul.art-vmenu li
{
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  line-height: 0;
}

ul.art-vmenu ul
{
  display: none;
}

ul.art-vmenu ul.active
{
  display: block;
}
/* end VMenu */

/* begin VMenuItem */
ul.art-vmenu a
{
  position: relative;
  display: block;
  overflow: hidden;
  height: 24px;
  cursor: pointer;
  text-decoration: none;
}

ul.art-vmenu li.art-vmenu-separator
{
  display: block;
  padding: 0 0 0 0;
  margin: 0;
  font-size: 1px;
}

ul.art-vmenu .art-vmenu-separator-span
{
  display: block;
  padding: 0;
  font-size: 1px;
  height: 0;
  line-height: 0;
  border-top: solid 1px #D7E3EA;
}

ul.art-vmenu a .r, ul.art-vmenu a .l
{
  position: absolute;
  display: block;
  top: 0;
  height: 82px;
  background-image: url('images/vmenuitem.png');
}

ul.art-vmenu a .l
{
  left: 0;
  right: 0;
}

ul.art-vmenu a .r
{
  width: 980px;
  right: 0;
  clip: rect(auto, auto, auto, 980px);
}

ul.art-vmenu a .t, ul.art-vmenu ul a
{
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
}

ul.art-vmenu a .t
{
  display: block;
  position:relative;
  top:0;
  line-height: 24px;
  color: #8CA3B1;
  padding: 0 12px 0 12px;
  margin-left:0;
  margin-right:0;
}

ul.art-vmenu a.active .l, ul.art-vmenu a.active .r
{
  top: -58px;
}

ul.art-vmenu a.active .t
{
  color: #6EA5CF;
}

ul.art-vmenu a:hover .l, ul.art-vmenu a:hover .r
{
  top: -29px;
}

ul.art-vmenu a:hover .t
{
  color: #3E505B;
}


/* end VMenuItem */

/* begin VMenuSubItem */
ul.art-vmenu ul, ul.art-vmenu ul li
{
  margin: 0;
  padding: 0;
}

ul.art-vmenu ul a
{
  display: block;
  white-space: nowrap;
  height: 24px;
  overflow: visible;
  background-image: url('images/vsubitem.gif');
  background-position: 24px 0;
  background-repeat: repeat-x;
  padding-left: 39px;
}

ul.art-vmenu ul li
{
  padding: 0;
}

ul.art-vmenu ul span, ul.art-vmenu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

ul.art-vmenu ul a, ul.art-vmenu ul a:link, ul.art-vmenu ul a:visited, ul.art-vmenu ul a:hover, ul.art-vmenu ul a:active, ul.art-vmenu ul span, ul.art-vmenu ul span span
{
  line-height: 24px;
  color: #D1E2F0;
  font-size: 11px;
  margin-left: 0;
}

ul.art-vmenu ul
{
    margin:0 0 0 0;
}

ul.art-vmenu ul ul
{
  margin:0 0 0 0;
}

ul.art-vmenu ul li.art-vsubmenu-separator
{
  display: block;
  margin: 0;
  font-size: 1px;
  padding: 0 0 0 0;
}

ul.art-vmenu ul .art-vsubmenu-separator-span
{
  display: block;
  padding: 0;
  font-size: 1px;
  height: 0;
  line-height: 0;
  margin: 0;
  border-top: solid 1px #D7E3EA;
}

ul.art-vmenu ul li.art-vmenu-separator-first
{
    padding-bottom:0;
}

ul.art-vmenu ul li li a
{
  background-position: 48px 0;
  padding-left: 63px;
}

ul.art-vmenu ul li li li a
{
  background-position: 72px 0;
  padding-left: 87px;
}

ul.art-vmenu ul li li li li a
{
  background-position: 96px 0;
  padding-left: 111px;
}

ul.art-vmenu ul li li li li li a
{
  background-position: 120px 0;
  padding-left: 135px;
}


ul.art-vmenu ul li a.active
{
  color: #121B21;
  background-position: 24px -58px;
}

ul.art-vmenu ul li li a.active
{
  background-position: 48px -58px;
}

ul.art-vmenu ul li li li a.active
{
  background-position: 72px -58px;
}

ul.art-vmenu ul li li li li a.active
{
  background-position: 96px -58px;
}

ul.art-vmenu ul li li li li li a.active
{
  background-position: 120px -58px;
}



ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a:hover.active
{
  color: #171D21;
  background-position: 24px -29px;
}


ul.art-vmenu ul li li a:hover, ul.art-vmenu ul li li a:hover.active
{
  background-position: 48px -29px;
}

ul.art-vmenu ul li li li a:hover, ul.art-vmenu ul li li li a:hover.active
{
  background-position: 72px -29px;
}

ul.art-vmenu ul li li li li a:hover, ul.art-vmenu ul li li li li a:hover.active
{
  background-position: 96px -29px;
}

ul.art-vmenu ul li li li li li a:hover, ul.art-vmenu ul li li li li li a:hover.active
{
  background-position: 120px -29px;
}
/* end VMenuSubItem */

/* begin Box, Block */
.art-block
{
  position: relative;
  margin: 0 auto;
  min-width: 1px;
  min-height: 1px;
}

.art-block-body
{
  position: relative;
  padding: 0;
}


.art-block
{
  margin: 5px;
}

/* end Box, Block */

/* begin BlockHeader */
.art-blockheader
{
  margin-bottom: 2px;
}

.art-blockheader, .art-blockheader h3.t
{
  position: relative;
  height: 34px;
}

.art-blockheader h3.t,
.art-blockheader h3.t a,
.art-blockheader h3.t a:link,
.art-blockheader h3.t a:visited,
.art-blockheader h3.t a:hover
{
  color: #000000;
  font-family: Tahoma, Arial, Helvetica, Sans-Serif;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
}

.art-blockheader h3.t
{
  margin:0;
  padding: 0 11px 0 31px;
  white-space: nowrap;
  line-height: 34px;    
}

.art-blockheader .l, .art-blockheader .r
{
  position: absolute;
  height: 34px;
  background-image: url('images/blockheader.png');
}

.art-blockheader .l
{
  left: 0;
  right: 25px;
}

.art-blockheader .r
{
  width: 980px;
  right: 0;
  clip: rect(auto, auto, auto, 955px);
}

/* end BlockHeader */

J'ai cherché sur les forums et les articles de support de CMSMS, mais je n'ai rien trouvé ce que explique comment à partir d'un template en html et css créer un menu dynamique... J’espère que vous le savez Wink

Comment intégrer un menu en CSS+images - bess - 03/05/2011

salut Eugenix

créer son propre menu requiers un minimum de connaissance en Smarty, le language qui est utilisé dans cmsmadesimple.

le plus simple est de regarder attentivement un gabarit de menu existant qui ressemble beaucoup à ce que tu voudrais faire, et ensuite de le modifier pour atteindre ton objectif.

Comment intégrer un menu en CSS+images - Eugenix - 03/05/2011

Les codes Smarty ce sont ces tags {entre les accolades}?
Ok, je vais essayer de faire cela, merci...

Comment intégrer un menu en CSS+images - bess - 03/05/2011

oui c'est cela : {code} est en général synonyme de Smarty Wink

la bible : http://www.smarty.net/docsv2/fr/

Comment intégrer un menu en CSS+images - Eugenix - 03/05/2011

ok... mais comment on peut ouvrir un gabarit menu, l'éditer et importer un nouveau?

Comment intégrer un menu en CSS+images - bess - 03/05/2011

nié ? si tu parle des gabarits par défaut il me semble qu'ils sont en lecture seule. Il te faut l'importer en base de donnée depuis l'interface du module sous un nouveau nom avant de commencer les modifications sur ce nouveau gabarit.

C'est pour éviter de modifier l'original

Comment intégrer un menu en CSS+images - Eugenix - 04/05/2011

c'est bon, je peux maintenant éditer le menu... mais le code est de complexité mortelle! j'ai pris cssmenu.tpl comme la base d'où importer les codes smarty et je ne comprends rien dedans Sad la structure des div's est différente déjà... je ne sais vraiment pas comment faire... je maitrise bien html et css mais ce smarty... j'ai que des notions de base (pour importer les templates html+css dans cmsms)... comment faire pour dynamiser un menu classique avec ça?