Sujet Précédent Sujet Suivant

CSS height auto

iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017 - 3 mai 2017 à 22:21
cs_stay Messages postés 493 Date d'inscription jeudi 7 juillet 2005 Statut Membre Dernière intervention 24 mai 2017 - 21 mai 2017 à 17:34

Bonjour,
Voici mon code :

#nav_container {
            width: 100%;
            height: 0;
            position: fixed;
            top: 42px;
            right: 0;
            background-color: brown;
            overflow: scroll;
            transition: all .2s;
        }
        #nav_icon:hover {
            background-color: purple;
        }
        #nav_icon:hover #nav_container {
            height: auto;
        }

J'aimerais savoir s'il y a moyen de faire la transition pour la valeur de height quand elle passe à auto. Merci ;)

A voir également:

Height auto in css
Exemple de page d'accueil html et css ✓ - Forum Graphisme/design
Code source HTML ✓ - Forum PHP
Code source formulaire d'inscription html css - Forum PHP
Css scrollbar ✓ - Forum Javascript / DHTML
Interface pour chaque page ✓ - Forum PHP

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 344
4 mai 2017 à 00:13

Bonjour,

A ta question.. la réponse me semble être "oui".

... pour aller plus loin.....
as tu essayé :

-webkit-transition: width 2s; /* Safari */
    transition: width 2s;

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS

.

iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017
4 mai 2017 à 13:36

Oui j'ai essayé mais le résultat est le même...

Réponse 2 / 3

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié le 4 mai 2017 à 21:41

et en modifiant aussi le overflow

#nav_icon:hover #nav_container {
overflow:hidden;
height: auto;
 }

rien ne sert de courir il faut partir a point.
cours Forest cours !

iamtheone Messages postés 39 Date d'inscription lundi 10 avril 2017 Statut Membre Dernière intervention 8 mai 2017
5 mai 2017 à 10:27

Ça ne change rien... C'est juste le auto qui pose problème, si je met une baleur fixe pour height ça marche très bien.

Réponse 3 / 3

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
5 mai 2017 à 19:08

sans en avoir la certitude absolut je dirait que c'est pas possible

cs_stay Messages postés 493 Date d'inscription jeudi 7 juillet 2005 Statut Membre Dernière intervention 24 mai 2017 4
21 mai 2017 à 17:34

Quelle serait l'utilité ? Car si tu as une chaine de caractère dans ton tag#nav_icon. Cela fonctionne !

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
    height: auto;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>une chaine</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

Discussions similaires

application gestion de client pour l auto école

creation d'une application d'auto ecole

application web j2ee de gestion d'auto école

CSS MAP et AREA

coller deux div avec du css

Votre réponse

Discussions similaires