[Résolu]Ecrire le menu à la verticale

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site : local
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
----------------------------------------------
Cms Version: 1.11.4
Installed Modules:
CMSMailer: 5.2.1
CMSPrinting: 1.0.3
FileManager: 1.4.3
MenuManager: 1.8.4
MicroTiny: 1.2.5
ModuleManager: 1.5.5
News: 2.12.10
Search: 1.7.7
ThemeManager: 1.1.7

Config Information:
php_memory_limit:
process_whole_template:
output_compression:
max_upload_size: 2000000
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.2.4
md5_function: On (Vrai)
gd_version: 2
tempnam_function: On (Vrai)
magic_quotes_runtime: Off (Faux)
E_STRICT: 0
memory_limit: 128M
max_execution_time: 30
output_buffering: 4096
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)
xmlreader_class: On (Vrai)

Server Information:
Server Api: apache2handler
Server Db Type: MySQL (mysqli)
Server Db Version: 5.1.36
Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté

----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour,

J'ai un menu horizontal dans lequel je voudrais que le texte soit écris à la verticale.
Pour cela je voudrais rajouter le code suivant dans le css du menu:
Code :
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);    
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Mon problème c'est que lorsque je l'applique au menu, la rotation s'applique sur l'image du menu et le sous-menu. J'aimerais que dans mon cas cela s'applique uniquement sur le texte du premier niveau du menu.
Il me paraissait logique de le mettre ici :
Code :
nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {  
    font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: [[$white]];
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
mais aucun changement.
En faite j'ai essayé un peu partout mais je n'arrive pas à trouver où modifier. De plus, je sais que ce n'est pas très compatible avec IE.
J'ai un peu honte de ma question mais pouvez-vous m'aidez?
Y-a-t-il d'autre solution pour réaliser ce que je souhaite faire?

D'avance merci.
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site : local
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
----------------------------------------------
Cms Version: 1.11.4
Installed Modules:
CMSMailer: 5.2.1
CMSPrinting: 1.0.3
FileManager: 1.4.3
MenuManager: 1.8.4
MicroTiny: 1.2.5
ModuleManager: 1.5.5
News: 2.12.10
Search: 1.7.7
ThemeManager: 1.1.7

Config Information:
php_memory_limit:
process_whole_template:
output_compression:
max_upload_size: 2000000
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.2.4
md5_function: On (Vrai)
gd_version: 2
tempnam_function: On (Vrai)
magic_quotes_runtime: Off (Faux)
E_STRICT: 0
memory_limit: 128M
max_execution_time: 30
output_buffering: 4096
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)
xmlreader_class: On (Vrai)

Server Information:
Server Api: apache2handler
Server Db Type: MySQL (mysqli)
Server Db Version: 5.1.36
Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté

----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~


Bonjour,

J'ai un menu horizontal dans lequel je voudrais que le texte soit écris à la verticale.
Pour cela je voudrais rajouter le code suivant dans le css du menu:
Code :
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);    
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Mon problème c'est que lorsque je l'applique au menu, la rotation s'applique sur l'image du menu et le sous-menu. J'aimerais que dans mon cas cela s'applique uniquement sur le texte du premier niveau du menu.
Il me paraissait logique de le mettre ici :
Code :
nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {  
    font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: [[$white]];
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);    
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
mais aucun changement.
En faite j'ai essayé un peu partout mais je n'arrive pas à trouver où modifier. De plus, je sais que ce n'est pas très compatible avec IE.
J'ai un peu honte de ma question mais pouvez-vous m'aidez?
Y-a-t-il d'autre solution pour réaliser ce que je souhaite faire?

D'avance merci.
#2
Bonjour,
Quel est le template utilisé par le menu ?
Je chercherais plutot de ce coté là.
#2
Bonjour,
Quel est le template utilisé par le menu ?
Je chercherais plutot de ce coté là.
#3
Le template que j'utilise est "Simplex" et le gabarit du menu est "simple_navigation.tpl"
Le css du menu ressemble à ça :
Code :
/* ------ NAVIGATION ------ */
/* first level */
nav.main-navigation {
    z-index: 990;
    height: 155px;
    line-height: 37px;
}
nav.main-navigation > ul {
    float:right;
    margin-right: 70px;  
    padding: 0
}
nav.main-navigation > ul > li {  
    background: #FF9038;
    float: left;
    padding-top: 55px;
    margin:0 3px;
    height: 155px;
    width: 96px;
    background: transparent url([[$path]]/menu.png) no-repeat 0 0;
    text-align: center;
    list-style: none;  
    position: relative;
}
nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first {
    margin-left: 0;
    list-style: none;
}

nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first a:hover{
    margin-left: 0;
    list-style: none;
}

nav.main-navigation > ul > li:last-child,
nav.main-navigation > ul > li.last {
    margin-right: 0;
}


nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {  
    font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: [[$white]];
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    text-transform: uppercase;
}
/* Second Level */
nav.main-navigation ul li ul {
    top: -999em;
    left: -999em;
    position: absolute;
    display: block;
    height: 0px;
    width: 200px;  
    padding: 10px;
    background: [[$white]];
    background: rgba(255,144,56,.7);
}
nav.main-navigation > ul > li:hover > ul {    
    height: auto;
    z-index: 9999;
    top: 150px;
    right: 0;
    left: auto;
    display: block;
}
nav.main-navigation ul ul li {
    position: relative;
    line-height: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px dotted [[$grey]];
}
/* third level */
nav.main-navigation > ul > li > ul > li:hover > ul {
    height: auto;
    top: 0;
    right: auto;
    left: -210px;
    z-index: 999;    
    display: block
}
/* navigation text color */
nav.main-navigation ul li li a,
nav.main-navigation ul li li.sectionheader span {
    padding: 6px 12px;
    font-family: sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: [[$dark_grey]];
    display: block
}
nav.main-navigation a:hover,
nav.main-navigation a.current,
nav.main-navigation li.sectionheader span:hover,
nav.main-navigation li.sectionheader span.current,
nav.main-navigation li.sectionheader span.parent {
    color: [[$black]]
}
nav.main-navigation ul ul li a:hover,
nav.main-navigation ul ul li a.current {
    color: [[$white]]
}
#3
Le template que j'utilise est "Simplex" et le gabarit du menu est "simple_navigation.tpl"
Le css du menu ressemble à ça :
Code :
/* ------ NAVIGATION ------ */
/* first level */
nav.main-navigation {
    z-index: 990;
    height: 155px;
    line-height: 37px;
}
nav.main-navigation > ul {
    float:right;
    margin-right: 70px;  
    padding: 0
}
nav.main-navigation > ul > li {  
    background: #FF9038;
    float: left;
    padding-top: 55px;
    margin:0 3px;
    height: 155px;
    width: 96px;
    background: transparent url([[$path]]/menu.png) no-repeat 0 0;
    text-align: center;
    list-style: none;  
    position: relative;
}
nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first {
    margin-left: 0;
    list-style: none;
}

nav.main-navigation > ul > li:first-child,
nav.main-navigation > ul > li.first a:hover{
    margin-left: 0;
    list-style: none;
}

nav.main-navigation > ul > li:last-child,
nav.main-navigation > ul > li.last {
    margin-right: 0;
}


nav.main-navigation > ul > li > a,
nav.main-navigation > ul > li.sectionheader span {  
    font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: [[$white]];
    text-decoration: none;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    text-transform: uppercase;
}
/* Second Level */
nav.main-navigation ul li ul {
    top: -999em;
    left: -999em;
    position: absolute;
    display: block;
    height: 0px;
    width: 200px;  
    padding: 10px;
    background: [[$white]];
    background: rgba(255,144,56,.7);
}
nav.main-navigation > ul > li:hover > ul {    
    height: auto;
    z-index: 9999;
    top: 150px;
    right: 0;
    left: auto;
    display: block;
}
nav.main-navigation ul ul li {
    position: relative;
    line-height: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px dotted [[$grey]];
}
/* third level */
nav.main-navigation > ul > li > ul > li:hover > ul {
    height: auto;
    top: 0;
    right: auto;
    left: -210px;
    z-index: 999;    
    display: block
}
/* navigation text color */
nav.main-navigation ul li li a,
nav.main-navigation ul li li.sectionheader span {
    padding: 6px 12px;
    font-family: sans-serif;
    text-transform: none;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    color: [[$dark_grey]];
    display: block
}
nav.main-navigation a:hover,
nav.main-navigation a.current,
nav.main-navigation li.sectionheader span:hover,
nav.main-navigation li.sectionheader span.current,
nav.main-navigation li.sectionheader span.parent {
    color: [[$black]]
}
nav.main-navigation ul ul li a:hover,
nav.main-navigation ul ul li a.current {
    color: [[$white]]
}
#4
Salut,

Rien de tel qu'une url ou chacun aura le loisir de regarder ou se trouverait l'erreur et te filer un coup de main.

Avec des outils comme Firebug ou les débogueurs des autres navigateurs, ca irait beaucoup plus vite que de se creuser la tête sur un bout de code...
www.web-ep.be - Développeur Web Freelance - Développeur/Intégrateur CMS Made Simple (création de sites, développement de modules/plugins/templates sur mesure), spécialisé dans les sites pour l'immobilier.
#4
Salut,

Rien de tel qu'une url ou chacun aura le loisir de regarder ou se trouverait l'erreur et te filer un coup de main.

Avec des outils comme Firebug ou les débogueurs des autres navigateurs, ca irait beaucoup plus vite que de se creuser la tête sur un bout de code...
www.web-ep.be - Développeur Web Freelance - Développeur/Intégrateur CMS Made Simple (création de sites, développement de modules/plugins/templates sur mesure), spécialisé dans les sites pour l'immobilier.
#5
Bonjour,

Le problème est que le site est en local donc je ne peux pas donner d'url.
Et même avec l'aide de Firebug impossible de trouver où modifier juste le texte que je souhaite.

Je continue mes recherches...
#5
Bonjour,

Le problème est que le site est en local donc je ne peux pas donner d'url.
Et même avec l'aide de Firebug impossible de trouver où modifier juste le texte que je souhaite.

Je continue mes recherches...
#6
Heriquet a raison, il est impossible de de t'aider sans un lien.
Il me semble avoir vu qu'il fallait que le rotate soit sur un élément de type block-level elements, inline-table ou inline-block, essaye en ajoutant display:inline-block;
#6
Heriquet a raison, il est impossible de de t'aider sans un lien.
Il me semble avoir vu qu'il fallait que le rotate soit sur un élément de type block-level elements, inline-table ou inline-block, essaye en ajoutant display:inline-block;
#7
Et également, tu peux essayer a:first-child ou a:first-of-type
#7
Et également, tu peux essayer a:first-child ou a:first-of-type
#8
Oh merci Jean le Chauve (les autres aussi ^^) il manquait juste la petite ligne qui va bien!
Bon maintenant ça n'a pas l'air d'être génial sous IE mais j'ai au moins une base sur quoi travailler.
Encore merci Big Grin
#8
Oh merci Jean le Chauve (les autres aussi ^^) il manquait juste la petite ligne qui va bien!
Bon maintenant ça n'a pas l'air d'être génial sous IE mais j'ai au moins une base sur quoi travailler.
Encore merci Big Grin
#9
Laure_21 a écrit :il manquait juste la petite ligne qui va bien!
Et c'était laquelle ?
#9
Laure_21 a écrit :il manquait juste la petite ligne qui va bien!
Et c'était laquelle ?
#10
J'ai rajouté display:inline-block;
Du coup j'ai bien mon texte à la verticale et le sous-menu lui reste horizontal.
Bon par contre le texte c'est mis un peu n'importe comment dans mon menu mais bon je regarde comment bidouiller mais c'est pas gagné Sad j'espère quand même trouver une solution pour que tout ceci soit fonctionnel
#10
J'ai rajouté display:inline-block;
Du coup j'ai bien mon texte à la verticale et le sous-menu lui reste horizontal.
Bon par contre le texte c'est mis un peu n'importe comment dans mon menu mais bon je regarde comment bidouiller mais c'est pas gagné Sad j'espère quand même trouver une solution pour que tout ceci soit fonctionnel
#11
Je crois que ce lien te sera très utile : http://www.alsacreations.com/astuce/lire...ables.html
#11
Je crois que ce lien te sera très utile : http://www.alsacreations.com/astuce/lire...ables.html
#12
Merci, je vais potasser tout ça de suite !
#12
Merci, je vais potasser tout ça de suite !


Atteindre :


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