Modifier div par une selection d'une autre di
frycrash
Messages postés
7
Date d'inscription
Statut
Membre
Dernière intervention
-
frycrash Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
frycrash Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous !
Voilà j'ai un petit soucis, je travaille sous joomla actuellement et je développe un site.
Comment on peut dire en CSS que si un menu est sélectionné, alors je vais afficher une image background dans une autre div ?
J'ai un menu principal du type :
- menu 1 - menu 2 - menu 3
pour chaque lien de menu j'ai 2 sous menu de ce type qui apparaissent quand un menu est sélectionné :
- menu 1 SELECTIONNE - menu 2 - menu 3
- Sous menu 1 - Sous menu1
Lorsque mon menu 1 est sélectionné, j'ai une image qui s'affiche en background pour montrer que c'est bien ce menu qui est sélectionné.
Lorsque je clique sur "Sous menu1" j'aimerais que l'image de background qui est sur "Menu1" reste affiché...
Quelqu'un sait comment faire ça en CSS ?
Merci d'avance !
Voilà j'ai un petit soucis, je travaille sous joomla actuellement et je développe un site.
Comment on peut dire en CSS que si un menu est sélectionné, alors je vais afficher une image background dans une autre div ?
J'ai un menu principal du type :
- menu 1 - menu 2 - menu 3
pour chaque lien de menu j'ai 2 sous menu de ce type qui apparaissent quand un menu est sélectionné :
- menu 1 SELECTIONNE - menu 2 - menu 3
- Sous menu 1 - Sous menu1
Lorsque mon menu 1 est sélectionné, j'ai une image qui s'affiche en background pour montrer que c'est bien ce menu qui est sélectionné.
Lorsque je clique sur "Sous menu1" j'aimerais que l'image de background qui est sur "Menu1" reste affiché...
Quelqu'un sait comment faire ça en CSS ?
Merci d'avance !
A voir également:
- Modifier div par une selection d'une autre di
- Modifier dns - Guide
- Modifier une story facebook - Guide
- Modifier une liste déroulante excel - Guide
- Modifier extension fichier - Guide
- Vous avez besoin d'une autorisation de la part de système pour modifier ce dossier - Guide
2 réponses
Salut,
Alors voici le code CSS.
La classe PILLMENU concerne mon menu 1, et la classe PILL_LOL concerne mon sous menu.
ce que j'ai mis en gras, c'est l'image que j'affiche en background quand mon menu 1 est sélectionné, et donc l'image que j'aimerais continuer à afficher toujours sur menu 1 quand mon sous menu1 est sélectionné aussi.
#pillmenu li#current.active a:link {
background: url(../images/mw_menu_normal_bg_save.png) repeat-x;
font-weight: bold;
}
#pillmenu li#current.active a:visited {
background: url(../images/mw_menu_normal_bg_save.png) no-repeat;
color:#F90;
font-weight: bold;
}
table.pill {
margin-left: -60px;
margin-right: auto;
padding: 50px;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.pill_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0px;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu {
white-space: nowrap;
height: 0px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 15px;
color: #FFF;
text-decoration: none;
}
#pillmenu current.active {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
}
#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
/* Affichage du sous menu */
table.pill_lol {
margin-left: 10px;
margin-right: auto;
padding: 0;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.lol_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu_lol {
white-space: nowrap;
height: 32px;
float: left;
}
#pillmenu_lol ul {
margin: -20px;
padding: 0;
list-style:none;
}
#pillmenu_lol li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu_lol a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #FFF;
text-decoration: none;
}
#pillmenu_lol li#current.active a:visited {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
color:#F90;
}
#pillmenu_lol a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
Je met mon code html qui concerne le menu au cas ou :
<div id="menu">
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_m">
<div id="pillmenu"><jdoc:include type="modules" name="user3" />
<div id="trait_dessus"><hr></div>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="pill_lol">
<tr>
<td class="lol_m">
<div id="pillmenu_lol">
<jdoc:include type="modules" name="lol" />
</div>
</td>
</tr>
</table>
</div>
Merci d'avance !
Alors voici le code CSS.
La classe PILLMENU concerne mon menu 1, et la classe PILL_LOL concerne mon sous menu.
ce que j'ai mis en gras, c'est l'image que j'affiche en background quand mon menu 1 est sélectionné, et donc l'image que j'aimerais continuer à afficher toujours sur menu 1 quand mon sous menu1 est sélectionné aussi.
#pillmenu li#current.active a:link {
background: url(../images/mw_menu_normal_bg_save.png) repeat-x;
font-weight: bold;
}
#pillmenu li#current.active a:visited {
background: url(../images/mw_menu_normal_bg_save.png) no-repeat;
color:#F90;
font-weight: bold;
}
table.pill {
margin-left: -60px;
margin-right: auto;
padding: 50px;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.pill_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0px;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu {
white-space: nowrap;
height: 0px;
float: left;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 15px;
color: #FFF;
text-decoration: none;
}
#pillmenu current.active {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
}
#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
/* Affichage du sous menu */
table.pill_lol {
margin-left: 10px;
margin-right: auto;
padding: 0;
}
td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;
}
td.lol_m {
// background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}
#pillmenu_lol {
white-space: nowrap;
height: 32px;
float: left;
}
#pillmenu_lol ul {
margin: -20px;
padding: 0;
list-style:none;
}
#pillmenu_lol li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu_lol a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #FFF;
text-decoration: none;
}
#pillmenu_lol li#current.active a:visited {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
color:#F90;
}
#pillmenu_lol a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
Je met mon code html qui concerne le menu au cas ou :
<div id="menu">
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_m">
<div id="pillmenu"><jdoc:include type="modules" name="user3" />
<div id="trait_dessus"><hr></div>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="pill_lol">
<tr>
<td class="lol_m">
<div id="pillmenu_lol">
<jdoc:include type="modules" name="lol" />
</div>
</td>
</tr>
</table>
</div>
Merci d'avance !