28172 sujets

CSS et mise en forme, CSS3

Problème css et bootstrap

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 et je suis sûr qu'il prend en compte mon fichier css, du moins en partie

je ne parviens pas non plus à utiliser les propriétés flex que j'aimerais appliquer à mon container-fluid afin de répartir mon head en haut, ma section au milieu et mon foter en bas

d'avance merci pour votre aide


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

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

    <!-- include bootstrap library -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <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>


  <body>
      <div class="container-fluid">

        <!--header-->
        <header class="row">
        <!--<header class="row" style="background-image: url(images/bg-header.png); height: 80px;">-->
              <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-->
          <section 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>

          </section>

          <!--footer de la page-->
          <footer class=""="ow">
            <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>
          </footer>

      </div>
  </body>

</html>





body {
  padding-top: 10px;
}

.container-fluid{
  /*display:flex;
  flex-direction: column;
  justify-content: space-around;*/
  /*background-color: yellow;*/
}

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

section {
  /*background:green;*/
}

footer {
  /*background:blue;*/
}

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

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

.logo {
  margin : auto;
}

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

.user p a {
  color:green;
}

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