Forum CMS Made Simple FR › Général › Graphisme v
[Résolu]Ecrire le menu à la verticale

[Résolu]Ecrire le menu à la verticale

Sujet fermé 
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#1
04/02/2013, 11:56:14 (Modification du message : 04/02/2013, 12:57:19 par Laure_21.)
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.
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#1
04/02/2013, 11:56:14 (Modification du message : 04/02/2013, 12:57:19 par Laure_21.)
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.
Trouver
helazo Hors ligne
Membre
***
Messages : 128
Sujets : 16
Inscription : Dec 2008
Réputation : 0
#2
04/02/2013, 12:31:59
Bonjour,
Quel est le template utilisé par le menu ?
Je chercherais plutot de ce coté là.
Trouver
helazo Hors ligne
Membre
***
Messages : 128
Sujets : 16
Inscription : Dec 2008
Réputation : 0
#2
04/02/2013, 12:31:59
Bonjour,
Quel est le template utilisé par le menu ?
Je chercherais plutot de ce coté là.
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#3
04/02/2013, 12:40:55
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]]
}
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#3
04/02/2013, 12:40:55
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]]
}
Trouver
heriquet Hors ligne
Administrateur
*******
Messages : 1,975
Sujets : 81
Inscription : Jan 2009
Réputation : 0
#4
04/02/2013, 12:41:24
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.
Site web Trouver
heriquet Hors ligne
Administrateur
*******
Messages : 1,975
Sujets : 81
Inscription : Jan 2009
Réputation : 0
#4
04/02/2013, 12:41:24
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.
Site web Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#5
04/02/2013, 12:49:10
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...
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#5
04/02/2013, 12:49:10
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...
Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#6
04/02/2013, 12:50:54
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;
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#6
04/02/2013, 12:50:54
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;
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#7
04/02/2013, 12:53:56
Et également, tu peux essayer a:first-child ou a:first-of-type
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#7
04/02/2013, 12:53:56
Et également, tu peux essayer a:first-child ou a:first-of-type
Tutoriels vidéos cmsms
Site web Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#8
04/02/2013, 12:56:19
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
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#8
04/02/2013, 12:56:19
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
Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#9
04/02/2013, 13:38:01
Laure_21 a écrit :il manquait juste la petite ligne qui va bien!
Et c'était laquelle ?
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#9
04/02/2013, 13:38:01
Laure_21 a écrit :il manquait juste la petite ligne qui va bien!
Et c'était laquelle ?
Tutoriels vidéos cmsms
Site web Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#10
04/02/2013, 17:12:13 (Modification du message : 04/02/2013, 17:12:58 par 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é Sad j'espère quand même trouver une solution pour que tout ceci soit fonctionnel
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#10
04/02/2013, 17:12:13 (Modification du message : 04/02/2013, 17:12:58 par 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é Sad j'espère quand même trouver une solution pour que tout ceci soit fonctionnel
Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#11
04/02/2013, 17:20:13
Je crois que ce lien te sera très utile : http://www.alsacreations.com/astuce/lire...ables.html
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#11
04/02/2013, 17:20:13
Je crois que ce lien te sera très utile : http://www.alsacreations.com/astuce/lire...ables.html
Tutoriels vidéos cmsms
Site web Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#12
04/02/2013, 17:25:05
Merci, je vais potasser tout ça de suite !
Trouver
Laure_21 Hors ligne
Membre
***
Messages : 187
Sujets : 16
Inscription : Jan 2011
Réputation : 0
#12
04/02/2013, 17:25:05
Merci, je vais potasser tout ça de suite !
Trouver
Sujet fermé 


Atteindre :


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