Supprimer les espaces verticaux entre mes blocs

Supprimer les espaces verticaux entre mes blocs Ccs; probleme espace vertical entre 2 blocs » Forum - Webmaster Supprimer les espaces excel (Résolu) » Forum - Excel Supprimer les espaces dans une cellule (Résolu) » Forum - Excel Comment supprimer les espaces doubles ? [Résolu] (Résolu) » Forum - Word PHP - Supprimer les espaces d'une chaine (Résolu) » Forum - PHP

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 )

Forum

Supprimer les espaces verticaux entre mes blocs Ccs; probleme espace vertical entre 2 blocs » Forum - Webmaster Supprimer les espaces excel (Résolu) » Forum - Excel Supprimer les espaces dans une cellule (Résolu) » Forum - Excel Comment supprimer les espaces doubles ? [Résolu] (Résolu) » Forum - Word PHP - Supprimer les espaces d'une chaine (Résolu) » Forum - PHP

Web: www.shapebootstrap.net

5 réponses

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

.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

Reply
réponses:
  • Anouchka2586

    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 :

  • nulenmathe

    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é

Marsh

NOVEMBER 9, 2013 AT 9:15 PM

J'ai mis ça et ça ne change pas :

header, .section_one, .section_two, .section_three, footer{margin-top: 0px;}

Reply
réponses:
  • nulenmathe

    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

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed