Déformation de mon site à cause de bootstrap

Résolu
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -  
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 6
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 2 / 6
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Discussion déplacée dans le bon forum
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Dans le code que tu nous montres je ne vois pas les includes de bootstrap...
0
Réponse 3 / 6
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 4 / 6
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
Réponse 5 / 6
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
Donc je dois mettre mon link css après celui de mon bootstrap c'est bien ça?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
oui
0
Réponse 6 / 6
Wanss Messages postés 6 Date d'inscription   Statut Membre Dernière intervention  
 
J'ai fait ce que tu as dis et sa a belle e bien marché je t'en remercie.
Bonne soirée.
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
Que signifie ''Votre colis est arrivé sur son site de distribution'' ?
jouhry113 -
georges97 -

27 réponses