Mardi 07 Août 2007 10:49:09 am

Oui, c'est que je souhaite, une image de fond differente entre le menu et le sous menu...

Voici mon pagelayout.css

/* PAGELAYOUT CSS - 20060522 */

/* FULL PAGE */

div#page
{
width: 770px; /* This can be changed to any fixed width if desired */
margin: 0 auto 0 auto; /* General method for centering content if fixed page width, for other browsers than IE */
text-align: left; /* Reset IE method for centering page, to stop all other content on the page from centering */
}

/* HEADER */

div#header
{
padding-left: 0.25em;
padding-right: 0.25em;
padding-top: 0.25em;
background-color: #FFFFFF;
padding-bottom: 0.75em;
}

div#header ul
{
margin: 0;
padding: 0.25em 0 0.25em 0;
}

div#header ul li
{
list-style-type: none;
list-style-image: none;
padding: 0;
display: inline;
margin-left: 1em;
}

div#logo
{
float: left;
margin: 1em 0 0 1.5em;
}

div#usermenu
{
background-image: url(../images/header_bg.png);
background-position: top left;
background-repeat: repeat-x;
height: 25px;
}

div#languages
{
background-image: url(../images/header_bg_left.png);
background-position: bottom left;
background-repeat: no-repeat;
float: left;
clear: left;
width: 24%;
height: 25px;
font-size: 0.85em;
}

div#links
{
background-image: url(../images/header_bg_right.png);
background-position: right bottom;
background-repeat: no-repeat;
float: right;
clear: right;
text-align: right;
padding-right: 0;
font-size: 0.9em;
font-weight: bold;
height: 25px;
width: 75%;
}

div#links a
{
color: #515346;
border-left: 1px solid #CECEC2;
display: block;
float: right;
padding-left: 0.75em;
padding-right: 0.75em;
height: 18px;
}

div#searchbox
{
width: 20em; /* Needs to be sufficient width to fit both text input and submit button to avoid Konqueror breaking the line between them */
margin-top: 1.75em;
margin-right: 1em;
text-align: right;
float: right;
}

input#searchtext
{
border: 1px solid #A5ACB2;
font-size: 0.85em;
width: 12em;
}

input#searchbutton
{
margin-top: -0.1em;
}

/* TOP MENU */



div#topmenu ul
{
margin: 0;
padding: 0;
background-image: url(../images/menu.png);
height: 33px;
}

div#topmenu li /* A garder pour ne pas avoir les points sur le menu */
{
background-image: url(../images/menu_bas2.png);
height: 33px;
margin: 0;
float: left;
padding: 0;
font-size: 0.85em;
font-weight: bold;
list-style-type: none;
list-style-image: none;
}

div#topmenu li.selected
{
background-image: url(../menu_bas.png);
background-repeat: no-repeat;
}

div#topmenu li a /* A garder pour positionner les textes des menus */
{
text-decoration: none;
color: #4F5241; /* Couleur du texte des menus 1 et 2 */

display: block;
float: left;
margin: 0;
padding: 15px; /* Espace entre categrories menu 1 */
margin-top: 4px;
padding-top: 2px;
padding-bottom: 0;
height: 22px;
line-height: 22px;
background-color: transparent;
}





/* PATH */

div#path
{
padding: 0.5em 0.5em 0.5em 2em;
font-size: 0.85em;
}

div#path p
{
margin: 0;
}

/* COLUMNS */

div#columns
{
padding: 0 14em 0 14em;
}

div.nosidemenu div#columns
{
padding-left: 0;
}

div.noextrainfo div#columns
{
padding-right: 0;
}

/* SIDE MENU */



div.nosidemenu div#sidemenu-position
{
display: none;
}

div#sidemenu ul
{
list-style-type: none;
margin: 0.5em 0 0.5em 0;
}

div#sidemenu ul li
{
margin: 0.25em 0 0.25em 0;
list-style-type: none;
list-style-image: none;
}

div#sidemenu div.box div.box-content
{
padding-left: 0.75em;
padding-right: 0;
}

div#sidemenu h4
{
margin: 0;
}

div#sidemenu h4 a
{
color: #525345;
text-decoration: none;
}

div#sidemenu ul.menu-list a.selected
{
font-weight: bold;
}

div#sidemenu ul.submenu-list
{
list-style-type: none;
margin-left: 1em;
}

div#sidemenu ul.submenu-list a.selected
{
font-weight: bold;
}

div#sidemenu ul.menu-list li a, div#sidemenu ul.submenu-list li a
{
background-position: 0.2em 0.5em;
background-repeat: no-repeat;
padding-left: 18px;
display: block;
font-size: 0.85em;
}

/* MAIN AREA */

div#main-position
{
width: 100%;
float: left;
}

div#main
{

}

div.nosidemenu div#main-position
{
margin-left: 0;
}

div.noextrainfo div#main-position
{
margin-right: 0;
}

/* EXTRA CONTENT */

div#extrainfo-position
{
width: 14em;
margin-right: -14em;
float: left;
}

div.noextrainfo div#extrainfo-position
{
display: none;
}

div#extrainfo
{

}

/* FOOTER */

div#footer
{
clear: both; /* Ensures that the footer is pushed properly below the columns */
text-align: center;
padding-top: 1.25em;
background-image: url(../images/footer_bg.png);
background-position: top center;
background-repeat: no-repeat;
font-size: 0.85em;
margin-bottom: 0.25em;
}

div#footer address
{
font-style:normal;
}

div#sidemenu
{
padding: 0 0.25em 0 0;
}

div#extrainfo
{
padding: 0 0 0 0.25em;
}

Mardi 07 Août 2007 11:50:17 am

J'ai supprimé la ligne de background de topmenu ds pagelayout.css

et mis

div#topmenu
{
background-color: #111111;
border-color: #111111;
}


div#submenu
{
background-color: #7b92bc;
border-color: #7b92bc;
}


dans site-colors.css

Voici ce que j'obtiens:

http://www.hiboox.com/lang-fr/image.php?img=3u2fhxry.jpg

Maintenant, comment faire pour ne plus avoir des couleurs de fond mais les images que je désire ?
J'ai remplacé les
background-color: #XXXXXX; par background-image: url(../images/monimage.png);
mais ça ne marche pas...

Merci

Mardi 07 Août 2007 2:06:55 pm

Oui ça je sais, mais ce qui me préocupe le plus, c'est d'avoir le sous menu avec un fond different de celui du menu. Après j'ai vu en testant que je pouvais modifier l'onglet de la page actuelle...

Merci beaucoup de ton aide

Mardi 07 Août 2007 3:42:02 pm

Mais j'ai une autre question. je souhaiterais que le sous-menu change de fond selon la catégorie définie dans le menu...

As-tu une idée ?

Mardi 07 Août 2007 4:16:44 pm

Oui j'ai bien une idée, même plusieurs...

Première solution:
Créer autant de section que de rubrique de niveau 1.
Créer autant de feuilles de styles que de rubriques/section
Ensuite tu fais un test sur le template pagelayout.tpl pour charger la feuille de style adéquate.
L'avantage: tu peux ainsi donner une couleur principale à la rubrique consultée

Deuxième solution:
Adapter le fichier doubletop.tpl et ajouter un élément dans la déclaration de la <div id="submenu"> afin de pouvoir l'identifier et lui donner un style différent.
Exemple:
<div id="submenu_debutants"> dans doubletop.tpl
et
div#submenu_debutants
{
...
} dans site-colors.css

Il doit y en avoir d'autres...

@+
Sylvain