Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[Résolu] Application de CSS dans Menu
#1

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site : http://www.reflexions3.be/
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.3
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ CMSPrinting: 1.0
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ MicroTiny: 1.1.1
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ Album: 1.10-beta2
#~ Gallery: 1.3
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 2000000
#~ default_upload_permission: 664
#~ url_rewriting: none
#~ page_extension:
#~ 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.3.10
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 30
#~ output_buffering: 1
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 2M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.5.20
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour Communauté,

Je suis nouveau sur CMSMS et j'ai évidemment des questions qui peuvent sembler bêtes, mais dont les réponse m'aiderait grandement. J'essaie de convertir le site http://www.reflexions3.be/ en dynamique.

J'ai un menu sur lequel je n'arrive pas à appliquer mon css.
J'utilise le template cssmenu.


Voici le code du gabarit de ma page CMSMS:
Code :
[== XHTML ==]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{literal}<script type="text/javascript" src="uploads/js/jquery-1.4.4.js"></script>{/literal}
{literal}<script type="text/javascript" src="uploads/js/jquery.mousewheel.js"></script>{/literal}
{literal}<script type="text/javascript" src="uploads/js/jquery.jscrollpane.min.js"></script>{/literal}
{literal}<script type="text/javascript" id="sourcecode">
            $(function()
            {
                $('.scroll-pane').jScrollPane();
                $('.scroll-pane-arrows').jScrollPane(
                    {
                        showArrows: true,
                        horizontalGutter: 10
                    }
                );
            });
        </script>
{/literal}

{cms_stylesheet}
{metadata}


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accueil - Reflexion[s]3</title>
</head>


<body class="oneColFixCtr">
<div id="bodybckgnd"><img src="uploads/images/background.jpg" alt="" style="display:block; width:100%; height:100%;" /></div>
<div id="bkcontent">
<div id="menu-container">
<div id="menu">

{menu}
<div id="logo"></div>


</div>
</div>
<div id="container">
                <div id="entete">
                    <div id="controls" class="controls"></div>
                </div>
            <div id="mainContent">
            <div id="accueil" class="scroll-pane-arrows">
            {content}
            </div>
                            <div id="thumbs">
                                <ul class="thumbs">
                                    <li><img src="uploads/images/accueil-1.jpg" alt="" /></li>
                                    <li>
                                    <img src="uploads/images/accueil-2.jpg" alt="" />
                                    </li>
                                     <li>
                                        <img src="uploads/images/accueil-3.jpg" alt="" />
                                    </li>
                              </ul>
                </div>
                <!-- Start Advanced Gallery Html Containers -->
                            <div id="gallery" class="content">
                                <div class="slideshow-container">
                                    <div id="slideshow" class="slideshow"><img src="uploads/images/accueil-big.jpg" alt="Title #1" /></div>
                                </div>
                            </div>
            </div>

  </div>

<div id="footer">
  <p><b>Réflexion[s]<sup>3</sup></b> | +32 497 97 57 02
    | <a href="mailto:info@reflexions3.be">info@reflexions3.be</a></p>
  <p>©Copyright 2010 Réflexion[s]<sup>3</sup> All right reserved. </p>
</div>

</div>
{literal}<script type="text/javascript">
$(document).ready(function(){
    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
        $(this).parent().hover(function() {
        }, function(){    
            $(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up
        });
        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});
</script>{/literal}
</body>
</div>
</html>


Mon code original pour le menu:

Code :
[== XHTML ==]
<div id="menu-container">
<div id="menu">
<div id="logo"></div>
<ul class="topnav">  
    <li>
        <a href="index.html">ACCUEIL</a>
    </li>
    <li>
        <a href="presentation.html">PRESENTATION</a>
    </li>  
    <li>  
    <a href="#">REFERENCE</a>  
                <ul class="subnav">  
                <li><a href="amenagements-prives.html">Aménagements privés</a></li>  
                <li><a href="amenagements-commerces.html">Aménagements commerces & bureaux</a></li>  
                <li><a href="eclairage-interieurs-prives.html">Eclairage intérieurs privés</a></li>  
                <li><a href="eclairage-exterieurs-prives.html">Eclairage extérieurs privés</a></li>  
                <li><a href="eclairage-interieurs-commerces.html">Eclairage intérieurs commerces & bureaux</a></li>  
                <li><a href="eclairage-exterieurs-commerces.html">Eclairage extérieurs commerces & bureaux</a></li>  
                <!--<li><a href="conceptions.html">Conceptions</a></li> -->
</ul>  
    </li>  
    <li>
            <a href="news.html">NEWS</a>
    </li>
    <li>
            <a href="contact.html">CONTACT</a>
    </li>  
</ul>
<!-- fin de #menu --></div>
<!-- fin de #menu-container --></div>

Feuille de style du menu:
Code :
[== CSS ==]
#menu {
margin: auto;
width: 940px;
position:relative;
}

/*Style Menu sexy*/
ul.topnav {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
    float: right;  
    width: 480px;  
    background: #222;  
    background: url([[root_url]]/uploads/images/topnav_bg.gif) repeat-x;  
}  
ul.topnav li {  
    float: left;  
    margin: 0;  
    padding: 0 25px 4px 0;  
    position: relative; /*--Declare X and Y axis base for sub navigation--*/  
}  
ul.topnav li a{  
    padding: 5px 5px 0px 5px;  
    color: #999;  
    display: block;  
    text-decoration: none;  
    float: right;  
}  
ul.topnav li a:hover{  
    background: url([[root_url]]/uploads/images/topnav_hover.gif) no-repeat center top;
    color: #FFF;
}  
ul.topnav li a:active{  
    background: url([[root_url]]/uploads/images/topnav_hover.gif) no-repeat center top;
    color: #FFF;
}  

ul.topnav li span { /*--Drop down trigger styles--*/  
    width: 17px;  
    height: 20px;  
    float: right;  
    background: url([[root_url]]/uploads/images/subnav_btn.gif) no-repeat center top;  
}  
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  
ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0;
    top: 23px;
    background: #333;
    margin: 0;
    padding: 0 0 0 0;
    display: none;
    float: left;
    width: 160px;
    border: 1px solid #111;
    text-align: left;
    z-index: 10;
}  
ul.topnav li ul.subnav li{  
    margin: 0; padding: 0 1px 1px 1px;  
    border-top: 1px solid #252525; /*--Create bevel effect--*/  
    border-bottom: 1px solid #444; /*--Create bevel effect--*/  
    clear: both;  
    width: 159px;
    z-index: 10;
}  
html ul.topnav li ul.subnav li a {  
    float: left;  
    width: 133px;  
    background: #333 url(dropdown_linkbg.gif) no-repeat 5px center;  
    padding-left: 20px;
    padding-bottom: 3px;
    z-index: 10;
}  
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  
    background: #222 url(dropdown_linkbg.gif) no-repeat 5px center;  
    z-index: 10;
}

Je n'arrive pas à modifier le template pour que le menu ressemble à l'original (http://www.reflexions3.be/)

Quelqu'un peut-il m'aider à placer mon css ou me diriger vers un template menu plus adapté?

PS, quand je place le code original sans le module menu, il s'affiche et fonctionne parfaitement

En vous remerciant pour votre aide des plus appréciable.
"Moi petit scarabée fait appel à toi maître Wink"
Répondre


Messages dans ce sujet

Atteindre :


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