Css aide menu vertical
dagenargent
Messages postés
39
Statut
Membre
-
dagenargent Messages postés 39 Statut Membre -
dagenargent Messages postés 39 Statut Membre -
Bonjour,
je suis en train de créer un E-commerce avec oxatis mais j'ai un probléme avec mon menu vertical.
je voudrai mettre une image pour les boutons et un autre au passage de la souris tous cela avec un espace entre les boutons (transparent) mais je ne trouve pas comment donc si quelqu'un peu me détailler le css ou me dire comment faire, je suis désolé le code est un peu long :
/* VERTICAL MENU >> General layout configuration - Configuration de la mise en page générale*/
#verticalmenu {
display:block;
margin:0;
overflow:visible;
background-image: url(/DesignCss/18000/65/layoutAblue-vmenuBody.gif);
background-repeat: repeat-y;
padding:15 0 0 0;
text-align: left;
background-position: left;
}
/* VERTICAL MENU >> Menu items layout styles - Configuration de la mise en page des éléments*/
ul#vmenu {
margin:0;
list-style-position: outside;
list-style-type: none;
background-image: url(/DesignCss/18000/65/layoutAblue-vmenuBottom.gif);
background-repeat: no-repeat;
background-position: right bottom;
padding-top: 0;
padding-right: 0;
padding-bottom: 30;
padding-left: 0;
}
#vmenu li {
position:relative; /* Necessary for submenu positionneing */
}
#vmenu li a, #vmenu li span, #vmenu li.misep, #vmenu li.mispacer {
width:250px; /* set menu width here */
}
#vmenu li.miimg {
text-align: center;
}
#vmenu li.miimg img {
border:none;
}
/* VERTICAL MENU >> First element (border before first menu item) - Premier élément (bordure)*/
#vmenu li.begin {
display:none;
}
/* VERTICAL MENU >> Last element (border after last menu item) - Dernier élément (bordure)*/
#vmenu li.end {
display:none;
}
/* VERTICAL MENU >> Menu items - Eléments*/
/* VERTICAL MENU >> Titles for sub sections */
#vmenu li.mititle span, #vmenu li.mititle a.menu {
font-size: 14px;
font-weight: bold;
display:block;
color: #000D75;
line-height: 25px;
text-decoration:none;
}
#vmenu li.mititle a.menu:hover, #vmenu li.mititle a.subactive {
text-decoration: none;
background-color: #E4E5F0;;
}
/* End Section Titles */
#vmenu li.mitext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height: 25px;
color:#000000;
}
#vmenu li.menusep {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CDCFE3;
}
/* VERTICAL MENU >> Spacers - Eléments de type espace*/
#vmenu li.mispacer {
height:20px;
}
/* VERTICAL MENU >> Separators - Eléments de type séparateur*/
#vmenu li.misep {
height:42px;
background-image: url(/DesignCss/18000/65/layoutAblue-vmenuSeparator.gif);
background-repeat: no-repeat;
background-position: left top;
}
/* VERTICAL MENU >> Link styles - Mise en forme des liens*/
#vmenu a.menu, #vmenu span {
text-decoration:none;
display:block;
color:#000000;
line-height: 14px;
padding:5px 0;
text-indent:10px;
}
/* VERTICAL MENU >> mouseover links styles - Elément survolé*/
#vmenu li.mitext a.menu:hover, #vmenu li.mitext a.subactive {
background-color:#C5C7DE;
font-weight: bold;
}
#vmenu li.miimg a.menu {
text-indent:0;
}
#vmenu li.miimg a.menu:hover, #vmenu li.miimg a.subactive {
background-color:#C5C7DE;
}
#vmenu li.miimg a.menu img {
border: none;
}
#vmenu li.miimg a.menu:hover img {
border:none;
}
/* VERTICAL MENU SUBMENUS >> BEGIN */
ul#vmenu li div{
padding:0px;
margin:0;
border: none;
}
ul#vmenu li ul.submenu{
list-style-position: outside;
list-style-type: none;
padding: 0;
margin:0;
background-color:#C5C7DE;
position:absolute;
top:-1px;
visibility:hidden;
left:250px;
}
/* Class used to specify the Bottommost item on the Vertical menu and correctly position it's submenu */
ul#vmenu li.menuup ul.submenu{
bottom:-1px;
top:auto;
}
ul#vmenu li ul.submenu li {
margin:0;
}
ul#vmenu li ul.submenu li a, ul#vmenu li ul.submenu li span, ul#vmenu li ul.submenu li.misep, ul#vmenu li ul.submenu li.mispacer {
width:200px;
padding-left:10px;
padding-right:10px;
text-indent:0;/* cancels inherited text-indent properties */
}
ul#vmenu li ul.submenu li a.menu:hover {
text-indent:0;/* cancels inherited text-indent properties */
}
ul#vmenu li ul.submenu li.misep {
height:1px;
border-bottom: 1px solid #000D75;
background: url(none);
}
#vmenu li ul.submenu li.mititle span, #vmenu li ul.submenu li.mititle a.menu {
margin: 0px;
padding-top: 4px;
padding-bottom:4px;
font-size: 12px;
color:#000D75;
line-height: 15px;
font-weight: bold;
text-decoration:none;
text-align: left;
}
#vmenu li ul.submenu li.mititle a.menu:hover {
background-color: #E4E5F0;
}
ul#vmenu li ul.submenu li.mitext a.menu, ul#vmenu li ul.submenu li.mitext span {
font-size: 11px;
font-weight: normal;
text-decoration: none;
line-height:14px;
padding-top:4px;
padding-bottom:4px;
}
ul#vmenu li ul.submenu li.mitext a.menu:hover{
background-color: #E4E5F0;
background-image: none;
font-weight:normal;
}
ul#vmenu li ul.submenu li.miimg a.menu:hover{
background-color: #E4E5F0;;
background-image: none;
}
ul#vmenu li ul.submenu li.menusep {
border:none;
}
/* VERTICAL SUBMENU END */
Vraiment merci beaucoup aux personnes qui vont me donner un coup de pousse car je deviens fou
je suis en train de créer un E-commerce avec oxatis mais j'ai un probléme avec mon menu vertical.
je voudrai mettre une image pour les boutons et un autre au passage de la souris tous cela avec un espace entre les boutons (transparent) mais je ne trouve pas comment donc si quelqu'un peu me détailler le css ou me dire comment faire, je suis désolé le code est un peu long :
/* VERTICAL MENU >> General layout configuration - Configuration de la mise en page générale*/
#verticalmenu {
display:block;
margin:0;
overflow:visible;
background-image: url(/DesignCss/18000/65/layoutAblue-vmenuBody.gif);
background-repeat: repeat-y;
padding:15 0 0 0;
text-align: left;
background-position: left;
}
/* VERTICAL MENU >> Menu items layout styles - Configuration de la mise en page des éléments*/
ul#vmenu {
margin:0;
list-style-position: outside;
list-style-type: none;
background-image: url(/DesignCss/18000/65/layoutAblue-vmenuBottom.gif);
background-repeat: no-repeat;
background-position: right bottom;
padding-top: 0;
padding-right: 0;
padding-bottom: 30;
padding-left: 0;
}
#vmenu li {
position:relative; /* Necessary for submenu positionneing */
}
#vmenu li a, #vmenu li span, #vmenu li.misep, #vmenu li.mispacer {
width:250px; /* set menu width here */
}
#vmenu li.miimg {
text-align: center;
}
#vmenu li.miimg img {
border:none;
}
/* VERTICAL MENU >> First element (border before first menu item) - Premier élément (bordure)*/
#vmenu li.begin {
display:none;
}
/* VERTICAL MENU >> Last element (border after last menu item) - Dernier élément (bordure)*/
#vmenu li.end {
display:none;
}
/* VERTICAL MENU >> Menu items - Eléments*/
/* VERTICAL MENU >> Titles for sub sections */
#vmenu li.mititle span, #vmenu li.mititle a.menu {
font-size: 14px;
font-weight: bold;
display:block;
color: #000D75;
line-height: 25px;
text-decoration:none;
}
#vmenu li.mititle a.menu:hover, #vmenu li.mititle a.subactive {
text-decoration: none;
background-color: #E4E5F0;;
}
/* End Section Titles */
#vmenu li.mitext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height: 25px;
color:#000000;
}
#vmenu li.menusep {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CDCFE3;
}
/* VERTICAL MENU >> Spacers - Eléments de type espace*/
#vmenu li.mispacer {
height:20px;
}
/* VERTICAL MENU >> Separators - Eléments de type séparateur*/
#vmenu li.misep {
height:42px;
background-image: url(/DesignCss/18000/65/layoutAblue-vmenuSeparator.gif);
background-repeat: no-repeat;
background-position: left top;
}
/* VERTICAL MENU >> Link styles - Mise en forme des liens*/
#vmenu a.menu, #vmenu span {
text-decoration:none;
display:block;
color:#000000;
line-height: 14px;
padding:5px 0;
text-indent:10px;
}
/* VERTICAL MENU >> mouseover links styles - Elément survolé*/
#vmenu li.mitext a.menu:hover, #vmenu li.mitext a.subactive {
background-color:#C5C7DE;
font-weight: bold;
}
#vmenu li.miimg a.menu {
text-indent:0;
}
#vmenu li.miimg a.menu:hover, #vmenu li.miimg a.subactive {
background-color:#C5C7DE;
}
#vmenu li.miimg a.menu img {
border: none;
}
#vmenu li.miimg a.menu:hover img {
border:none;
}
/* VERTICAL MENU SUBMENUS >> BEGIN */
ul#vmenu li div{
padding:0px;
margin:0;
border: none;
}
ul#vmenu li ul.submenu{
list-style-position: outside;
list-style-type: none;
padding: 0;
margin:0;
background-color:#C5C7DE;
position:absolute;
top:-1px;
visibility:hidden;
left:250px;
}
/* Class used to specify the Bottommost item on the Vertical menu and correctly position it's submenu */
ul#vmenu li.menuup ul.submenu{
bottom:-1px;
top:auto;
}
ul#vmenu li ul.submenu li {
margin:0;
}
ul#vmenu li ul.submenu li a, ul#vmenu li ul.submenu li span, ul#vmenu li ul.submenu li.misep, ul#vmenu li ul.submenu li.mispacer {
width:200px;
padding-left:10px;
padding-right:10px;
text-indent:0;/* cancels inherited text-indent properties */
}
ul#vmenu li ul.submenu li a.menu:hover {
text-indent:0;/* cancels inherited text-indent properties */
}
ul#vmenu li ul.submenu li.misep {
height:1px;
border-bottom: 1px solid #000D75;
background: url(none);
}
#vmenu li ul.submenu li.mititle span, #vmenu li ul.submenu li.mititle a.menu {
margin: 0px;
padding-top: 4px;
padding-bottom:4px;
font-size: 12px;
color:#000D75;
line-height: 15px;
font-weight: bold;
text-decoration:none;
text-align: left;
}
#vmenu li ul.submenu li.mititle a.menu:hover {
background-color: #E4E5F0;
}
ul#vmenu li ul.submenu li.mitext a.menu, ul#vmenu li ul.submenu li.mitext span {
font-size: 11px;
font-weight: normal;
text-decoration: none;
line-height:14px;
padding-top:4px;
padding-bottom:4px;
}
ul#vmenu li ul.submenu li.mitext a.menu:hover{
background-color: #E4E5F0;
background-image: none;
font-weight:normal;
}
ul#vmenu li ul.submenu li.miimg a.menu:hover{
background-color: #E4E5F0;;
background-image: none;
}
ul#vmenu li ul.submenu li.menusep {
border:none;
}
/* VERTICAL SUBMENU END */
Vraiment merci beaucoup aux personnes qui vont me donner un coup de pousse car je deviens fou
A voir également:
- Css aide menu vertical
- Menu déroulant excel - Guide
- Powerpoint vertical - Guide
- Canon quick menu - Télécharger - Utilitaires
- Barre vertical mac ✓ - Forum MacOS
- Trait vertical clavier - Forum Clavier
3 réponses
oui je sais mais c le menu de base d'oxatis peux tu me le detailler ou je change les images la couleur de texte....
CHerche sur le net tu as des exemples de tuto pour faire des menu bien expliquer
oui je suis d'accord avec toi mais il faut que je garde la configuration oxatis pour pour pouvoir continuer à sélectionner dans quelle langue je veux que la rubrique de mon menu soit affiché car je fais un site en trois langue.
sinon pour des menu en css j'en ai pas loin de 80 mais il faut les rendre compatible c ca le probléme, juste l'afficher et mettre les liens manuellement c pas un probléme.
c plus compliquer que ce que tu pense
en tout cas merci pour ta réponse
sinon pour des menu en css j'en ai pas loin de 80 mais il faut les rendre compatible c ca le probléme, juste l'afficher et mettre les liens manuellement c pas un probléme.
c plus compliquer que ce que tu pense
en tout cas merci pour ta réponse