Forum : Problème lien

J'ai un petit problème . dans mon code , je ne sia spas pourquoi mais lorsque je fais des lien dans ma liste a puce , il y a des petit bout de lien qui sont la alors qu'il ne devrais pas étre la (photo jointe)

Voici mon code (si vous vous demander pourquoi ca n'a aucun sens c'est normal j'apprend le HTML/CSS et c'est des entrainement) :

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <h1 class="Bienvenue">Bienvenue sur mon site test</h1>
    <br>

    <nav>
        <ul>
            <li><a class="nav1" href="Line 1">Bank  </li>
            <li><a class="nav1" href="Lien 2">A propos  </li>
            <li><a class="nav1" href="Lien 3">Me contacter  </li>
        <ul>
    <nav>
    <br>
    <p class="P1">Pour l'instant c'est pas trés interessant mais bon ... Mais peut étre dans 1 - 2 mois je serias un wEbMaStEr!!!<br>Mais attension je suis chaud bouillant pour apprendre le HTML et le CSS</p>
    <br>

    <p class="Bordure">  Mais je sais faire de joli bordure!  </p>
    <br>
    <p>Un lien vers <a class="YTB" href="https://www.youtube.com/" target="_blank"> Youtube </a></p>

    </nav>
    <section>
        <p class="Chat">J'aimerais au finale faire un serveur tah les animé mais pour l'instant voici une descrition d'un chat:<br>
        Le chat est un mammifère de la famille de félidés. Il pèse en moyenne 2,5 à 4,5 kg et mesure entre 66 et 76 cm, avec la queue. Ses pattes sont pourvues de griffes rétractiles. Elles ont à leur base des coussinets constitués d'une membrane élastique qui leur permet de se déplacer sans faire de bruit.
        Le pelage du chat est composé de poils de longueur variable selon les races.
    </section>
</html>

code CSS:

*
{
    font-family: Trebuchet MS ; 
    color: #838383;
}

h1{
    text-align: center;
    font-size: 50px;
}

.imageflottante
{
    float: left;
}

body
{
    background-image: url("font.50x50.png");
    background-repeat: no-repeat;
    background-color: #333333;
}

.Bordure{
    color: #333333;
    border-width: 3px;
    border-style: solid;
    display: inline-block;
    border-radius: 10px;
    border-color: #686969;
    box-shadow: 3px 3px 4px #484949;
    background-color: #838383
}

a.YTB{
    text-decoration: none;
    font-style: italic;
    color: #333333;
    background-color:#838383;
    border-radius: 5px;
}

a.YTB:hover{

    text-decoration: none;  
    font-style: italic;
    color: #838383;
    background-color:#333333;
    border-radius: 5px;
    transition: 0.3s ;

}

a{
    color: #838383;
}

p.P1{
    color: #838383;
    border-width: 3px;
    border-style: solid;
    display: inline-block;
    border-radius: 5px;
    border-color: #686969;
    padding: 1px;
    margin: auto;
    width: 200px
}

p.Chat{
    color: #838383;
    border-width: 3px;
    border-style: solid;
    display: inline-block;
    border-radius: 5px;
    border-color: #686969;
    padding: 1px;
    margin: auto;
    text-align: center;
    width: 250px;
    height: 110px;
    overflow: auto;
}

#conteneur
{
    color: #000000;
    border-color: #686969;
    border-style: solid;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px;
}

.element1:nth-child(1){
    border-color: #FE0801;
    border-style: solid;
    background-color: #FE0801;
    color: #000000;
}

.element2:nth-child(2){
    border-color: #33D201;
    border-style: solid;
    background-color:#33D201;
    flex: 1;
    text-align: center;
    color: #000000;
}

.element3:nth-child(3){
    border-color: #0124FE;
    border-style: solid;
    background-color:#0124FE;
    color: #000000;
}

li{
    list-style-type: none;
    display: inline-block;
    padding: 30px;
}

a.nav1{
    text-decoration: none;
    font-style: italic;
    color: #333333;
    background-color:#838383;
}

a.nav1:hover{
    text-decoration: none;  
    font-style: italic;
    color: #838383;
    background-color:#333333;
    border-radius: 5px;
    transition: 0.3s ;

}

Si vous pouvez aider un jeune apprenti coder ca cerais cool : )

Merci d'avoir lu !

Carouge10

bonjour.
je t'invite à revoir les bases du html.
il manque la balise body
tes liens ne sont pas fermés, il manque la fermeture de la balise a
fais valider ton code avec le site w3c

Cédric33

Faut etre beaucoup plus rigoureux dans tes balises.
exemple : 2 balises <nav> ouverte et une balise en fermeture </nav>

popotte

Alors si tu as la flemme d'être rigoureux sur les balises (c'est chiant de revérifier toutes les balises :p) je te donnes deux solutions, une payante sauf certaines conditions, et une gratuite:

La gratuite: Installes VS Code et dans l'IDE installes le plugin Emmet
La payante: Installes PhpStorm (si tu es étudiant, tu peux l'avoir gratuitement, suffit d'envoyer une photo de ta carte étudiant internationnale, si tu n'as pas cette carte: https://www.isic.fr/ Dans tous les cas prends la, elle coute que 8€ et tu as pleins d'avantages (comme Phpstorm gratuit x)) :p)

Problème lien

3 réponses