[BootStrap] Supprimer les espaces verticaux entre mes blocs

**MInfo25** · 05/07/2018, 12h45

Bonjour
Svp j'ai ces 4 elements(header, section_one, section_two, section_three) j'aimerais supprimer tous les espaces verticaux qui les sépares, j'aimerais que tous ces éléments soient collés verticalement. Comment faire svp ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
 
<html>
   <head>
       <!-- Metatags, links to Bootstrap and stylesheets -->
<title>xxxxxxxxxxxxxxx</title>
<meta name="description" content="Page description. No longer than 155 characters." />
 
 
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
 
 
<!-- Open Graph data -->
<meta property="og:title" content="xxxxxxxxxxxxxxxx" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
 
 
<!-- Bootstrap core CSS -->
   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
   <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
   <link href="style.css" rel="stylesheet" type="text/css">
   </head>
<body>
 
 
 
 
 
    <!-- Header -->
       <header>
      <div class="container">
   <nav id="menu" class="col-md-12" style="background-color: blue"> </nav>
 
 
   <div class="col-md-12 home" style="background-image: url('img/about-bg.jpg')"></div>
 
 
   </div>
   </header>
 
 
   <div class="container">
   <!-- Section 1 -->
   <section id="section_one" style="background-image: url('img/post-bg.jpg')">
       <div class="row">
           <div class="col-md-12"></div>
       </div>
   </section> 
 
 
<!-- Section 2 -->
   <section id="section_two" style="background-image: url('img/contact-bg.jpg')">
       <div class="row">
           <div class="col-md-12"></div>
       </div>
   </section> 
 
 
<!-- Section 3 -->
   <section id="section_three" style="background-image: url('img/home-bg.jpg')">
       <div class="row">
           <div class="col-md-12"></div>
       </div>
   </section> 
 
   <footer style="background-color: blue">
  <div class="row">
             <div class="col-md-12"></div>
    </div>
   </footer>
</div>
 
 
<!-- Bootstrap core JavaScript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
 
 
 
</html>

**bonjourajax** · 06/07/2018, 04h16

Bonsoir

Vous pouvez utiliser le display: block

Invité · 06/07/2018, 09h35

Bonjour,

tu es ici dans le forum CSS, et tu ne montres pas ton code CSS ??

bootstrap.css : version 3 ou 4 ?
style.css ?

Vérifie les margin et padding.

**MInfo25** · 06/07/2018, 10h45

J'ai changé et j'utilise maintenant flexbox et j'ai toujours les espaces entre les différents blocs :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
 
<html>
   <head>
       <!-- Metatags, links to Bootstrap and stylesheets -->
<title>LSL - Solution de logement</title>
<meta name="description" content="Page description. No longer than 155 characters." />
 
 
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
 
 
<!-- Open Graph data -->
<meta property="og:title" content="LSL - Solution de logement" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
 
 
   <link href="style2.css" rel="stylesheet" type="text/css">
   </head>
<body>
 
 
 
 
 
   <div id="conteneur"
    <!-- Header -->
       <header class="conteneurheader">
   <nav class="menu" style="background-color: blue">
    <ul class="navul">
        <li class="navmenu"><a href="#">Menu</a></li>
        <li class="navlogo"><a href="#">LSL</a></li>
        <li class="navcontact"><a href="#">Contact</a></li>
    </ul>
   </nav>
   <div class="home" style="background-image: url('img/about-bg.jpg')"></div>
   </header>
 
 
   <!-- Section 1 -->
   <section class="section_one">
  <div class="div_one">
  <h2>LSL</h2>
  <p>LSL  Que vous soyez en recherche de votre future résidence prin</p>
  </div>
  <div class="div_two">ANALYSONS ENSEMBLE VOS ATTENTES</div>
   </section> 
 
 
<!-- Section 2 -->
   <section class="section_two">
  <div class="menu_two">
      <div class="services"><a href="#">Nos services</a></div>
      <div class="solutions"><a href="#">Nos solutions</a></div>
      <div class="projet"><a href="#">Mon projet</a></div>
  </div>
   </section> 
 
 
<!-- Section 3 -->
   <section class="section_three">
  <img src="img/blog-img-2.png" alt="" width="400px" height="350px">
  <img src="img/c.jpg" alt="" width="250px" height="350px">
   </section> 
 
   <footer style="background-color: blue">
  <div>
    <pre>LSP       ZAC des longs Courts
          14111 Louvigny
      </pre>
    </div>
    <div>
      <ul>
      <li><a href="#">Nos services</a></li>
      <li><a href="#">Nos services</a></li>
      <li><a href="#">Nos services</a></li>
    </ul>
    </div>
   </footer>
</div>
 
 
<!-- Bootstrap core JavaScript -->
    <script src="js/jquery.min.js"></script>
</body>
 
 
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
body, conteneur{margin: 0}header{margin-top: 0;}
.menu{height: 40px; background-color: blue}
.home, .section_one, .section_two, .section_three{height: 29em}
footer{height: 150px}
 
 
header, .section_one, .section_two, .section_three, footer{margin-top: 0px;}
 
 
.section_one{
  background-image: url('img/post-bg.jpg');
 
 
  border: 3px solid red;
  margin-top: 0;
}
 
 
.div_one{
  background-color: white;
  width: 500px;
  height: 320px;
  position: absolute;
  margin-left: 25%;
  margin-top: 40px;
  margin-bottom:40px;
  z-index: 10
}
.div_two{
  /* align-self: flex-end; */
  background-color: blue;
  border: 3px solid white;
  width: 400px;
  height: 20px;
  position: absolute;
  margin-left: 45%;
  margin-top: 380px;
  z-index: 10
}
 
 
.section_two{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border: 3px solid red;
}
.menu_two{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 100px;
  margin-top: 10px;
  z-index: 10
}
.services, .solutions, .projet
{ list-style-type:none;
  background-color: white;
  border-left-color: blue;
  border-left-style: solid;
  border-left-width: 4px;
  width: 200px;
  height: 40px;
  padding-left: 20px;
  font-weight: bold;
}
 
 
.section_three{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}
.section_two{
  background-image: url('img/post-sample.jpg');
  border: 3px solid red;
}
.section_three{
  background-image: url('img/home-bg.jpg');
  border: 3px solid red;
}
 
 
.navul{list-style-type:none; margin: 0; padding: 0;}
 
 
.conteneur, .conteneurheader
{
display: flex;
flex-direction: column;
justify-content: center;}
 
 
.navul{
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}
 
 
footer{
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid red;
}

Invité · 06/07/2018, 11h24

Bon.
~~On n'a toujours pas la version de bootstrap...~~

Avec ce que tu montres, je n'ai pas d'espaces entre les blocs.

Merci de fournir le code nécessaire et suffisant pour reproduire et TESTER le problème.

**MInfo25** · 06/07/2018, 11h35

Je n'utilise plus bootstrap mais flexbox !

**NoSmoking** · 07/07/2018, 10h13

Bonjour,
ta construction me semble à première vue un peu bizarre mais bon ...

Côté CSS il te manque au moins un height:auto aux éléments repris ci-dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.section_two,
.section_three {
  display: flex;
  flex-direction: row;
  height; auto;
}

Invité · 10/07/2018, 14h02

Si tu veux VRAIMENT une réponse efficace : donne-nous une URL EN LIGNE.
C'est la seule façon de TESTER, et REPÉRER le souci.

**MInfo25** · 10/07/2018, 19h35

Le lien du site, je l'ai mis en ligne:http://domaine.allkers.com

Merci de votre aide !

Invité · 10/07/2018, 20h00

Bon.

Ca m'a pris 3 secondes pour voir que les images de fond se redimensionnent (background-size: 100% auto;), mais PAS la hauteur de leurs conteneurs !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.imgindex {
    position: relative;
    height: 600px;
}

Imposer une hauteur (surtout en pixels !) n'est pas très "responsive"...

Une solution
remplacer (dans le code inline) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="row imgindex" style="background-image: url('img/bloc1.png'); background-repeat: no-repeat; background-size: 100% auto; ">
....
<div class="row imgindex" style="background-image: url('img/bloc2.png'); background-repeat: no-repeat; background-size: 100% auto; ">
...

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="row imgindex" style="background: url('img/bloc1.png') center center no-repeat; background-size: cover; ">
....
<div class="row imgindex" style="background: url('img/bloc2.png') center center no-repeat; background-size: cover; ">
...

Et il faudra aussi revoir la position/padding/width/height de certains blocs pour tablette / phone ("reponsive" oblige...).

Remarques :

1- en conception "mobile first", on crée d'abord le CSS / mise en page pour mobile.
via les media queries, on ajoute ensuite les CSS pour tablette / desktop.

2- surtout, on N'écrit PAS le CSS "en ligne" (dans le code) !!
On utilise impérativement un fichier CSS externe.

3- En plus, il n'y a même pas de DOCTYPE....

**MInfo25** · 10/07/2018, 22h05

Merci beaucoup @jreaux62 ça marche mais je devrais revoir les marges (en gros plein de choses).
Pour le mobile first, on m'a pas donné la maquette de la version mobile du site mais uniquement la version desktop. Dois-je moi-même improviser une mise en page mobile ?

**valaendra** · 11/07/2018, 14h52

Bonjour,

Pour votre maquette, c'est à l'équipe de designers de s'en occuper.
A vous de leur expliquer qu'aujourd'hui, on développe un site web avec une approche "mobile first" comme précisé par @jreaux62.

[BootStrap] Supprimer les espaces verticaux entre mes blocs

Framework CSS Bootstrap

Discussions similaires

Partager

Partager