Menu rotatif incompatible avec IE

Fermé
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 - 22 janv. 2015 à 11:47
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 - 23 janv. 2015 à 12:15
Bonjour,

J'ai trouvé ICI un menu en html/css que je trouve intéressant à retravailler pour un site perso.

Cependant, il n'est pas compatible avec Internet Explorer (j'ai testé sur IE9).

Y a t'il un moyen de le rendre compatible?

Merci par avance.

Pour info, voici les codes de mes deux pages :
index.html
<!-- Copyright du menu cf design.css -->

<html>
<head>
    <link rel="stylesheet" href="design.css" />
    <title>Menu</title>

</head>
<body>
    <div id="menu">
        <table>
            <tr>
                <td width="250px">
                    <dl class="blue">
                         <dt class="btnRot">Langages</dt>
                         <dd><a href="">...</a></dd>
                         <dd><a href="">Web</a></dd>
                         <dd><a href="">Dot.net</a></dd>
                         <dd><a href="">Java</a></dd> 
                    </dl>
                </td>
                <td width="200px">
                    <dl class="orange">
                         <dt class="btnRot">Nick Adna</dt>
                         <dd><a href="">...</a></dd>
                         <dd><a href="">Loisirs</a></dd>
                         <dd><a href="">Parcours</a></dd>
                         <dd><a href="">Domaines</a></dd> 
                    </dl>
                </td>    
                <td width="200px">
                    <dl class="green">
                         <dt class="btnRot">Partagez</dt>
                         <dd><a href="">...</a></dd>
                         <dd><a href="">Delicious</a></dd>
                         <dd><a href="">Facebook</a></dd>
                         <dd><a href="">Twitter</a></dd> 
                    </dl>
                </td>    
            </tr>
        </table>

        <div class="masque"></div>
        <div class="ombre"></div>
    </div>
</body>
</html>


design.css
/*    @author : Nick Adna    	*/
/*    @editor : sublime text 3  */


        #menu{
        height:360px;
        font-family:"TeXGyreReg",sans-serif;
        font-size:1.05em;
        background:#627878;
        }

        #menu dl {
        position:relative;
        top:15px;
        left:100%;margin-left:-75px;
        width:150px;
        height:155px;
        color:#324040;
        text-align:center;
        border-radius:4px;
        -webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.7);
        box-shadow:0px 0px 6px rgba(0,0,0,0.7);
        -webkit-transform-origin:50% 120px;
        -moz-transform-origin:50% 120px;
        -ms-transform-origin:50% 120px;
        -o-transform-origin:50% 120px;
        transform-origin:50% 120px; 
        -webkit-animation:bounceOut 0.7s ease-in-out;
        -moz-animation:bounceOut 0.7s ease-in-out;
        -ms-animation:bounceOut 0.7s ease-in-out;
        -o-animation:bounceOut 0.7s ease-in-out;
        animation:bounceOut 0.7s ease-in-out;
        }

        .blue
        {
            background:#04b3d2;
            background:-webkit-linear-gradient(#04b3d2,#48dfff);
            background:-moz-linear-gradient(#04b3d2,#48dfff);
            background:-ms-linear-gradient(#04b3d2,#48dfff);
            background:-o-linear-gradient(#04b3d2,#48dfff);
            background:linear-gradient(#04b3d2,#48dfff);
        }

        .orange
        {
            background: orange;
        }

        .green
        {
            background: #9cc64c;
        }

        #menu dt{
        position:absolute;
        bottom:0px;
        width:100%;
        height:30px;
        padding-top:5px;
        }

        #menu dd{
        -webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
        }

        #menu dd a{
        display:block;
        height:24px;
        padding:3px 0px;
        color:#324040;
        text-decoration:none;
        }

        #menu dd a:hover{
        background:rgba(255,255,255,0.1);
        }

        #menu dl:hover{
        -webkit-transform:rotate(-180deg);
        -moz-transform:rotate(-180deg);
        -mstransform:rotate(-180deg);
        -o-transform:rotate(-180deg);
        transform:rotate(-180deg);
        -webkit-animation:bounceIn 0.7s ease-in-out;
        -moz-animation:bounceIn 0.7s ease-in-out;
        -ms-animation:bounceIn 0.7s ease-in-out;
        -o-animation:bounceIn 0.7s ease-in-out;
        animation:bounceIn 0.7s ease-in-out;
        }

        @-webkit-keyframes bounceIn {
        from {-webkit-transform:rotate(0deg);}
        75%{-webkit-transform:rotate(-200deg);}
        90%{-webkit-transform:rotate(-175deg);}
        to {-webkit-transform:rotate(-180deg);}
        }
        @-webkit-keyframes bounceOut {
        from {-webkit-transform:rotate(-360deg);}
        0% {-webkit-transform:rotate(-180deg);}
        10%{-webkit-transform:rotate(-160deg);}
        to {-webkit-transform:rotate(-360deg);}
        }
        @-moz-keyframes bounceIn {
        from {-moz-transform:rotate(0deg);}
        75%{-moz-transform:rotate(-200deg);}
        90%{-moz-transform:rotate(-175deg);}
        to {-moz-transform:rotate(-180deg);}
        }
        @-moz-keyframes bounceOut {
        from {-moz-transform:rotate(-360deg);}
        0% {-moz-transform:rotate(-180deg);}
        10%{-moz-transform:rotate(-160deg);}
        to {-moz-transform:rotate(-360deg);}
        }
        @-ms-keyframes bounceIn {
        from {-ms-transform:rotate(0deg);}
        75%{-ms-transform:rotate(-200deg);}
        90%{-ms-transform:rotate(-175deg);}
        to {-ms-transform:rotate(-180deg);}
        }
        @-ms-keyframes bounceOut {
        from {-ms-transform:rotate(-360deg);}
        0% {-ms-transform:rotate(-180deg);}
        10%{-ms-transform:rotate(-160deg);}
        to {-ms-transform:rotate(-360deg);}
        }
        @-o-keyframes bounceIn {
        from {-o-transform:rotate(0deg);}
        75%{-o-transform:rotate(-200deg);}
        90%{-o-transform:rotate(-175deg);}
        to {-o-transform:rotate(-180deg);}
        }
        @-o-keyframes bounceOut {
        from {-o-transform:rotate(-360deg);}
        0% {-o-transform:rotate(-180deg);}
        10%{-o-transform:rotate(-160deg);}
        to {-o-transform:rotate(-360deg);}
        }
        @keyframes bounceIn {
        from {transform:rotate(0deg);}
        75%{transform:rotate(-200deg);}
        90%{transform:rotate(-175deg);}
        to {transform:rotate(-180deg);}
        }
        @keyframes bounceOut {
        from {transform:rotate(-360deg);}
        0% {transform:rotate(-180deg);}
        10%{transform:rotate(-160deg);}
        to {transform:rotate(-360deg);}
        }

        #menu .masque{
        position:absolute;
        z-index:50;
        width:800px;
        height:145px;
        top:0;left:0;
        background:#627878;
        background:-webkit-linear-gradient(#324040,#627878);
        background:-moz-linear-gradient(#324040,#627878);
        background:-ms-linear-gradient(#324040,#627878);
        background:-o-linear-gradient(#324040,#627878);
        background:linear-gradient(#324040,#627878);

        }

        #menu .ombre{
        position:absolute;
        z-index:40;
        width:650px;
        height:6px;
        top:133px;
        margin-top:-103px;
        left:142px;
        -webkit-box-shadow:0px 115px 3px black; 
        box-shadow:0px 110px 3px black;
        border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
        }



A voir également:

4 réponses

Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
22 janv. 2015 à 13:45
MSIE9 ne connaît toutes les subtilités du CSS3.
Teste sur MSIE 11, ça devrait passer.

Si tu tiens absolument à ce que ça tourne sous la v9, t'es obligé de passer par du javascript, et y'a moyen que tu galères.
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
22 janv. 2015 à 13:52
Salut kopros,

MSIE9 ne connaît toutes les subtilités du CSS3.

En effet...
Le sujet ici est que le site doit être visible par tous. Donc compatible avec un maximum de navigateurs.
Or IE8, 9 et même les précédents continuent d'être pas mal utilisés.

Outre le javascript, que je ne connais pas du tout du tout, n'existe t'il pas un moyen d'aiguiller le navigateur, s'il s'agit d'un "ancien", qui ne comprend pas la norme css3, vers une autre feuille CSS?

Du style, dans le html :

<head>
If IE8, IE9, Firefox1, etc
<link rel="stylesheet" href="vieuxdesign.css" />
Else
<link rel="stylesheet" href="design.css" />
<title>Menu</title>
</head>


Quitte à ce que cette fonctionnalité (la rotation) ne soit accessible qu'aux internautes possédant des navigateurs récents et que les autres aient un menu déroulant horizontal en CSS tout bête...
0
Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89 > pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024
22 janv. 2015 à 14:10
Oui ça c'est possible grâce aux classes conditionnelles : https://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html

Ca marche que pour IE jusqu'à la version 10, et pas pour la 11.
Pour les autres navigateurs, pas de classe conditionnelle. Tu peux toujours rechercher des hacks css, mais c'est pas propre, c'est lourd, et y'en a pas pour tout.

Par contre je viens de trouver des scripts tout fait en js pour que les vieux IE prennent en compte le css "normal", je sais pas si ça fait tout le css3, c'est à tester : https://code.google.com/archive/p/ie7-js

Concernant les mises à jour des navigateurs, la plupart du temps ils la font automatiquement, donc on a pas trop à se soucier des vieilles versions.
Pour IE, ça vient avec les MàJ Windows, donc c'est sensé aussi être à jour. Ya que sous XP qui ne peut pas aller au delà de MSIE 8. Donc à la limite, tu te concentres + sur cette version là.
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744 > Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020
Modifié par pijaku le 22/01/2015 à 14:28
En fait, oui, mais non...
Les classes conditionnelles ne peuvent pas fonctionner dans mon cas car le html contient des balises que ne peuvent pas interpréter les navigateurs IE < 11. dl, dd notamment. <section> peut être remplacé par <div> facilement, mais pour <dt>, <dl> et <dd> je ne sais pas...

En ce qui concerne le .js ça n'a pas l'air de fonctionner. J'ai testé avec IE9, même affichage tout pourri...

J'en suis là.

Peut être que la solution serait l'utilisation de la classe conditionnelle jumelée avec la création du code html via php, avec deux codes différents selon les navigateurs.
Un peu comme ceci :
<head>
    <!--[if IE]>
        <link rel="stylesheet" href="styles-ie.css" media="screen">
    <![endif]-->
    <link rel="stylesheet" href="design.css" />
    <title>Menu</title>
</head>
<body>
<? If Not IE
Echo :
    <div id="menu">
    <!-- Maximum 4 dd par dl -->
        <table>
            <tr>
                <td width="250px">
                    <dl class="blue">
                         <dt class="btnRot">Multimédias</dt>
                         <dd><a href="">Photos</a></dd>
                         <dd><a href="">Vidéos</a></dd>
                         <dd><a href="">Audio</a></dd>
                    </dl>
                </td>
            </tr>
        </table>
    </div>

If IE
Echo
    <div id="menu">
    <!-- Maximum 4 dd par dl -->
        <table>
            <tr>
                <td width="250px">
                    <ul class="blue">
                         <li class="btnRot">Multimédias</li>
                         <li><a href="">Photos</a></li>
                         <li><a href="">Vidéos</a></li>
                         <li><a href="">Audio</a></li>
                    </li>
                </td>
            </tr>
        </table>
    </div>
</php>
</body>
0
Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89 > pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024
22 janv. 2015 à 14:40
Oui c'est une possibilité.
Pour le php ya la solution ici : https://stackoverflow.com/questions/5302302/php-if-internet-explorer-6-7-8-or-9
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744 > Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020
22 janv. 2015 à 14:42
Oula c'est violent le php...

Bon, ben merci de ton aide.
En fait, j'ai deux choix aujourd'hui :
- apprendre le minimum vital de php pour faire ce que je veux,
ou
- changer d'idée pour le menu...

En tout cas, merci. Si je chiosi le choix 1 et que j'y parviens, je reviendrais poster le code.
Sinon, ... @+
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
22 janv. 2015 à 15:57
Bon.
Le résultat de mes tests n'est pas concluant.
J'avance toutefois...
J'ai testé ceci, mais les progrès réussi sur IE ont tout pourri l'affichage sous Firefox...
index.html
<html>
<head>
    <!--[if IE]>
        <link rel="stylesheet" href="design-ie.css" media="screen" />
    <![endif]-->
    <!--[if !IE]>
        <link rel="stylesheet" href="design.css" />
    <![endif]-->
    <title>Menu</title>
</head>
<body>    

<!--[if !IE]>
    <div id="menu">
			 <!-- Maximum 4 dd par dl -->
        <table>
            <tr>
                <td width="250px">
                    <dl class="blue">
                         <dt class="btnRot">Multimédias</dt>
                         <dd><a href="">Photos</a></dd>
                         <dd><a href="">Vidéos</a></dd>
                         <dd><a href="">Audio</a></dd>
                    </dl>
                </td>
                <td width="200px">
                    <dl class="orange">
                         <dt class="btnRot">A propos</dt>
                         <dd><a href="">Musiciens</a></dd>
                         <dd><a href="">événements</a></dd>
                         <!-- <dd><a href=""></a></dd> -->
                         <dd><a href="">Le groupe</a></dd> 
                    </dl>
                </td>    
                <td width="200px">
                    <dl class="green">
                         <dt class="btnRot">Contacts</dt>
                         <dd><a href="">Livre d'or</a></dd>
                         <dd><a href="">Facebook</a></dd>
                         <dd><a href="">Formulaire</a></dd>
                         <dd><a href="">Adresses</a></dd> 
                    </dl>
                </td>    
            </tr>
        </table>

        <div class="masque"></div>
        <div class="ombre"></div>
    </div>
<![endif]-->

<!--[if IE]>
    <ul id="menu">
	<li><a>Multimédias</a>
	    <ul>
		<li><a href="">Photos</a></li>
		<li><a href="">Vidéos</a></li>
		<li><a href="">Audio</a></li>
	    </ul>
	</li>
	<li><a>A propos</a>
	    <ul>
		<li><a href="">Musiciens</a></li>
		<li><a href="">événements</a></li>
		<li><a href="">Le groupe</a></li> 
	    </ul>
	</li>
	<li><a>Contacts</a>
	    <ul>
		<li><a href="">Livre d'or</a></li>
		<li><a href="">Facebook</a></li>
		<li><a href="">Formulaire</a></li>
		<li><a href="">Adresses</a></li> 
	    </ul>
	</li>
    </ul>
<![endif]-->
</body>
</html>


design.css
#menu{
        height:360px;
        font-family:"TeXGyreReg",sans-serif;
        font-size:1.05em;
        background:#627878;
        }

        #menu dl {
        position:relative;
        top:15px;
        left:100%;margin-left:-75px;
        width:150px;
        height:155px;
        color:#324040;
        text-align:center;
        border-radius:4px;
        -webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.7);
        box-shadow:0px 0px 6px rgba(0,0,0,0.7);
        -webkit-transform-origin:50% 120px;
        -moz-transform-origin:50% 120px;
        -ms-transform-origin:50% 120px;
        -o-transform-origin:50% 120px;
        transform-origin:50% 120px; 
        -webkit-animation:bounceOut 0.7s ease-in-out;
        -moz-animation:bounceOut 0.7s ease-in-out;
        -ms-animation:bounceOut 0.7s ease-in-out;
        -o-animation:bounceOut 0.7s ease-in-out;
        animation:bounceOut 0.7s ease-in-out;
        }

        .blue
        {
            background:#04b3d2;
            background:-webkit-linear-gradient(#04b3d2,#48dfff);
            background:-moz-linear-gradient(#04b3d2,#48dfff);
            background:-ms-linear-gradient(#04b3d2,#48dfff);
            background:-o-linear-gradient(#04b3d2,#48dfff);
            background:linear-gradient(#04b3d2,#48dfff);
        }

        .orange
        {
            background: orange;
        }

        .green
        {
            background: #9cc64c;
        }

        #menu dt{
        position:absolute;
        bottom:0px;
        width:100%;
        height:30px;
        padding-top:5px;
        }

        #menu dd{
        -webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
        }

        #menu dd a{
        display:block;
        height:24px;
        padding:3px 0px;
        color:#324040;
        text-decoration:none;
        }

design-ie.css

/* http://openclassrooms.com/courses/creer-un-menu-horizontal-deroulant-en-css */
#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #000; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 144px; /* largeur */
}
#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 144px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Éléments de sous-listes */
{
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul 
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ 
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */      
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
0
Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020 89
22 janv. 2015 à 16:26
C'est normal qu'il n'y ait plus les media queries (les lignes qui commencent par @) dans le dernier design.css ?
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744 > Kopros Messages postés 597 Date d'inscription mardi 25 septembre 2007 Statut Membre Dernière intervention 3 février 2020
22 janv. 2015 à 16:27
Elles y sont toujours dans le fichier.
Erreur de copié-collé...
/*    @author : Nick Adna    	*/
/*    @editor : sublime text 3  */


        #menu{
        height:360px;
        font-family:"TeXGyreReg",sans-serif;
        font-size:1.05em;
        background:#627878;
        }

        #menu dl {
        position:relative;
        top:15px;
        left:100%;margin-left:-75px;
        width:150px;
        height:155px;
        color:#324040;
        text-align:center;
        border-radius:4px;
        -webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.7);
        box-shadow:0px 0px 6px rgba(0,0,0,0.7);
        -webkit-transform-origin:50% 120px;
        -moz-transform-origin:50% 120px;
        -ms-transform-origin:50% 120px;
        -o-transform-origin:50% 120px;
        transform-origin:50% 120px; 
        -webkit-animation:bounceOut 0.7s ease-in-out;
        -moz-animation:bounceOut 0.7s ease-in-out;
        -ms-animation:bounceOut 0.7s ease-in-out;
        -o-animation:bounceOut 0.7s ease-in-out;
        animation:bounceOut 0.7s ease-in-out;
        }

        .blue
        {
            background:#04b3d2;
            background:-webkit-linear-gradient(#04b3d2,#48dfff);
            background:-moz-linear-gradient(#04b3d2,#48dfff);
            background:-ms-linear-gradient(#04b3d2,#48dfff);
            background:-o-linear-gradient(#04b3d2,#48dfff);
            background:linear-gradient(#04b3d2,#48dfff);
        }

        .orange
        {
            background: orange;
        }

        .green
        {
            background: #9cc64c;
        }

        #menu dt{
        position:absolute;
        bottom:0px;
        width:100%;
        height:30px;
        padding-top:5px;
        }

        #menu dd{
        -webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
        }

        #menu dd a{
        display:block;
        height:24px;
        padding:3px 0px;
        color:#324040;
        text-decoration:none;
        }

        #menu dd a:hover{
        background:rgba(255,255,255,0.1);
        }

        #menu dl:hover{
        -webkit-transform:rotate(-180deg);
        -moz-transform:rotate(-180deg);
        -mstransform:rotate(-180deg);
        -o-transform:rotate(-180deg);
        transform:rotate(-180deg);
        -webkit-animation:bounceIn 0.7s ease-in-out;
        -moz-animation:bounceIn 0.7s ease-in-out;
        -ms-animation:bounceIn 0.7s ease-in-out;
        -o-animation:bounceIn 0.7s ease-in-out;
        animation:bounceIn 0.7s ease-in-out;
        }

        @-webkit-keyframes bounceIn {
        from {-webkit-transform:rotate(0deg);}
        75%{-webkit-transform:rotate(-200deg);}
        90%{-webkit-transform:rotate(-175deg);}
        to {-webkit-transform:rotate(-180deg);}
        }
        @-webkit-keyframes bounceOut {
        from {-webkit-transform:rotate(-360deg);}
        0% {-webkit-transform:rotate(-180deg);}
        10%{-webkit-transform:rotate(-160deg);}
        to {-webkit-transform:rotate(-360deg);}
        }
        @-moz-keyframes bounceIn {
        from {-moz-transform:rotate(0deg);}
        75%{-moz-transform:rotate(-200deg);}
        90%{-moz-transform:rotate(-175deg);}
        to {-moz-transform:rotate(-180deg);}
        }
        @-moz-keyframes bounceOut {
        from {-moz-transform:rotate(-360deg);}
        0% {-moz-transform:rotate(-180deg);}
        10%{-moz-transform:rotate(-160deg);}
        to {-moz-transform:rotate(-360deg);}
        }
        @-ms-keyframes bounceIn {
        from {-ms-transform:rotate(0deg);}
        75%{-ms-transform:rotate(-200deg);}
        90%{-ms-transform:rotate(-175deg);}
        to {-ms-transform:rotate(-180deg);}
        }
        @-ms-keyframes bounceOut {
        from {-ms-transform:rotate(-360deg);}
        0% {-ms-transform:rotate(-180deg);}
        10%{-ms-transform:rotate(-160deg);}
        to {-ms-transform:rotate(-360deg);}
        }
        @-o-keyframes bounceIn {
        from {-o-transform:rotate(0deg);}
        75%{-o-transform:rotate(-200deg);}
        90%{-o-transform:rotate(-175deg);}
        to {-o-transform:rotate(-180deg);}
        }
        @-o-keyframes bounceOut {
        from {-o-transform:rotate(-360deg);}
        0% {-o-transform:rotate(-180deg);}
        10%{-o-transform:rotate(-160deg);}
        to {-o-transform:rotate(-360deg);}
        }
        @keyframes bounceIn {
        from {transform:rotate(0deg);}
        75%{transform:rotate(-200deg);}
        90%{transform:rotate(-175deg);}
        to {transform:rotate(-180deg);}
        }
        @keyframes bounceOut {
        from {transform:rotate(-360deg);}
        0% {transform:rotate(-180deg);}
        10%{transform:rotate(-160deg);}
        to {transform:rotate(-360deg);}
        }

        #menu .masque{
        position:absolute;
        z-index:50;
        width:800px;
        height:145px;
        top:0;left:0;
        background:#627878;
        background:-webkit-linear-gradient(#324040,#627878);
        background:-moz-linear-gradient(#324040,#627878);
        background:-ms-linear-gradient(#324040,#627878);
        background:-o-linear-gradient(#324040,#627878);
        background:linear-gradient(#324040,#627878);

        }

        #menu .ombre{
        position:absolute;
        z-index:40;
        width:650px;
        height:6px;
        top:133px;
        margin-top:-103px;
        left:142px;
        -webkit-box-shadow:0px 115px 3px black; 
        box-shadow:0px 110px 3px black;
        border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
        }
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
22 janv. 2015 à 16:03
lut;)
IE a toujours posé problèmeS !!!
^^
Mais si tu veux placer ce genre de menu, je pense quand même qu'il te faudra utiliser des classes pour 11, 10 ... quant à aller jusque 9 ou encore moins ... là ???

Au fait tu te décides à refaire 'un/ton' site ???
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
22 janv. 2015 à 16:06
Salut Bernard,

Au fait tu te décides à refaire 'un/ton' site ???
Oui. Pour le nouveau groupe car les zikoss ont changés...

IE a toujours posé problèmeS !!!
Oh oui. Même sur ccm, les dév (pourtant pro) ont arrêté de bidouiller pour IE8... Faut voir!
Alors moi, plus qu'amateur non éclairé...

Mais si tu veux placer ce genre de menu, je pense quand même qu'il te faudra utiliser des classes pour 11, 10 ... quant à aller jusque 9 ou encore moins ... là ???
Si ce n'était qu'IE10 et 11, cela ne poserait aucun problème, car, si je ne m'abuse, il gèrent HTML5.
Mais on serait surpris de voir le nombre d'internautes qui utilisent encore et toujours Windows xp et donc qui restent bloqués sur leur vieil IE8...
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
22 janv. 2015 à 17:37
hé oui et de plus pas du tout évident, mais en passant par ' php ', tu peux appeler des haks zn JavaScript plus facilement :)
<!--[if lt IE 9]>
<script src="https://longuetraine.fr/themes/traine/js/html5ie.js"></script>
<script src="https://longuetraine.fr/themes/traine/js/respond.min.js"></script>
<![endif]-->

et pourquoi vouloir coder cela à la main ??? alors que ce serait si simple de ....
si tu veux je te prépare un p'tit PuXml sans soucis :)
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744 > bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024
22 janv. 2015 à 20:13
J'ai vu en lisant des articles de ton blog que tu as changé le nom? Elle est toujours vivante la p'tite souris j'espère???

Pourquoi coder à la main? C'est dû à mon histoire avec Internet.
J'ai commencé à créer un Intranet pour un lycée il y a bien des années, avec DreamWeaver. On m'a dit que le code était dégueu, j'ai voulu en savoir plus. J'ai su et depuis je ne code qu'à la main... De plus, je me suis mis à la programmation en VBA et là c'est tout du manuel... Donc...

Par contre, je ne suis pas contre un petit PuXml, mais d'abord je vais me renseigner pour savoir ce que c'est...
Je regarde ça et reviens vers toi.
Certainement pas avant demain, là je suis de garde auprès de mon p'tit bout...
Bonne soirée.
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744 > bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024
23 janv. 2015 à 07:45
Salut,

Ton commentaire conditionnel
<!--[if lt IE 9]>
<script src="http://longuetraine.fr/themes/traine/js/html5ie.js"></script>
<script src="http://longuetraine.fr/themes/traine/js/respond.min.js"></script>
<![endif]-->

ne fonctionne pas avec la possibilité de rotation offerte par le menu.
Ce n'est rien, je vais continuer à creuser.

En ce qui concerne le PluXml, je mets cette idée de côté pour l'instant. J'aime bien le fait de tout coder "à la mano"... Mais je ne l'oublie pas.
0
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
23 janv. 2015 à 10:41
ok, mais tu ferais quand même mieux de 'tout oublier' :)
gain de temps + gain d'efficacité + gain (aussi) de visibilité :)
@+
0
pijaku Messages postés 12263 Date d'inscription jeudi 15 mai 2008 Statut Modérateur Dernière intervention 4 janvier 2024 2 744
22 janv. 2015 à 16:37
J'ai un peu avancé et presque récupéré le bon affichage sous firefox.
En fait, le commentaire conditionnel que j'ai mis n'était pas correct :
 <!--[if !IE]>
mon bla bla
<![endif]-->

ne fonctionne pas.
Ceci par contre oui :
<!--[if !IE]><!-->
mon blabla
<!--<![endif]-->


Pour IE, c'est un peu mieux en ciblant IE9 comme ceci :
    <!--[if IE 9]> 
        <link rel="stylesheet" href="design-ie.css" media="screen" />
    <![endif]-->

puis dans le body
<!--[if IE 9]> 
    mon blabla
<![endif]-->

C'est pas encore bien, mais j'avance...
0