Sujet Précédent Sujet Suivant

Supprimer les espaces verticaux entre mes blocs

Fermé
Anouchka2586 Messages postés 50 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 - 6 juil. 2018 à 00:05
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 - 6 juil. 2018 à 13:23
Bonjour,
J'utilise flexbox pour ma mise en page.
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 ? 
<!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" />

<!-- 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="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>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>


body, conteneur{margin: 0}
header{margin-top: 0;}
.menu{height: 40px; background-color: blue}
.home, .section_one, .section_two, .section_three{height: 400px}
footer{height: 150px}

header{margin-top: 0px;}

.section_one{
  background-image: url('img/post-bg.jpg');
  border: 3px solid red;
}

.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;
}


Et j'ai ce rendu (j'ai mis les bordures en rouge juste pour pouvoir les distinguer et voir les espaces qu'il y a )
A voir également:

2 réponses

Réponse 1 / 2
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 151
6 juil. 2018 à 00:08
.div_one{
background-color: white;
width: 500px;
height: 320px;
position: absolute;
margin-left: 25%;
margin-top: 40px;
margin-bottom:40px;
z-index: 10
}

Margin c'est un espace entre le bord de la balise (par ex div) et le bord de l'autre élément (une autre div les cotés le haut de la page)

Il suffit de mettre margin-top: 0; et ça enlève l'espace

Le Padding c'est la même chose mais vers l'intérieur
0
Anouchka2586 Messages postés 50 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
6 juil. 2018 à 00:59
J'ai mis margin-top: 0; et ça ne change rien. Voici un bloc par exemple: 
 <!-- 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_one{
  background-image: url('img/post-bg.jpg');
  background-color: rgba(0,0,255,0.3)
  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
}


Voici le rendu :
0
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 151
6 juil. 2018 à 08:57
le .div_one était un exemple il faut le faire sur tout les bloc avec un margin top

Regarde avec F12 comment est agencé ton site et quelle balises se touche

En générale un vue graphique permet en mettant sa souris dessus de voir les propriété
0
Réponse 2 / 2
Anouchka2586 Messages postés 50 Date d'inscription vendredi 10 octobre 2014 Statut Membre Dernière intervention 20 mars 2022 5
6 juil. 2018 à 10:39
J'ai mis ça et ça ne change pas : 
header, .section_one, .section_two, .section_three, footer{margin-top: 0px;}
0
nulenmathe Messages postés 425 Date d'inscription dimanche 7 septembre 2014 Statut Membre Dernière intervention 31 juillet 2019 151
6 juil. 2018 à 13:23
tu la mis au début ou a la fin du code ?

Car il lis le code de haut en bas donc il remplace les valeurs
0

Discussions similaires

Comment supprimer une conversation Messenger pour les 2 personnes ?
mercidemaider -
sd -

7 réponses