Déformation de mon site à cause de bootstrap [Résolu]

Signaler
Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021
-
Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021
-
Bonjour,
j'ai créé mon premier site "un portefolio" et j'ai eu besoin de bootstrap pour créer un menu. En insérant les liens bootstrap dans mon code mon site s'est déformé le background est devenu blanc alors que la couleur original (celle que j'avais mis dans mon code) était le gris.
Même en changeant la couleur cela ne marche toujours pas.
Si quelqu'un a une solution a mon problème cela me soulagerais.
Cordialement.

6 réponses

Messages postés
31467
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
3 279
Bonjour,

Quel rapport avec le .NET ?

Quel code as tu écrit exactement ?

( à noter que tu dois importer le css de bootstrap.. AVANT tes autres css... )

PS: Pour poster du code sur le forum, tu devras utiliser les balises de code.
Explications ( à lire ENTIEREMENT !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021

Voici mon code html
<!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="style.css">
    </head>
<body>
        <div class="bborder">
<p class="intro"><strong>Bonjour,</strong>
<p class="introduction"><strong>Je suis Noé</strong> </p>
<p class="introduction2"> <strong> Passionné d'informatique</strong>   </p>
</div>
<div class="border">
    <br>
   <p class="compétences">COMPETENCES</p> 
   <p class="langages">Langages</p><p class="frameworks">Frameworks</p><p class="logiciel">Logiciels</p><br><br><br>
   <p class="photoshop">P H O T O S H O P</p><br><br><img src="photoshop.png" width="40" alt="photoshop" class="logops">
   <p class="illustrator">I L L U S T R A T O R</p><img src="illustrator.png" alt="illustrator" width="40" class="logoillustrator">
   <p class="bootstrap">B O O T S T R A P</p><br><br><img src="bootstrap2.png" width="50" alt="bootstrap" class="logobootstrap">
   <p class="symfony">S Y M F O N Y</p><img src="img synfony.png" width="45" alt="synfony" class="logosynfony">

   <p class="html"> H T M L </p><img src="logo html.png" width="40" alt="logo HTML" class="logohtml">
   <p class="CSS">C S S</p><img src="css3-logo.png" width="80" alt="logo css" class="logocss">
   <p class="PHP"> P H P </p>
   <p class="MYSQL"> S Q L</p><img src="logo my sql.png" alt="logo sql" class="logosql">
</div>

<div class="bbborder"><br>
    <p class="loisir ">LOISIRS </p>
    <img src="img montage.png" width="200"  alt="img montage" class="imgmontage">
    <img src="Escalade.png" width="200" alt=" img escalade" class="imgescalades">
    <img src="img manette.png" alt="img manette" width="200" class="imgmanette">
    <img src="chaise desingn.png" width="200" alt="chaise design" class="design">
    <img src="img echec.png" width="200" alt="img echec" class="echec">
</div>


<div class="bbbborder"><br>
    <p class="contact">CONTACT</p>
<div class="conconcontact">
    <section id="contact">
        <div class="content">
            <div id="form">
                <form action="" id="contactForm" method="post">
                    <span class="sttrong">Name</span>
                    <input type="text" name="name" class="name" placeholder="Nom" tabindex=1 />
                    <span class="sttrong">Email</span>
                    <input type="text" name="email" class="email" placeholder="Email" tabindex=2 />
                    <span id="captcha"></span>
                    <input type="text" name="captcha" class="captcha" size="4" placeholder="Sujet du message" tabindex=3 />
                    <span class="sttrong">Message</span>
                    <textarea class="message" placeholder="Message" tabindex=4></textarea>
                    <input type="submit" name="submit" value="Send e-mail" class="submit" tabindex=5>
                </form>
            </div>
</section>
</div>
</div>


</body>
</html>


EDIT: Correction des balises de code ( langage HTML et non CSHARP )
Messages postés
31467
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
3 279
Discussion déplacée dans le bon forum
Messages postés
31467
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
3 279
Dans le code que tu nous montres je ne vois pas les includes de bootstrap...
Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021

Voici mon code css
body{
    background-color: rgb(116, 116, 116);
}
.bborder{
    border:0.5em solid #313436 ;
    margin: 2em;                       
    background-color: #313436;
    
} 
.intro{
    font-size: 5em;
    color: white;
    
    margin-left: 1em;
    margin-top: 2em;
}
.introduction{
    font-size: 3.5em;
    color: white;
    margin-bottom: 2em;
    margin-left: 2.5em;
    margin-top: -1em;
    
}
.introduction2{
    font-size: 3em;
    color: white;
    margin-bottom: 2em;
    margin-left: 4em;
    margin-top: -1.5em; 
}
.border{
    border:0.5em solid #313436 ;
    margin: 2em;                       
    background-color: #313436; 
}
.compétences{
    font-size: 3em;
    color: white;
    text-align: center;
    margin-top: -0.1em;
    letter-spacing: 0.2em;
}
.html{
    color:white;
    font-size: 1.5em;
    margin-left: 4.8em;
    margin-top: -8.3em;
    
}
.CSS{
    color:white;   font-size: 1.5em;
    margin-left: 5.4em;
    
    

}
.PHP{
    color:white;
    font-size: 1.5em;
    margin-left: 5.5em; 
    margin-top: -1em;
}
.langages{
    margin-left:1.3em;
    font-size: 3em;
    margin-bottom: 1.5em;
   

}
.js{
    color:#048b9a;
    font-size: 1.5em;
    margin-left: 2em; 
    
}
.MYSQL{
    color:white;
    font-size: 1.5em;
    margin-left: 5.5em; 
    margin-top: 3em;
    
}
.frameworks{
    text-align: center;
    font-size: 3em;
    
    margin-top: -2.6em;
}
.bootstrap{
  text-align: center; 
  color:white;
    font-size: 1.5em;
    margin-top: -8.3em;
     
}
.symfony{
  text-align: center; 
  color:white;
    font-size: 1.5em;
    
}
.logiciel{
    margin-left: 15em;
    font-size: 3em;
    margin-top: -2.1em;
}
.photoshop{
    margin-left: 30em;
    font-size:1.5em ;
    color:white;
    margin-top: -0.5em;
}
.illustrator{
    margin-left: 30em;
    font-size:1.5em ;
    color:white;
}
.logohtml{
    margin-bottom: 6em;
    margin-top: -6.5em;
    margin-left: 8.5em;
}
.logocss{
    margin-bottom: 7em;
    margin-top: -7em;
    margin-left: 7.3em;
}
.logosql{
    margin-left: 8.7em;
    margin-top: -8em;
    margin-bottom: 4.3em;
}
.loisir{
    text-align: center;
    color: white;
    letter-spacing: 0.2em;
    font-size:3em ;
    margin-top: -0.1em;
    
}
.bbborder{
    border:0.5em solid #313436 ;
    margin: 2em;                       
    background-color: #313436; 
}
.logops{
    margin-top: -10em;
    margin-bottom: 7em;
    margin-left: 49em;
}
.logobootstrap{
    margin-top: -10em;
    margin-bottom: 7em;
    margin-left: 29em;
}
.logosynfony{
    margin-top: -10em;
    margin-bottom: 4.7em;
    margin-left: 29em;
}
.logoillustrator{
    margin-top: -10em;
    margin-bottom: 4.7em;
    margin-left: 49em;   
}
.imgmontage{
    margin-left: 6em;
}
.imgescalades{
    margin-left: 5em;
}
.imgmanette{
    margin-left: 5em;
}
.design{
    margin-left: 14.5em;
    margin-bottom: 2em;
    margin-top: 1.5em;
}
.echec{
    margin-left: 5.5em;
    margin-bottom: 2em;
    margin-top: 1.5em;
}
.bbbborder{
    border:0.5em solid #313436 ;
    margin: 2em;                       
    background-color: #313436; 
}
.contact{
    letter-spacing: 0.2em;
    font-size: 3em;
    text-align: center;
    color: white;
    margin-top: -0.1em;
}
.concontact{
    text-align: center;
}

  #contact {
    overflow: auto;
  }
  #contact #form {
    width:410px;
    float:left;
  }
  #contact #form h2 {
    font: 48px 'Bree Serif', Georgia, serif;
  }
  #contact #form span {
    display:block;
    float:left;
    width:100px;
    padding-top:5px;
    font: 14px/16px'Bree Serif', Georgia, serif;
  }
  #contact #form input {
    float:left;
    width:255px;
    border:0px;
    color:#F1F1F1;
    padding:10px 10px 10px 30px;
    font: 11px/20px'Open Sans', Verdana, Helvetica, sans-serif;
    margin-bottom:10px;
  }
  #contact #form textarea {
    float:left;
    border:0px;
    width:255px;
    height:140px;
    padding:10px 10px 10px 30px;
    font: 11px/20px'Open Sans', Verdana, Helvetica, sans-serif;
    color:#F1F1F1;
    resize: none;
  }
  #contact #form input.name {
    background:#222222 url(http://img7.uploadhouse.com/fileuploads/17737/177370145f09fe433945815665aa214f80dbc6af.png) no-repeat 10px 8px;
  }
  #contact #form input.email {
    background:#222222 url(http://img6.uploadhouse.com/fileuploads/17737/177370138cc63992182149e9befabff3eafa6d23.png) no-repeat 10px 9px;
  }
  #contact #form input.captcha {
    background:#222222 url(http://img3.uploadhouse.com/fileuploads/17737/17737011310213e71805ecf2292144cbbecf42ad.png) no-repeat 10px 9px;
  }
  #contact #form textarea.message {
    background:#222222 url(http://img3.uploadhouse.com/fileuploads/17737/1773701229ed8c2f465a8274623ca8976adaf196.png) no-repeat 10px 8px;
  }
  #contact #form input.submit {
    cursor: pointer;
    width:85px;
    height:30px;
    float:right;
    padding:0px 0px 5px 0px;
    margin:10px 16px 0px 0px;
    background:#222222;
    color:#F1F1F1;
    font: 14px/16px'Bree Serif', Georgia, serif;
    text-align: center;
  }
  #contact #captcha span{
    width: 44px;
  }
  #contact #captcha input{
    background: url(http://img3.uploadhouse.com/fileuploads/17737/17737011310213e71805ecf2292144cbbecf42ad.png) no-repeat scroll 0 0 transparent;
    margin: 5px 0 0;
    padding: 0;
    border: medium none;
    cursor: pointer;
    width: 15px;
  }
  .conconcontact{
      margin-left: 15.5em;
  }
  #from input.submit{
     margin-top: 4em;
  }
  .sttrong{
      color:#313436 ;
  }
Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021

A oui je l'avais enlevé...
<!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="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</head>
<body>
        <div class="bborder">
<p class="intro"><strong>Bonjour,</strong>
<p class="introduction"><strong>Je suis Noé</strong> </p>
<p class="introduction2"> <strong> Passionné d'informatique</strong>   </p>
</div>
<div class="border">
    <br>
   <p class="compétences">COMPETENCES</p> 
   <p class="langages">Langages</p><p class="frameworks">Frameworks</p><p class="logiciel">Logiciels</p><br><br><br>
   <p class="photoshop">P H O T O S H O P</p><br><br><img src="photoshop.png" width="40" alt="photoshop" class="logops">
   <p class="illustrator">I L L U S T R A T O R</p><img src="illustrator.png" alt="illustrator" width="40" class="logoillustrator">
   <p class="bootstrap">B O O T S T R A P</p><br><br><img src="bootstrap2.png" width="50" alt="bootstrap" class="logobootstrap">
   <p class="symfony">S Y M F O N Y</p><img src="img synfony.png" width="45" alt="synfony" class="logosynfony">

   <p class="html"> H T M L </p><img src="logo html.png" width="40" alt="logo HTML" class="logohtml">
   <p class="CSS">C S S</p><img src="css3-logo.png" width="80" alt="logo css" class="logocss">
   <p class="PHP"> P H P </p>
   <p class="MYSQL"> S Q L</p><img src="logo my sql.png" alt="logo sql" class="logosql">
</div>

<div class="bbborder"><br>
    <p class="loisir ">LOISIRS </p>
    <img src="img montage.png" width="200"  alt="img montage" class="imgmontage">
    <img src="Escalade.png" width="200" alt=" img escalade" class="imgescalades">
    <img src="img manette.png" alt="img manette" width="200" class="imgmanette">
    <img src="chaise desingn.png" width="200" alt="chaise design" class="design">
    <img src="img echec.png" width="200" alt="img echec" class="echec">
</div>


<div class="bbbborder"><br>
    <p class="contact">CONTACT</p>
<div class="conconcontact">
    <section id="contact">
        <div class="content">
            <div id="form">
                <form action="" id="contactForm" method="post">
                    <span class="sttrong">Name</span>
                    <input type="text" name="name" class="name" placeholder="Nom" tabindex=1 />
                    <span class="sttrong">Email</span>
                    <input type="text" name="email" class="email" placeholder="Email" tabindex=2 />
                    <span id="captcha"></span>
                    <input type="text" name="captcha" class="captcha" size="4" placeholder="Sujet du message" tabindex=3 />
                    <span class="sttrong">Message</span>
                    <textarea class="message" placeholder="Message" tabindex=4></textarea>
                    <input type="submit" name="submit" value="Send e-mail" class="submit" tabindex=5>
                </form>
            </div>
</section>
</div>
</div>


</body>
</html>
Messages postés
31467
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
3 279
Alors, relis ma première réponse ..... tu dois charger ton css APRES celui de bootstrap !
Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021

Donc je dois mettre mon link css après celui de mon bootstrap c'est bien ça?
Messages postés
31467
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 février 2021
3 279
oui
Messages postés
6
Date d'inscription
mardi 23 février 2021
Statut
Membre
Dernière intervention
24 février 2021

J'ai fait ce que tu as dis et sa a belle e bien marché je t'en remercie.
Bonne soirée.