Retour à la liste des sujets

[CUL] Des EXPERTS en CSS ?

Pecker_Monkk
2023-06-29 21:32:08

ca te va comme ca ? oublies pas de changer le fichier css dans le head et les background-color

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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



    <title>Document</title>

</head>



<body>



</body>



</html>





<div class="block">

    <section id="newsletter">

        <div class="bloc-gauche">

            <p>Des réductions dans votre boîte mail</p>

            <form action="" method="POST">

                <input type="email" placeholder="email@exemple.com" name="email-newsletter">

                <input type="submit" value="S'incrire" name="inp-newsletter">

            </form>

        </div>

        <div class="bloc-droite">

            <p>Restez informez</p>

            <ul>

                <li><a href="https://instagram.com"><img src="./assets/images/icones/instagram.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/facebook.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/youtube.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/twitter.png" alt=""></a></li>

            </ul>

        </div>

    </section>



    <footer>

        <div class="first-bloc">

            <div class="bloc-gauche">

                <p>LOGO</p>

            </div>

            <div class="bloc-milieu">

                <p>Qui sommes nous</p>

                <ul>

                    <li>Le concept</li>

                </ul>

            </div>

            <div class="bloc-droite">

                <p>Aide</p>

                <ul>

                    <!-- <li>Mon compte client</li> -->

                    <!-- <li>FAQ</li> -->

                    <li>Nous contacter</li>

                </ul>

            </div>

            <div class="bloc-charte">

                <ul>

                    <li><a href="">CGV</a></li>

                    <li><a href="">Mentions légales</a></li>

                    <li><a href="">Confidentialité</a></li>

                </ul>

            </div>

        </div>

        <!-- <hr> -->

       

    </footer>

</div>
html,

body {

  height: 100%;

  margin: 0;

}



.wrapper {

  min-height: 100%;

  position: relative;

}



.content {

  padding-bottom: 100px; /* Hauteur du footer */

}



footer {

 

    width: 100%;

    height: 100px; /* Hauteur du footer */

    background-color: #265bcc;

    display: block;

    justify-content: space-between; /* Alignement horizontal */

    align-items: center; /* Alignement vertical */

    padding: 0 20px; /* Espacement interne des éléments du footer */

  }

#newsletter {

 

 display: flex;

    justify-content: space-around;

    background-color: rgb(255, 0, 0);

}



.first-bloc {



    display: flex;

    justify-content: space-around;

}



.block {

position: absolute;

bottom: 0;

width: 100%;

}

Pecker_Monkk
2023-06-29 21:35:21

et rajoute

.bloc-droite ul {



    display: flex;

}

pour aligner tes images de réseaux sociaux

Reumcha
2023-06-29 21:39:32

depuis quand tu sais coder peckerhttps://image.noelshack.com/fichiers/2022/37/1/1663014384-ahi-pince-mais.png

JusdEauRange22
2023-06-29 21:46:56

Le 29 juin 2023 à 21:20:31 :

khey je m'y connais en css mais la j'ai tout essayé, j'ai englobé le bloc newsletter et le footer dans une div, je l'ai misen relative, les blocs en absolute avec bottom 0 mais ça marche pas....

Même sans position absolute, un khey t'a littéralement filé la réponse avec ses flexboxs, c'est juste flex-direction: column et justify-content: flex-endhttps://image.noelshack.com/fichiers/2018/26/7/1530476579-reupjesus.png
Mais t'as pas lu car tu le sais déjà, vu que tu t'y connais en CSShttps://image.noelshack.com/fichiers/2018/26/7/1530476579-reupjesus.png

je viens de tester et ça marche pas



<div class="newsletter-et-footer">



    <section id="newsletter">

        <div class="bloc-gauche">

            <p>Des réductions dans votre boîte mail</p>

        <form action="" method="POST">

            <input type="email" placeholder="email@exemple.com" name="email-newsletter">

            <input type="submit" value="S'incrire" name="inp-newsletter">

        </form>

        </div>

        <div class="bloc-droite">

            <p>Restez informé</p>

            <ul>

                <li><a href="https://instagram.com"><img src="./assets/images/icones/instagram.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/facebook.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/youtube.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/twitter.png" alt=""></a></li>

            </ul> 

        </div>

    </section>



    <footer>

        <div class="first-bloc">

            <div class="bloc-gauche">

                <p>LOGO</p>

            </div>

            <div class="bloc-milieu">

                <p>Qui sommes nous</p>

                <ul>

                    <li>Le concept</li>

                </ul>

            </div>

            <div class="bloc-droite">

                <p>Aide</p>

                <ul>

                    <!-- <li>Mon compte client</li> -->

                    <!-- <li>FAQ</li> -->

                    <li>Nous contacter</li>

                </ul>

            </div>

        </div>

        <!-- <hr> -->

        <div class="bloc-charte">

            <ul>

                <li><a href="">CGV</a></li>

                <li><a href="">Mentions légales</a></li>

                <li><a href="">Confidentialité</a></li>

            </ul>

        </div>

    </footer>



</div>




.newsletter-et-footer{

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}

JusdEauRange22
2023-06-29 21:50:34

Le 29 juin 2023 à 21:32:08 :
ca te va comme ca ? oublies pas de changer le fichier css dans le head et les background-color

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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



    <title>Document</title>

</head>



<body>



</body>



</html>





<div class="block">

    <section id="newsletter">

        <div class="bloc-gauche">

            <p>Des réductions dans votre boîte mail</p>

            <form action="" method="POST">

                <input type="email" placeholder="email@exemple.com" name="email-newsletter">

                <input type="submit" value="S'incrire" name="inp-newsletter">

            </form>

        </div>

        <div class="bloc-droite">

            <p>Restez informez</p>

            <ul>

                <li><a href="https://instagram.com"><img src="./assets/images/icones/instagram.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/facebook.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/youtube.png" alt=""></a></li>

                <li><a href=""><img src="./assets/images/icones/twitter.png" alt=""></a></li>

            </ul>

        </div>

    </section>



    <footer>

        <div class="first-bloc">

            <div class="bloc-gauche">

                <p>LOGO</p>

            </div>

            <div class="bloc-milieu">

                <p>Qui sommes nous</p>

                <ul>

                    <li>Le concept</li>

                </ul>

            </div>

            <div class="bloc-droite">

                <p>Aide</p>

                <ul>

                    <!-- <li>Mon compte client</li> -->

                    <!-- <li>FAQ</li> -->

                    <li>Nous contacter</li>

                </ul>

            </div>

            <div class="bloc-charte">

                <ul>

                    <li><a href="">CGV</a></li>

                    <li><a href="">Mentions légales</a></li>

                    <li><a href="">Confidentialité</a></li>

                </ul>

            </div>

        </div>

        <!-- <hr> -->

       

    </footer>

</div>
html,

body {

  height: 100%;

  margin: 0;

}



.wrapper {

  min-height: 100%;

  position: relative;

}



.content {

  padding-bottom: 100px; /* Hauteur du footer */

}



footer {

 

    width: 100%;

    height: 100px; /* Hauteur du footer */

    background-color: #265bcc;

    display: block;

    justify-content: space-between; /* Alignement horizontal */

    align-items: center; /* Alignement vertical */

    padding: 0 20px; /* Espacement interne des éléments du footer */

  }

#newsletter {

 

 display: flex;

    justify-content: space-around;

    background-color: rgb(255, 0, 0);

}



.first-bloc {



    display: flex;

    justify-content: space-around;

}



.block {

position: absolute;

bottom: 0;

width: 100%;

}

merci khey ça a l'air de marcher je regarde le code

Infos
Gestion du forum
contact@geevey.com

API disponible. Utilisez le paramètre "api" en GET, peu importe le contenu, sur une page du site.
Notes
    ⚠️ Les archives de novembre sont désormais disponibles.
Non-assumage
    Personne n'a pas assumé de topic pour le moment.