1. Forum CMS Made Simple FR
  2. Général
  3. Général
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

Affichage hiérarchique
Comment intégrer un menu en CSS+images
Eugenix
Unregistered
 
#1

03/05/2011, 03:12:27
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
Répondre
bess
Administrateur
*******
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation : 0
#2

03/05/2011, 09:49:46
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.
Site web Trouver
Répondre
Eugenix
Unregistered
 
#3

03/05/2011, 15:24:05
Les codes Smarty ce sont ces tags {entre les accolades}?
Ok, je vais essayer de faire cela, merci...
Répondre
bess
Administrateur
*******
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation : 0
#4

03/05/2011, 17:56:53
oui c'est cela : {code} est en général synonyme de Smarty Wink

la bible : http://www.smarty.net/docsv2/fr/
Site web Trouver
Répondre
Eugenix
Unregistered
 
#5

03/05/2011, 21:54:41
ok... mais comment on peut ouvrir un gabarit menu, l'éditer et importer un nouveau?
Répondre
bess
Administrateur
*******
Messages : 10,864
Sujets : 164
Inscription : Dec 2008
Réputation : 0
#6

03/05/2011, 21:58:37
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
Site web Trouver
Répondre
Eugenix
Unregistered
 
#7

04/05/2011, 13:42:33
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?
Répondre
« Sujet précédent | Sujet suivant »


Atteindre :


Utilisateur(s) parcourant ce sujet : 2 visiteur(s)
  1. Forum CMS Made Simple FR
  2. Général
  3. Général