Erreur étrange menu Bouton vertical

Par SirPixel, il y a 10 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

J'ai réalisé un menu vertical et une fois affiché sur mon site le navigateur s'amuse a me faiire du verlan (il m'affiche les mots dans le désordre).
Voici une image pour mieux exprimer mon problème

http://pre-devis.dercourtalexis.fr/Images/boutonBizar.png

css : .verticalRight{ float: right; margin: 20px -70px 20px 0; height: 112px; -ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transition: All 0.6s; -moz-transition: All 0.6s; -ms-transition: All 0.6s; -o-transition: All 0.6s; transition: All 0.6s; } Html <ul id="pieceCreer"> <aside class="menuTitle verticalRight"><h5>Pièce à créer</h5></aside> <article class="belge"> <li> <a href="#" data-width="920" data-rel="popup_Autres" class="poplight btn btn-success Bouton_secondaire font_size12pt" >Autres</a> </li> </article> </ul>

J'aimerais que les mot du dernière onglet soit dans l'ordre "Piece à créer" au lieu de "créer Piece à".

Une erreur certainement simple, mais trop simple pour être vu.

Merci d'avance pour votre aide.

4 réponses

Genki, il y a 10 ans

Et si tu enlèves ça, qu'est ce que ça donne ?

-ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr;
SirPixel, il y a 10 ans

Si j'enlève

-ms-writing-mode: tb-lr; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr;

mon text se re met horizontal (normal) met a retourné + le text corrèctement placé
http://pre-devis.dercourtalexis.fr/Images/menuBiz.png
si j'enlève en plus le transforme:rotate(203deg) sa reviens horizontal (normal) sans retournement + le text corrèctement placé
http://pre-devis.dercourtalexis.fr/Images/menuBiz2.png

Donc oui sa corrige le problème des mots a l'envère mais sa retire mon effet menu vertical.
aussi je ne comprend pas pouquoi cela ne se produit que sur le dernière bouton.
le premier a le meme css vu que j'ai appliqué la meme class partout et il fonctionne bien
le dernier le texte est inversé.

Je peux aussi utiliser le système "D" et mettre le text a l'envers dans mon code et cela résoud le problème mais ma curiosité me pousse a chercher l'erreur.

voici un accès à la page http://pre-devis.dercourtalexis.fr/?page=Selection_piece2

Ce lien mène a une copie du site en cour de dévellopement, il est inutile d'utiiliser les liens, de s'inscrire, se connecter ou tout autre action dynamique qui a de forte chance de ne pas fonctionner.

Genki, il y a 10 ans

C'était plus facile effectivement en mettant le lien direct. Suffit s'implement de changer l'ordre, c'est à cause du float: right qui va du coup mettre tous les textes orientés de la droite vers la gauche. Suffit d'inverser ça comme tel :

// lr --> rl pour right to left. -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; writing-mode: vertical-rl;
SirPixel, il y a 10 ans

Merci effectivement c'était tout bête.