Forum : Erreur étrange menu Bouton vertical

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

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.

Genki

Réponse acceptée

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;

Genki

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

Auteur

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é

si j'enlève en plus le transforme:rotate(203deg) sa reviens horizontal (normal) sans retournement + le text corrèctement placé

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.

SirPixel

Auteur

Merci effectivement c'était tout bête.

Erreur étrange menu Bouton vertical

4 réponses