Problème de mise en forme CSS avec Bootstrap

Bootstrap

Sujet résolu

13 octobre 2018 à 11:58:42

EDIT

merci à toi pour tes conseils

effectivement j'envisage d'utiliser tout le potentiel 'responsive' de bootstrap mais vu que je bugg dès le début, j'y vais étape par étape

je n'arrive pas non plus à utiliser les propriétés flex pour correctement répartir mon header en haut, ma section au milieu et mon footer en bas

j'ai appliqué les propriété flex sur le bloc container-fluid mais c'est sans effet sur l'alignement vertical

**************************************

Bonjour

j'essaie de mettre en forme mon site avec Boostrap mais je rencontre quelques difficultés

la première, est que je ne parviens pas à appliquer une image de fond à mon header

j'ai essayé différente façon en ajoutant des classes et en jouant sur la nature de mon élément mais rien n'y fait

par exemple, j'aimerais que l'image de fonds occupe mon header

les propriétés CSS que j'essaie d'appliquer à .logo ou .insrciption, .connexion sont également sans effets

je ne vois pas d'erreur

j'ai vérifié le nom de mon image et son chemin (dans un sous dossier images du dossier dans lequel se trouve mon fichier index.html

d'avance merci pour votre aide

code HTML

<!DOCTYPE html>
<html lang="fr">
  <head>

    <title>Bootstrap template</title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type ="text/css" media="screen" href="css/main.css" />
    <!-- include bootstrap library -->
     <!--<script src="js/bootstrap.min.js"></script>-->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>

  <body>
      <div class="container-fluid">
        <!--header-->
          <header class="row">
              <div class="titre col-md-10">
                  <h1>CONSULTATIONS</h1>
              </div>
              <div class="user col-md-1">
                <div class="row"><div class="connexion col-md-12"><a href="#" >Connexion</a></div></div>
                <div class="row"><div class="inscription col-md-12"><a href="#" >Inscription</a></div></div>
                      <!--<p><a href="#" >Connexion</a></p>
                      <p><a href="#" >Inscription</a></p>-->
              </div>
              <div class="logo col-md-1">
                  <img src="images/logo-bordeaux.png" alt="Logo de la ville de Bordeaux">
              </div>
          </header>

          <!--corps principal de la page-->
          <div class="row " >
            <div class="col-md-10">
              <div class="row"><div class="col-md-12">paragraphe 1</div></div>
              <div class="row">
                <div class="col-md-8">
                  paragraphe 2
                </div>
                <div class="col-md-4">
                  paragraphe 2
                </div>
              </div>
              <div class="row">
                <div class="col-md-1">paragraphe 3</div>
                <div class="col-md-9">paragraphe 3</div>
                <div class="col-md-2">paragraphe 3</div>
              </div>
              <div class="row">
                <div class="col-md-1">paragraphe 4</div>
                <div class="col-md-9">paragraphe 4</div>
                <div class="col-md-2">paragraphe 4</div>
              </div>
            </div>
            <div class="menu col-md-2">
              <div class="row"><div class="col-md-12">paragraphe 1</div></div>
              <div class="row"><div class="col-md-12">paragraphe 2</div></div>
              <div class="row"><div class="col-md-12">paragraphe 3</div></div>
            </div>

          </div>

          <!--footer de la page-->
          <div class="footer row">
            <div class="col-md-12">
              <div class="row"><div class="col-md-12">paragraphe 1</div></div>
              <div class="row">
                <div class="col-md-2">
                  paragraphe 2
                </div>
                <div class="col-md-6">
                  paragraphe 2
                </div>
                <div class="col-md-1">
                  paragraphe 2
                </div>
                <div class="col-md-1">
                  paragraphe 2
                </div>
                <div class="col-md-1">
                  paragraphe 2
                </div>
                <div class="col-md-1">
                  paragraphe 2
                </div>
              </div>
          </div>

      </div>




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>

</html>

CSS associé

body {
  padding-top: 10px;
}

header {
  background-image: url(images/bg-header.png);
  height: 90px;
}

.titre h1 {
  text-align: left;
  color:black;
}

.connexion .inscription {
  background-color: black;
}

.logo {
  margin : auto;
}

.user p {
  color:white;
  background-color: #5C5C55;
  width: 130px;
  height: 35px;
  text-align: center;
  margin : 10px;
}

.user p a {
  color:white;
}

  /*[class*="col-"] {
background-color: lightgreen;
  border: 2px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
}*/

-
Edité par djé22 13 octobre 2018 à 13:22:48

tormod

13 octobre 2018 à 13:02:27

salut a toi peut tu nous envoyer arborescence complète des fichiers de ton site (simplement pour vérifier)?

ps : l'un des grand avantage de Bootstrap c'est son coter responsive, je te conseil donc de definire dés le début toute le taille d’écran :

class="col-xl-12 col-lg-12 col-md-12 col-sm-12"

edit :

de mon coter sa marche parfaitement :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container-fluid">
        <!--header-->
          <header class="row" style="background-image: url(cinqueterre.jpg); height: 90px;">
              <div class="titre col-md-10">
                  <h1>CONSULTATIONS</h1>
              </div>
              <div class="user col-md-1">
                <div class="row"><div class="connexion col-md-12"><a href="#" >Connexion</a></div></div>
                <div class="row"><div class="inscription col-md-12"><a href="#" >Inscription</a></div></div>
                      <!--<p><a href="#" >Connexion</a></p>
                      <p><a href="#" >Inscription</a></p>-->
              </div>
              <div class="logo col-md-1">
                  <img src="cinqueterre.jpg" alt="Logo de la ville de Bordeaux">
              </div>
          </header>
      </div>
	</body>
</html>

tente rafraîchie le cache du navigateur (ctrl + F5).

-
Edité par tormod 13 octobre 2018 à 13:15:25

si l'art du débogage est de traquer les erreurs alors la programmation est l'art de les créer

djé22

13 octobre 2018 à 13:14:10

tormod

13 octobre 2018 à 13:20:23

a tu vue mon édit? envoie l’arborescence du dossier images et css

-
Edité par tormod 13 octobre 2018 à 13:22:03

si l'art du débogage est de traquer les erreurs alors la programmation est l'art de les créer

djé22

13 octobre 2018 à 13:28:12

effectivement çà fonctionne si je mets le background-image directement dans le code html

mais si je veux appliquer le background-image à partir de mon fichier css c'est sans effet

je t'ai transmis un screenshot de l'arbo : dans le sous dossier CSS il n'y a que mon fichier main.css et dans le fichier images, mes images dont cele que je veux appliquer

tormod

13 octobre 2018 à 13:35:33

dans se cas tente d'ajouter ceci a ton css

body{
     background-color : red;
}

puis sur le navigateur fait ctrl + F5, si ta page est pas rouge alors c'est que tu a un problème avec l'ajout de ton css

-
Edité par tormod 13 octobre 2018 à 13:36:07

si l'art du débogage est de traquer les erreurs alors la programmation est l'art de les créer

djé22

13 octobre 2018 à 13:46:32

effectivement l'ajout du background-color sur le body n'a rien fait (après avoir supprimé toutes les autres couleurs de fond)

pourtant certains mise en formes de mon css s'appliquent (les couleurs de fond que j'ai affecté au header, section et footer) ???

-
Edité par djé22 13 octobre 2018 à 13:46:46

tormod

13 octobre 2018 à 13:59:12

je crois que je viens de comprendre tente de remplacer ton head par sa :

<head>
    <title>Bootstrap template</title>
    <meta charset="utf-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- include bootstrap library -->
    <!--<script src="js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	<link rel="stylesheet" type ="text/css" media="screen" href="css/main.css" />
</head>

-
Edité par tormod 13 octobre 2018 à 14:00:27

si l'art du débogage est de traquer les erreurs alors la programmation est l'art de les créer

djé22

13 octobre 2018 à 14:29:45

effectivement çà fonctionne, le body est rouge

mais çà ne prends toujours pas le background-image du css

c'était quoi l'erreur dans le head ?

tormod

13 octobre 2018 à 15:19:45

en fait quant tu met ton css avent les fichier bootstrap, bootstrap modifie ton css a l'inverse si tu met ton css après bootstrap c'est ton css qui qui modifie bootstrap.

toujours dans la même idée si ton background-image ne fonctionne pas c'est très certainement par-ce que le JS de bootstrap le modifie.

donc place ton JS dans le head

-
Edité par tormod 13 octobre 2018 à 15:21:26

si l'art du débogage est de traquer les erreurs alors la programmation est l'art de les créer

djé22

13 octobre 2018 à 18:56:23

je viens de faire ce que tu m'as dit mais çà ne change rien

merci pour ton aide

djé22

15 octobre 2018 à 12:13:50

je relance pour des idées car je reste bloqué...

ZahiaMammasse

11 novembre 2018 à 17:46:22

même soucis que toi!!!! je veux mettre un background image dans le container fluid de mon header...........

j'ai trouvé mon erreur juste une histoire de point .... (moi, je tapais 3 points au lieu de 2, ça bloquait à cause de ça

essaie en corrigeant ta ligne de code suivante :background-image: url(images/bg-header.png);

en : background-image: url("../images/bg-header.png");

-
Edité par ZahiaMammasse 11 novembre 2018 à 17:50:18

djé22

13 novembre 2018 à 18:33:21

merci+++

c'était bien çà

ZahiaMammasse

15 novembre 2018 à 19:55:51

lol j'ai galéré 3 semaines!!!!! maintenant, je sais que c'est 2 points!! je n'oublierai jamais!!!