Déformation de mon site à cause de bootstrap

Résolu/Fermé
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021 - 23 févr. 2021 à 23:38
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021 - 24 févr. 2021 à 00:16
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.
A voir également:

6 réponses

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
23 févr. 2021 à 23:43
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

0
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021
Modifié le 23 févr. 2021 à 23:51
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 )
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
23 févr. 2021 à 23:51
Discussion déplacée dans le bon forum
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
23 févr. 2021 à 23:52
Dans le code que tu nous montres je ne vois pas les includes de bootstrap...
0
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021
23 févr. 2021 à 23:54
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 ;
  }
0
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021
23 févr. 2021 à 23:59
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>
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
24 févr. 2021 à 00:01
Alors, relis ma première réponse ..... tu dois charger ton css APRES celui de bootstrap !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021
24 févr. 2021 à 00:11
Donc je dois mettre mon link css après celui de mon bootstrap c'est bien ça?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
24 févr. 2021 à 00:12
oui
0
Wanss Messages postés 6 Date d'inscription mardi 23 février 2021 Statut Membre Dernière intervention 24 février 2021
24 févr. 2021 à 00:16
J'ai fait ce que tu as dis et sa a belle e bien marché je t'en remercie.
Bonne soirée.
0