Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Probleme de Transition css3 avec (chrome)
Auteur
helium
# 27 Jan 2012 - 17:06:46
Citer
4 Posts
 Bonjour

avant de posté mon probleme je tien a remercier toutes la comunauté Alsacreation pour l'aide apporté developpeur debutant biggrin

voila pour mon premier post :

je fait une mise en page de base pour tester les differentes possibilités de html5/css3.

sur mon menu j'ai fait une une transition de couleur de text et de couleur de fond de ma cellules,
jusque la ca marche sur tout les navigateur sauf IE ( pour le momment je le laisse de coter fache )

le probleme vien de chrome, apres un clic sur un bouton de mon menu la transition ne se fait plus.

si je vide le cache du navigateur ca marche mais apres un clique ca ne marche plus a nouveau lol

voila ma page

www.barbe-team.fr

voici ma page html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />

        <title>Page type html5</title>

    </head>



    <body>

        <div id="conteneur">

            

            <header>

                <h1>Titre</h1>

            </header>

            

            <section id="contourmenu">

            <nav>

                <ul>

                    <li><a href="#" class="cellules">menu01</a></li>

                    <li><a href="#" class="cellules">menu02</a></li>

                    <li><a href="#" class="cellules">menu03</a></li>

                    <li><a href="#" class="cellules">menu04</a></li>

                    <li><a href="#" class="cellules">menu05</a></li>

                </ul>

            </nav>

            </section>

            

            <section></section>



            <aside class="aside01"></aside>

            <aside class="aside02"></aside>     

       

            

<br class="anule" />



            <footer class="piedpage">Footer de la page</footer>

            

        </div>

    </body>

</html>


et ma page css (juste la parti concerné)

#contourmenu {



    width: 900px;

    height: 30px;

    background-color: green;

    margin-top: 20px;

    padding: 0px;

    border-radius: 10px 10px 10px 10px;

}

nav ul {

   

    list-style-type: none;

    padding: 0px;

    margin-top: 5px;

    margin-left: 200px;

    width: 900px;

    height: 20px;   

}



.cellules {

    text-align: center;

    line-height: 20px;

    display: block;

    width: 100px;

    

    border-radius: 5px 5px 5px 5px;

    background-color: #fff;

    color: #000;

    text-decoration: none;

    margin: 0px;

    padding: 0px;



    -moz-transition-property:color, background-color;  

    -moz-transition-duration: 1s, 1s;

    -webkit-transition-property:color, background-color;  

    -webkit-transition-duration: 1s, 1s;

    -o-transition-property:color, background-color;  

    -o-transition-duration: 1s, 1s;

}



.cellules:hover {

   

    border-bottom: solid 1px #34cdf9;

    background-color: #000;

    color: #34cdf9;

    text-decoration: none;

}


merci beaucoup
Modifié par helium (27 Jan 2012 - 17:10)
^
gc-nomade
# 27 Jan 2012 - 18:21:24
Citer
gcyrillus en mode portable
808 Posts
 bonsoir,

peut-être faut-il aussi initialisé :" transition-timing-function" avec ease-in-out par exemple. Cette déclaration manque probablement à Chrome .

cordialement,
GC
GC rien , mais GC encore ... et ça marche via la V.A.E. je passe d'un B.E.P. a un B.T.S. ... ce qui apparemment ne flatte que mon ego !?
Je vois le monde de ma porte, pas vous ?
http://yidille.free.fr/plux/valign 
^
helium
# 31 Jan 2012 - 18:02:20
Citer
4 Posts
 merci je vais faire un test
^
Prévenir un modérateur
Répondre au sujet
Aller à