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