THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 Menu deroulant

(23-01-2009 12:48:01)

J'ai un  petit souci avec le menu déroulant de la contrib.
Le fichier .html est de la contrib mais le fichier .css de la template cadeau.

Il  fonctionne parfaitement. Les sous-menus  et  sous_sous_menus  s'affichent et  se surlignent au  passage de la souris parfaitement.

Mon problèmee est que j’essaie de faire surligner le sous_sous_menu d’une autre couleur et je n’arrive pas à trouver la bonne formule

Voici un bout du  fichier .css que je dois modifier

dl#menu dt {
    cursor: pointer;
}
dl#menu dt a {
    font-size: 1.2em;
    color: #2E5F5B;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin: 0;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 5px;
    padding-left: 5px;
    overflow: hidden;
    zoom: 1;
}
dl#menu dt a:hover, dl#menu dt .selected {
    color: #FFFFFF;
    background-color: #2E5F5B;
}
dl#menu dd {
}
dl#menu li {
}
dl#menu li a {
    font-size: 1em;
    color: #2E5F5B;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin:0;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    zoom: 1;
}
dl#menu li a:hover, dl#menu li .selected {
    color: #FFFFFF;
    background-color: #64B3AD;
}

Ici j’ai  la sous rubrique et la sous sous rubrique avec la même couleur .

Je cherche à avoir 1 couleur pour la rubrique, 1 autre couleur pour la sous rubrique et 1 autre couleur pour la sous sous rubrique.

Si quequ’un comprend ma demande, merci de votre aide

Offline

#2 Re: Menu deroulant

(23-01-2009 15:46:35)

Bonjour,

Je pense comprendre ta demande.

Il faut que tu crées des classes en CSS dans lesquelles tu affectes tes couleurs.

Et dans tes bloucles tu fais quelque chose comme ceci

THELIA_boucle 1 rubrique
     <a>#TITRE</a>
      THELIA_bloucle2 ss-rubrique
           <a class="couleur1">#TITRE</a>
                    THELIA_bloucle ss-ss-rubr
                          <a class="couleur2">#TITRE</a>

Normalement cela fonctionne, j'ai fait un site pour lequelle j'affecte une couleur différente par rubrique de rang 1 et cela marche.

Alfouine,

Au royaume des aveugles, les borgnes sont mal vus.

Offline

#3 Re: Menu deroulant

(23-01-2009 16:13:53)

Merci de ton aide , je pensai ne pas toucher au fichier html puisqu'il fonctionne bien  http://www.abyshop.fr
Mais plutôt au fichier  .css , en séparant la sous sous rubrique de la sous rubrique lorsque l'on emploie "hover"

Last edited by victoto (23-01-2009 16:14:20)

Offline

#4 Re: Menu deroulant

(23-01-2009 16:20:17)

Il y a également une autre technique, tu utilises le champs lien ou postscriptum de ta rubrique et tu lui affectes la valeur de la classe CSS.

Et dans ton html, tu a juste à rajouter <a class="#LIEN" ....

Comme cela tu ne touches pas à tes boucles et là tu peux même faire de l'épicerie fine.

Cela t'obliges à mettre tes classes de code CSS dans l'entête de ton HTML.

Alfouine

Au royaume des aveugles, les borgnes sont mal vus.

Offline

#5 Re: Menu deroulant

(29-01-2009 10:30:06)

Pour trouver rapidement le style associé à un div, utilise sous mozilla firebug. C'est un module complémentaire plugin qui rajoute dans le menu contextuel "inspecter un élément " et cela t'affiche le code source associé et a droite directement la css avec la ligne. Tu peux meme changer à la volé la feuille de style pour voir directement son influence.
Trés pratique
ISORE

Offline

#6 Re: Menu deroulant

(17-02-2009 16:22:44)

Merci de votre aide
voila je n'ai transformée que le fichier  styles.css

#menuGeneral {
    float:left;
    width: 180px;
    margin-left: 10px;
}
/*#menuGeneral {
    left:0;
    width:185px;
    padding: 0;
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 5px;
    float: left;

}*/


dl, dt, dd, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu {
    position: relative;
    padding: 0;
    margin: 0;
}

dl#menu {
    width: 175px;
}


dl#menu dt {
    cursor: pointer;
}

dl#menu dt a {
    font-size: 1.2em;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin: 0;
    padding-top: 5px;
    padding-right: 0;
    padding-bottom: 5px;
    padding-left: 5px;
    overflow: hidden;
    zoom: 1;
    background-color: #2E5F5B;
}

dl#menu dt a:hover, dl#menu dt .selected {
    color: #FFFFFF;   
    background-color: #2E5F5B;
}

dl#menu dd {
}
dl#menu li {
}
dl#menu li a {
    font-size: 1em;
    color: #2E5F5B;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin:0;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    zoom: 1;
   
}
dl#menu li a:hover, dl#menu li .selected {
    color: #2E5F5B;
    background-color: #64B3AD;

}
   
dl#menu li a.sousmenu1 {
    color: #2E5F5B;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin:0;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    zoom: 1;
       
}

dl#menu li a.selected1 {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin:0;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    zoom: 1;
    background-color: #64B3AD
    }

dl#menu li a.sousmenu2 {
    font-size: 1em;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin:0;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    zoom: 1;
   
   
}

dl#menu li a.selected2 {
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    display: block;
    margin:0;
    padding-left: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    zoom: 1;
   
}

dl#menu li a.sousmenu1:hover {
    color: #9B2614;
   
    }

dl#menu li .selected1 {
    color: #2E5F5B;
   
    }

dl#menu li a.sousmenu2:hover {
    color: #FFFFFF;
   
}

dl#menu li .selected2 {
    color: #64B3AD;
   
}

Last edited by victoto (17-02-2009 16:25:06)

Offline

#7 Re: Menu deroulant

(18-02-2009 19:11:13)

Merci encore Isidore ce complement de Mozilla est vraiment sympa big_smile