positionnez barre de navigation oblique

[Kuze]

bonjour a tous,
Je suis entrain de refaire le graphisme de mon forum et je cherche a positionnez ma barre de navigation en oblique, voila une image :

Merci

[stefou]

Bonjour,

Pour le rotation

Code:

transform:rotate(5deg);
-ms-transform:rotate(5deg); /* IE 9 */
-webkit-transform:rotate(5deg); /* Opera, Chrome, and Safari */

[Kuze]

Bonjour,

Super ces du rapide merci à toi, pour le rotation dans l'autre sense !

[Neptunia]

Bonjour ^^


Pourquoi passer par du CSS qui ne sera reconnu que sur les navigateurs récents ?

Il suffit de créer la barre de navigation de façon oblique et de la découper. Chaque image fera la même hauteur mais un fond transparent donnera l'illusion que les boutons sont de hauteur différente.

Un exemple ici
-> http://demo.nicetheme.com/forum?theme_id=137232

[Kuze]

Merci à toi Neptune-, mais le code css que ma donnez stefou fonctionne très bien ce juste que l`oblique monte a droite au lieu de gauche.

[Kuze]

Voila le lien de mon forum teste :

[stefou]

Ce que Neptune dit est vrais, ce code fonctionne pas sur certains anciens navigateur...

Si non en toute logique il suffit de passer la valeur en négatif pour inverser le sens de rotation.

Code:

        transform:rotate(-5deg);
        -ms-transform:rotate(-5deg); /* IE 9 */
        -webkit-transform:rotate(-5deg); /* Opera, Chrome, and Safari */

[Kuze]

J`ai pourtant comme navigateur Safari.

[Neptunia]

Ma remarque vise surtout les utilisateurs de Windows XP (encore très nombreux, voire majoritaires) qui sont limités à IE8 s'ils sont attachés à ce navigateur (cas typique des personnes les moins avancées en informatique).

[Kuze]

Je vais faire comme tu me la conseiller Neptune même avec le - ça ne va toujours pas, le probleme ces que je ne suis pas doué en code de barre de navigation, merci à vous 2 pour votre aide.

[stefou]

Tu peux aussi passer la valeur à 355 degré

[Kuze]

Non toujours rien ne change Stefou.

[Neptunia]

Peux tu nous fournir ta feuille CSS ?

[Kuze]

Bonjour,
Oui bien sur :

[stefou]

Il manque un petit truc   

Code:

transform:rotate(-5deg);
        -ms-transform:rotate(-5deg); /* IE 9 */
        -webkit-transform:rotate(-5deg); /* Opera, Chrome, and Safari */

[Kuze]

Euh.. il y es Stefou et tout premier dans le code css.

[stefou]

C'est le code pour la rotation, il manque la class, et les {} si tu ne lui dit pas ou ce code doit agir il ne fera rien...  

[Kuze]

HAAAAA je suis crétin si je fait moi des conneries il es vrais que ça ne va pas fonctionnez    


Alors comme ça :

Code:

a.mainmenu{
        transform:rotate(-955deg);
                -ms-transform:rotate(-955deg); /* IE 9 */
                -webkit-transform:rotate(-955deg); /* Opera, Chrome, and Safari */
}

[stefou]

Ce serai plutôt un truc comme

Code:

.mainmenu{transform:rotate(5deg);
                -ms-transform:rotate(5deg); /* IE 9 */
-webkit-transform:rotate(5deg); /* Opera, Chrome, and Safari */}

le css ne correspond pas à du phpbb2
Cette partie est pour phpbb3

Code:

#wrap {
          min-width: 0;
          overflow:hidden;
        }   

[Kuze]

Non ça ne change toujours rien  

[stefou]

Exacte cela agit sur la pub.
ceci agit sur le menu

Code:

 .bodyline > table:nth-child(2) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) {transform:rotate(5deg);
                        -ms-transform:rotate(5deg); /* IE 9 */
        -webkit-transform:rotate(5deg); /* Opera, Chrome, and Safari */}

[Kuze]

Hooo magnifique ça marche parfaitement, un grand grand merci à toi pour le temps que tu m`as consacré