[Laure_21]

#~~~~~ 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.

[helazo]

Bonjour,
Quel est le template utilisé par le menu ?
Je chercherais plutot de ce coté là.

[Laure_21]

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]]
}

[heriquet]

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...

[Laure_21]

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...

[Jean le Chauve]

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;

[Jean le Chauve]

Et également, tu peux essayer a:first-child ou a:first-of-type

[Laure_21]

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

[Jean le Chauve]

il manquait juste la petite ligne qui va bien!

Et c'était laquelle ?

[Laure_21]

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é j'espère quand même trouver une solution pour que tout ceci soit fonctionnel

[Jean le Chauve]

Je crois que ce lien te sera très utile : http://www.alsacreations.com/astuce/lire...ables.html

[Laure_21]

Merci, je vais potasser tout ça de suite !