[Résolu] "couler" - je n'arrive pas a faire une "couler" par babax lbg - page 1

Bonjour à tous,

Voici mon problème: Voilà maintenant un heure que j'éssaie de faire une "couler" comme sur le site Web "hds.to" lors ce que notre souris passe

sur un des liens comme "Menu films" ou "Menu series".

Merci d'avance à celui ou celle qui m'aideras ou même me répondras...

ps: Merci de ne pas faire allusion au erreur de mon code, je viens de commencé le site et comme vous constatez, je rencontre quelques problèmes...ET en plus je teste des choses pour éssayer de regler mes autres problèmes...

voici mon code html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" href="style.css">
    <title>Forestell </title>
    <!-- ortho international -->
</head>
<body>
    


    <div id="container-nav-barre">
        <a href="" class="nav-barre">Accueil</a>
        <a href="" class="nav-barre">professionnel</a>
        <a href="" class="nav-barre">Particulier</a>
        <a href="" class="nav-barre">Mise en conformité <br>incendie</a>
        <a href="" class="nav-barre">Monument <br>historique</a>
        <a href="" class="nav-barre">Contact</a>
    </div>
    <img id="logo" src="IMG_4389.JPG">
    
    

</body>
</html>

et mon code css:

#container-nav-barre
{
    display: flex;
    justify-content: space-between;
    background-color: black;
    padding: 3px;
}

body
{
   font-family: helvetica;
   text-align: justify;
}

a
{
    text-decoration: none;
    color: white;
    transition: color 1s;

    /* meme couleur que le logo */

}

a:hover
{
    color: darkslategray;
}

#logo
{
   width: 100%;
   height: 100%;
}

#logo2
{
    width: 100%;
    height: 10%;
}

-
Edité par babax lbg 13 octobre 2018 à 17:03:32

Merci beaucoup,

j'ai reussi mais maintenant, les trois lien déroulants ne s'aligne plus avec le reste des autres liens...

merci d'avance.

Si vous savez comment centrer l'image au tout dessus du site, merci beaucoup car vous devez comprendres qu'avec la balise center, ça ne le fait pas.

ps: je sais que mon code comporte des choses bizarre ou meme illogique mais c'est car je teste ds choses...

voici mon nouveaux code html:

<!DOCTYPE html>
<html>
<head>
   
    <meta charset="UTF-8">
     <link rel="stylesheet" href="style.css">
    <title>Forestell </title>
    <!-- ortho international -->
</head>
<body>
    
    <center>
        <!-- atention -->
            <div id="banniere"><img src="Capture d’écran 2018-10-13 à 17.09.40.png" id="logo2">
            </div>
    </center>
    <div id="container-nav-barre">
        <a href="#" id="for-margin-left">Accueil</a>

        <ul id="menu-deroulent">
            <li><a href="#" id="particulier" class="nav-barre">Professionnel</a>
                <ul>
                    <li><a href="#">Hopitaux</a></li>
                    <li><a href="#">Ecole</a> </li>
                    <li><a href="#">Industrie</a> </li>
                    <li><a href="#">Commerce</a> </li>
                </ul>
            </li>
            <li><a href="#" id="particulier" class="nav-barre">Particulier</a>
                <ul>
                    <li><a href="#">Renovation</a>  </li>
                    <li><a href="#">Amenagement</a></li>
                </ul>
            </li>
            <li> <a href="#" class="nav-barre">Mise en conformité incendie</a>
                <ul>
                    <li><a href="#">Cloisons</a> </li>
                    <li><a href="#">Plafons</a> </li>
                    <li><a href="#">Menuiseries</a> </li>
                    <li><a href="#">Resserages</a> </li>
                </ul>
            </li>
        </ul>
        <a href="#" class="nav-barre-erreur">Monuments <br> historiques</a>
        <a href="#" id="for-margin-right">Contact</a>
        <!-- <a href="" class="nav-barre">Contact</a> -->
    </div>
        <img id="logo" src="IMG_4389 test.jpg">
    <div id="footer">
        <P id="adresse">
            B-7503 FROYENNES
        </P>

       
    </div>

</body>
</html>

et css:

#container-nav-barre
{
    display: flex;
    justify-content: space-between;
    background-color: #4e646f;
    padding: 3px;
}

body
{
   font-family: helvetica;
   text-align: justify;
}

a
{
    text-decoration: none;
    color: white;
    transition: color 1s;
}

a:hover
{
    color: #c0d741;
}

#logo
{
   width: 100%;
   height: 100%;
   margin-bottom: 0px;
   display: flex;
}

#logo2
{
    width: 25%;
}

#banniere
{
    width: 100%;
    background-color: #4e646f;
}

#footer
{
    background-color: #4e646f;
    height: 100px;
    width: 100%;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

#adresse
{
    text-align: center;
    margin-top: 0px;
    padding: 30px;
    color: white;
    font-family: helvetica;
}

#for-margin-left
{
    margin-left: 5px;
}

#for-margin-right
{
    margin-right: 5px;
}

#menu-deroulent, #menu-deroulent ul
{
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

#menu-deroulent li
{
    position: relative;
    border-radius: 8px 8px 0px 0px;
}

#menu-deroulent ul li
{
    display: inherit;
    border-radius: 0;
}

#menu-deroulent ul li:hover
{
    border-radius: 0;
}

#menu-deroulent ul li:last-child
{
    border-radius:0 0 8px 8px;
}
#menu-deroulent ul{
position:absolute;
z-index: 1000;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-deroulent li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-deroulent li:first-child{
background-color: #4e646f;
}
#menu-deroulent li:nth-child(2){
background-color: #4e646f;

}
#menu-deroulent li:nth-child(3){
    background-color: #4e646f;
}
#menu-deroulent li:last-child{
background-image:-webkit-linear-gradient(top  );
background-image:linear-gradient(to bottom   );
}
/* background des liens sous menus */
#menu-deroulent li:first-child li{
    background-color: #4e646f;
}
#menu-deroulent li:nth-child(2) li{
    background-color: #4e646f;
}
#menu-deroulent li:nth-child(3) li{
    background-color: #4e646f;
}

#menu-deroulent li:last-child li{
    background-color: #4e646f;
}

/* background des liens menus et sous menus au survol */

#menu-deroulent li:first-child:hover, #menu-deroulent li:first-child li:hover
{
background-color: #4e646f;
}

#menu-deroulent li:nth-child(2):hover, #menu-deroulent li:nth-child(2) li:hover
{
    background-color: #4e646f;
}

#menu-deroulent li:nth-child(3):hover, #menu-deroulent li:nth-child(3) li:hover
{
    background-color: #4e646f;
}

#menu-deroulent li:last-child:hover, #menu-deroulent li:last-child li:hover
{
    background-color: #4e646f;
}
/* les a href */
#menu-deroulent a
{
text-decoration:none;
color:#fff;
font-family:arial;
}

#menu-deroulent ul a
{
padding:8px 0;
}

#menu-deroulent li:hover li a
{
color:#fff;
text-transform:inherit;
}

#menu-deroulent li:hover a, #menu-deroulent li li:hover a
{
color:#c0d741;
}

#particulier
{
    padding: 25px;
}

#menu-deroulent
{
    display: flex;
    justify-content: space-between;
}

babax lbg

13 octobre 2018 à 17:02:37

Zoki_Marciano

13 octobre 2018 à 20:19:23

Si tu parles de faire un menu déroulant alors un tour chez la grenouille s'impose :

http://www.frogweb.fr/

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

14 octobre 2018 à 15:20:57

AliasDmc

14 octobre 2018 à 15:39:31

Bonjour BasileVanduille

As tu essayé d'utiliser text-align

#banniere
{
    width: 100%;
    background-color: #4e646f;
    text-align:center;
}

Découvrez les Css avec la zonecss.fr

14 octobre 2018 à 15:44:14

ça marche pour la photo, mais pas pour bien aligner les liens...

-
Edité par babax lbg 14 octobre 2018 à 15:48:46

"couler"

je n'arrive pas a faire une "couler"

"couler"

Supprimer

Modérer

Signaler le message aux modérateurs