Div recalcitrante

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention - 4 déc. 2020 à 16:29

bonjour a tous

je suis en train d aider une amie pour son site tres basique je l admet , mais bon faut bien commencer

j ai des soucis avec les divs que je désire placer sous la vidéo

j ai deux divs avec chacune 3 divs
donc 2 rangées de 3 colonnes

mais je n arrive pas a les positionner sous ma vidéo
je souhaiterais donc pouvoir régler comme je veux l espace entre la video et mon premier div
et regler l espace entre ma première rangee et ma deuxième rangée

voici mon code

https://codepen.io/flexi2202/pen/QWKydWJ

Merci de l aide

Afficher la suite

A voir également:

Div recalcitrante
Div c++ - Télécharger - Langages
<Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
Div pascal - Télécharger - Édition & Programmation
Div x - Télécharger - Conversion & Codecs
Body d'un mailto ✓ - Forum HTML

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,
Le code se poste directement sur le forum
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

ça évite de devoir ouvrir d'autres sites .... et ça évite que ton lien ne disparaisse un jour... laissant ta question sans aucun intérêt pour d'éventuels visiteurs qui se poseraient la même question.

Réponse 2 / 2

flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention 190

bonjour
merci pour la reponse
je comprends parfaitement bien la raison
je le poste donc ici

635d79f4fd/5f6a84f2bbde5907a1548430_phone.svg" loading="lazy" alt="" class="phone-icon">069/6</a>
  </div>
    <div class="video-container">
      <video autoplay="" loop="" muted="" id="video-bg">

        <source src="http://bigcom.com/assets/2014/08/iChooseB.mp4" type="video/mp4">
      </video>
    </div>

</div>
</header>

<div class="conteneur1">

 <div class="bloc1">
 <p>section1</p>
  <img src="image1.jpg"  >

 </div>
 
 <div class="bloc2">
 <p>section2</p>
  <img src="image2.jpg"  >
 </div>
 
  <div class="bloc3">
  <p>section3</p>
 <img src="image3.jpg"  >
 </div>
 
</div>
<div class="conteneur2">

 <div class="bloc4">
 <p>section1</p>
  <img src="image1.jpg"  >

 </div>
 
 <div class="bloc5">
 <p>section2</p>
  <img src="image2.jpg"  >
 </div>
 
  <div class="bloc6">
  <p>section3</p>
 <img src="image3.jpg"  >
 </div>
 
</div>

<!-- partial -->
  
</body>
</html>

#video-bg{
  width:100%;
 }

.header {
  display: flex;
  width:80%;
  text-align:center;
  margin: 0 auto;
 }

.header-left {
  background: red;
  width:25%;
display: flex;
    align-items: center;
    justify-content: center;
}

.navigation {
   padding-top:30px;
  padding-bottom:30px;
  position:absolute;
  top:0;
  width:50%;
  z-index:1;
  flex: 1 1;
}

.header-right {
  background: green;
  width:25%;
 margin-top: 10px;
    justify-content: center;
}
  #wrap{
      width: 50%; 
      height: 50px; 
      margin: 0;
      z-index: 99; 
      position: relative; 
   display: flex;
    align-items: center;
    justify-content: center;
         }
   
      .navbar{
      height: 50px;
      padding: 0;
      margin: 0;
      position: absolute; 
      }
   
      .navbar li{
      height: auto;
      width: 135.8px; 
      float: left;  
      text-align: center; 
      list-style: none;  
      font: normal bold 13px/1em Arial, Verdana, Helvetica;  
      padding: 0;
      margin: 0;
     
      }
      .navbar a{       
      padding: 18px 0;  
      border-left: 1px solid #ccc9c9;
      text-decoration: none; 
      color: white; 
      display: block;
      }
   
      .navbar li:hover, a:hover {
      background-color: #444444;
      } 
   
      .navbar li ul{
      display: none;
      height: auto;         
      margin: 0; 
      padding: 0; 
      }  
   
      .navbar li:hover ul{
      display: block;
      }
   
      .navbar li ul li {
      background-color: #444444;
      } 
   
      .navbar li ul li a{
      border-left: 1px solid #444444; 
      border-right: 1px solid #444444; 
      border-top: 1px solid #c9d4d8; 
      border-bottom: 1px solid #444444; 
      }
   
      .navbar li ul li a:hover{
      background-color: #a3a1a1;
      }
   
      .video-container {
  z-index: -100;
  width: 100%; 
  height:75%;
  overflow:hidden;
   position:absolute;
   top:0;
   left:0;
   }


.navbar-logo1{
    font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
  color:#fff; 
  padding:0px 10px 0px 10px;
}
.navbar-logo2{
    font-family:Arial;
  font-size:30px;
  font-weight:bold;
  text-decoration:none;
  color:#fff; 
  padding:0px 10px 0px 10px;
}

.social-link {
margin-right:21px;
}
  div.conteneur1 { 
 display: flex;
  width:80%;
  text-align:center;
  margin: 0 auto;
  padding: 650px 0px;
background:#ccc;

}


  div.conteneur2 { 
 display: flex;
  width:80%;
  text-align:center;
  margin: 0 auto;
  padding: 0px 0px;
background:#ccc;}

  div.conteneurglobal { 
 display: flex;
  width:80%;
  text-align:center;
  margin: 0 auto;
  padding: 0px 0px;
background:#ccc;}
div.bloc1 { 

padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:33%;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:center; /* on rétablit l'alignement du texte */ }

div.bloc2 { 
padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:33%;;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:center; /* on rétablit l'alignement du texte */ }

div.bloc3 { 
padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:33%;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:center; /* on rétablit l'alignement du texte */ }

div.bloc4 { 

padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:33%;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:center; /* on rétablit l'alignement du texte */ }

div.bloc5 { 
padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:33%;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:center; /* on rétablit l'alignement du texte */ }

div.bloc6 { 
padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:33%;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:center; /* on rétablit l'alignement du texte */ }

Discussions similaires

comment remplacer un #div/0! par une cellule vide

Afficher une case vide au lieu de #DIV/0!

enlever les #DIV/0! dans une colonne calcul d'un tableau croisé

Remplacer #div0 par le chiffre 0

Ne pas afficher #DIV!0 sur une plage de cellu

Votre réponse

Discussions similaires