Question simple pour un élément dans mon footer

Eléphanteau du PHP | 10 Messages

07 mars 2023, 21:35

Bonjour, je débute dans le dev. web : j'ai actuellement un problème que je n'arrive pas à résoudre.

Je souhaite remonter mes networks en haut et justifier mes pictos à gauche, je n'arrive pas à enlever l'espace gauche de cette liste, tout ce que je tente ne fonctionne pas... Voici une capture d'écran (de ce que je souhaite faire) en lien puis mon code en dessous !

https://ibb.co/HgDxVVs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cybele.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>

            <div class="livraison">
            Livraison gratuite pour commandes de plus de 100€
        </div>

        <div class="logopack">
        <img src="Logo/Logo-cybèle.png" alt="Logo" class="logo">

        <p>7 rue Beaubourg à Paris / Du lundi au samedi de 11 à 19h / +33 1 09 08 07 06

        <div class="connexion">
        <a href="#">S'inscrire / se connecter</a>
    </div>
</div>

    <header>

        <div class="navgauche">
            <a href="#">Accueil</a>
            <a href="#">Œuvres</a>
            <a href="#">Artistes</a>
            <a href="#">Agenda</a>
            <a href="#">Lieu</a>
            <a href="#">Contact</a>
        </div>
        
        <div class="navdroite">   
       
            
            <a href="#">Carte cadeau</a>
            <a href="#">Panier</a>
        </div> 

    </header>

    <main class="slide">
        <div class="expo">
            <img src="Logo/amelie-maison-art-02.png" alt="menu picture">
        </div>           
    </main>
    <main class="logis">
        <div class="livraisons">
        <i class="fa-solid fa-truck"></i>   <br>
        Livraisons garanties <br>
        par des transporteurs spécialisés
    </div>
    <div class="paiement">
        <i class="fa-solid fa-lock"></i> <br>
        Paiement sécurisés <br>
    par CB ou 3x sans frais
    </div>   
    <div class="retours">
        <i class="fa-solid fa-rotate-left"></i> <br>
        Retours gratuits <br>
        15 jours pour changer d’avis
    </div>   
</main>

<footer>
    <section>

    7 rue Beaubourg Paris (75003)<br>
    +33 1 09 08 07 06<br>
    [email protected]èle.fr<br>
    Du lundi au samedi de 11h à 19h<br><br>
    
    Accès :<br>
    Metro 11<br>
    Arts et Métiers<br>
    Rambuteau

    </section>

    <ul class="network">
        Rejoignez-nous sur les réseaux<br>
        <li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>

    </ul>

    <div class="newsletter">

        Abonnez-vous à la newsletter<br>
        Soyez sûr de ne manquer aucune de nos nouveautés et promotions<br>
         
        <label for="email"></label>

        <input type="email" id="email"
       pattern="[email protected]\.com" size="30" required> <br>
       <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
       <label for="subscribeNews">J'accepte la politique de confidentialité de la galerie Cybèle</label>

    </div>

</section>

</footer>

<p class="copyright">CD &copy; 2023</p>

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');

.livraison {
    background-color: blue;
    color: white;
    padding: 0.6rem;
    font-size: 12px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.logo {
    width: 11.5rem;
    padding: 0.6rem;
}

header {
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto', sans-serif;
}

header nav li {
    list-style-type: none;
    font-family: 'Roboto', sans-serif;
}

a {
    margin: 12px;
    text-decoration: none;
    color: blue;
}

.ul .small {
    display: flex;
    justify-content: space-between;
}

footer section .network {
    font-family: 'Roboto', sans-serif;
}

footer li
{
    list-style-type: none;
    color: white;
    background-color: #0000FF;
    display : inline;

}


footer li a {
    color: white;
}

footer
{
    padding: 1.5em;

    background-color: #0000FF;
    padding-bottom: 97px;
    color: white;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
}

p {
    text-align: center;
    color: white;
}

footer input {
    border-style: none;
    outline: none;
}

@media screen and (min-width: 768px) {

    .expo {
        display: flex;
        justify-content: end;
        }

    header nav li {
        display: inline;
    }

    p {
        font-size: 11.5px;
        font-family: 'Roboto', sans-serif;
        color: grey;
    }
    .logopack {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-direction: row;
        color: #0000FF;
        font-family: 'Roboto', sans-serif;
    }



    .logopack .connexion {
        display: flex;
        margin-left: auto
    }


    .logis {
        color: #0000FF;
        font-family: 'Roboto', sans-serif;
        display: flex;
        align-items: baseline;
        justify-content: center;
    }

    .livraisons
    {
        text-align: center;
        margin: 30px;
    }

    .paiement
    {
        text-align: center;
        margin: 30px;
    }

    .retours
    {
        text-align: center;
        margin: 30px;
    }

    i {
        font-size: 21px;
        margin-bottom: 19px;
    }

    .second {
        font-size: 13px;
    }

    img {
        display: flex;
    }
}

Avatar du membre
Mammouth du PHP | 1255 Messages

08 mars 2023, 01:58

Ouvre la console de ton navigateur pour travailler en direct sur l'élément :

https://www.malekal.com/chrome-firefox- ... loppement/

Petite remarque ; dans un <ul> on met que des <li>, pas du texte sans <li>.

Avatar du membre
Mammouth du PHP | 1541 Messages

08 mars 2023, 16:19

Salut, margin-top: 0; sur la class network.
Développeur web depuis + de 20 ans