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

Bienvenue,
Le template minimal fonctionne très bien pour ce menu.
Tu dois mettre la page REFERENCE en sectionheader, dire au menu qu'elle pointe sur # et ajouter la classe subnav aux pages enfants et topnav au premier ul :
Code :
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
{* ajout de topnav *}
<ul class="clearfix topnav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{* ajout de subnav à list des enfants *}
{repeat string="<ul class='subnav'>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
{* on transforme le section header de la page parent en lien # *}
<li class="sectionheader"><a href="#">{$node->menutext}</a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Répondre
#3

Merci votre seigneurie Le ChauveWink

Mes styles s'appliquent très bien maintenant.

J'ai cependant un souci avec mon script qui déroule le menu. Dans les faits, il ne le déroule pas du tout...

Il y a t-il une fonction différente à appeler ou un bout de code à rajouter pour qu'il fonctionne?

Mon script:
Code :
[== JavaScript ==]

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

Ma page:

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 template Menu:
Code :
[== Indéfini ==]
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
{* ajout de topnav *}
<ul class="clearfix topnav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{* ajout de subnav à list des enfants *}
{repeat string="<ul class='subnav'>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
{* on transforme le section header de la page parent en lien # *}
<li class="sectionheader"><a href="#">{$node->menutext}</a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Je n'arrive pas à comprendre pourquoi il ne joue pas ce script alors que d'autres fonctionnent sur la page.

Un petit coup de main serait le bienvenu

En vous remerciant,

Cordialement,
Piet
Répondre
#4

Tu n'as pas un lien vers ton site test (tu pourrais le mettre dans un sous dossier de ton site actuel) ?
Sinon, utilise FireBug pour trouver l'erreur.
Répondre
#5

Bonjour,

J'ai installé mon site en ligne à l'adresse:
http://www.reflexions3.be/cmsms/

J'ai normalement un menu déroulant sous l'onglet 'REFERENCES' (avec une petite icone flèche verte vers le bas) mais on dirait que le script associé ne fonctionne pas. Il y a une page enfant dans cet onglet
http://www.reflexions3.be/cmsms/index.ph...nts-prives

Visuellement, ça devrait se dérouler comme dans la page 'CONTACT'
http://www.reflexions3.be/cmsms/index.php?page=contact
dans laquelle j'ai intégré un autre gabarit complété manuellement pour le menu.

Firebug ne m'indique pas d'erreur de script, donc je penche plutôt sur un problème d'appel du script.
Mais je ne sais pas où regarder.

Quelqu'un aurait-il une piste à me soumettre?

Cordialement,
Pierre
Développeur du dimanche (et un peu du vendredi aussi Wink )
Répondre
#6

bonjour,
il semblerait que tu es au moins 2 gabarits.
Dans la page aménagements privés, c'est le menu CMSMS ou tu l'as codé en dur?

{SEO}
Inscrivez-vous à notre Newsletter sur le site (colonne de droite, en bas).
Vous appréciez CMSMS et l'aide qui vous est fournie ici, aidez-nous en participant au projet.
Formation CMS Made Simple | Création de site CMS Made Simple.

C'est en se plantant qu'on devient cultivé.
J'ai un string dans l'Array (Paris Hilton)
Répondre
#7

Là, c'est du dur, mais il doit ressembler à ça...
Répondre
#8

J'ai trouvé le problème, mais je n'ai pas encore la solution... Big Grin

Mon menu n'affiche pas le premier enfant de 'reference'.
Ca doit donc venir du gabarit menu, je suppose.

J'ai ajouté 2 autres pages test et ça s'affiche correctement.

Si une bonne âme peut regarder le code et me dire si tout semble en ordre, car moi je ne vois pas où se situe le souci.

Code :
[== XHTML ==]
{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}
{* ajout de topnav *}
<ul class="clearfix topnav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{* ajout de subnav à list des enfants *}
{repeat string="<ul class='subnav'>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->type == 'sectionheader'}
{* on transforme le section header de la page parent en lien # *}
<li class="sectionheader"><a href="#">{$node->menutext}</a>
{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Merci d'avance !
Cordialement,

Pierre
Répondre
#9

Mets-toi en mod_rewriting, ça devrait corriger ton problème.
En fait, l'ancre de ton ancien site pointe vers index.html# et ici vers cms/#
Répondre
#10

Quand on est lent, on avance lentement, ma page était tout simplement masquée dans les options...

J'aurais sans doute encore besoin de votre aide soon :p

Merci de vos précieux conseils...
Répondre


Atteindre :


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