Un petit trait blanc apparaît à droite de l'icône

Sujet résolu

Anonyme

19 juillet 2023 à 19:34:33

Bonjour, un petit trait blanc apparaît à droite de l'icône. Comment puis-je le résoudre.

Merci.

-
Edité par Anonyme 19 juillet 2023 à 19:35:15

uniuc

19 juillet 2023 à 19:48:30

Bonjour,

En nous montrant le code par exemple.

Anonyme

19 juillet 2023 à 20:07:31

<!DOCTYPE html>
<html lang="fr">

<head>

    <!-- Ne Pas Toucher -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accueil - Wavi Myst</title>
    <link rel="stylesheet" href="style.css">

    <!-- Favicon -->

    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="./assets/favicon/site.webmanifest">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">   
</head>

<body>

    <!-- Barre De Navigation -->

    <header>
        <nav>
            <ul class="navbar">
                <li class="titre">Wavi Myst</li>
                <div class="navbar-plus">
                    <li class="normal"><a class="accueil" href="index.html">Accueil</a></li>
                    <li class="normal"><a href="a-propos.html">À Propos</a></li>
                    <li class="normal"><a href="histoire.html">Histoire</a></li>
                    <li class="contact"><a href="contact.html">Contact</a></li>
                </div>
            </ul>
        </nav>
    </header>  

    <!-- Plan De Travail  -->

    <main>
        <h1>Accueil</h1>
        <section class="resume">
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
            </p>
        </section>
    </main>

    <!-- Bas De Page -->

    <footer>
        <div class="copyright infos">
            <p>&copy; - Wavi Myst</p>
        </div>
        <div class="infos">   
           <a target="_blank" href="https://www.youtube.com/channel/a"Youtube>
                <img src="./assets/img/youtube-logo.png" alt="Youtube" class="lien-icone">
           <a target="_blank" href="https://discord.gg/a"Discord>
                <img src="./assets/img/discord-logo.png" alt="Discord" class="lien-icone">
           </a>
        </div>
    </footer>
</body>

</html>

/* Les Fonts Perso */

@font-face {
    font-family: "Futura";
    src: url(./assets/fonts/futura.ttf);
}

@font-face {
    font-family: "Luloclean";
    src: url(./assets/fonts/luloclean.ttf);
}

@font-face {
    font-family: "Monoton";
    src: url(./assets/fonts/monoton.ttf);
}


/* Les Infos Globales */

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(./assets/img/background-wavi.png) center/cover;
    min-height: 100vh;
    color: aliceblue;
    font-family: "Futura";
    font-size: 1rem;
    display: flex;
    flex-direction: column;
}

.navbar {
    position: sticky;
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-around;
    padding: 10px;
    font-size: 1.2rem;
    align-items: center;
    text-shadow: 0 0 20px black;
    background: black;
    border-bottom: 3px solid aliceblue;
}

.navbar-plus {
    display: flex;
    gap: 100px;
}

main {
    flex-grow: 1;
}

footer {
    padding: 20px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background: black;
    border-top: 3px solid aliceblue;
}


/* Autres */

a {
    text-decoration: none;
    color: aliceblue;
}

a:hover {
    text-decoration: underline;
}

.accueil {
    color:crimson;
}

.accueil:hover {
    color:red;
}

.contact {
    background: crimson;
    border-radius: 3px;
    transition: 0.2s;
}

.contact:hover {
    background-color: red;
}

.copyright {
    font-family: "Monoton";
    font-size: 0.8rem;
    justify-content: flex-start;
}

.lien-icone {
    height: 50px;
    box-shadow: 0 0 20px black; 
    transition: 0.2s;
    margin-left: 30px
}
  
.lien-icone:hover {
    opacity: 0.9;
}

.titre {
    font-size: 1.8rem;
    font-family: "Monoton";
    display: flex;
}

h1 {
    font-family: "Luloclean";
    font-size: 2.5rem;
    margin: 70px;
    text-shadow: 0 0 20px black;
    font-weight: 900;
    text-align: center;
}

h1:before, h1:after {
    content:'';
    width: 10rem;
    border-bottom:rgba(255,255,255,1) solid 1px;
    display:inline-block;
    vertical-align:middle;
}

.resume {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: black;
    border-radius: 6px;
    text-align: center;
}

p {
    font-size: 1.1em;
}


/* Responsives */

@media screen and (max-width: 1000px) {
    .navbar {
        display: flex;
        flex-direction: column;
    }
}


@media screen and (max-width: 750px) {
    h1:before, h1:after {
        display: none
    }
    p {
        width: 100%;
        height: 150px;
        text-align: justify;
        overflow: auto;
        margin-left: auto;
        margin-right: auto;
        background: black;
        border-radius: 6px;
        text-align: center;
    }
    .lien-icone {
        display: flex;
        align-items: center;
    }
}

AbcAbc6

19 juillet 2023 à 22:29:39

Bonsoir, passez votre code au validateur pour voir et corriger vos erreurs : https://validator.w3.org/#validate_by_input

L30 si c'est un titre, les balises de titres doivent être utilisée. Un <h1> par exemple.

L31 La balise <div> ne peut pas être à cet endroit, seul la balise <li> est enfant direct de <ul> ou <ol>.

L60 et L62 Attribut yoiutube et discord n'existe pas => à supprimer.

L62 on ne peut pas écrire un lien dans un lien, fermer la balise de lien précédente.

Pour le css ceci c'est NON

* {
    margin: 0;
    padding: 0;
}

Inutile de péter toute les marges surtout pour les élements qui n'en on pas!! d'autant plus que par la suite vous devez les remettre.

Utilisez le reset au cas par cas, ou une feuille de style par défaut type normalize.

La propriété font-family ce termine par une famille de police générique.

Anonyme

20 juillet 2023 à 16:04:00

Merci, mais je n'arrive pas à mettre le copyright en bas à gauche du footer.

-
Edité par Anonyme 20 juillet 2023 à 17:17:33

AbcAbc6

20 juillet 2023 à 17:34:31

Impte a écrit:

Merci, mais je n'arrive pas à mettre le copyright en bas à gauche du footer.

footer {
    justify-content: space-between;
}

Modifie le sélecteur footer comme ceci.

Anonyme

20 juillet 2023 à 18:40:37

Oui, mais mon logo youtube est au milieu.

footer {
    padding: 20px 20px;
    font-family: "Monoton", serif;
    font-size: 0.8rem;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    background: black;
    border-top: 3px solid aliceblue;
}

    <footer>
        <p>&copy; - Wavi Myst</p>
         <a target="_blank" href="https://www.youtube.com/channel/a">
                <img src="../../assets/img/youtube-logo.png" alt="Youtube" class="lien-icone">
        </a>
        <a target="_blank" href="https://discord.gg/a">
                <img src="../../assets/img/discord-logo.png" alt="Discord" class="lien-icone">
        </a>
    </footer>

AbcAbc6

20 juillet 2023 à 18:54:04

Oui puisque tu as modifié le HTML. J'ai répondu en fonction du code transmit plus haut.

englobe tes deux liens dans un conteneur, un paragraphe. De cette façon le premier paragraphe sera à gauche et le second à droite.

Anonyme

20 juillet 2023 à 20:11:07

Merci pour tout !

AbcAbc6

20 juillet 2023 à 20:21:25

Bonjour, De rien , au plaisir.

Sujet résolu

Tu peux passer le sujet à "résolu" (bouton en haut à droite du sujet) et cliquer sur les pouces levés des messages qui t'ont aidé⋅e