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.

6 réponses

jordane45
Messages postés
36069
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 août 2022
4 288
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
36069
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 août 2022
4 288
23 févr. 2021 à 23:51
Discussion déplacée dans le bon forum
0
jordane45
Messages postés
36069
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 août 2022
4 288
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
36069
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 août 2022
4 288
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
36069
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 août 2022
4 288
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