Discussion :

[Mister Paul]

Bonjour,

je voudrais faire cette mise en page de 3 div dans un 4ème div container (cf image)
Je n'y arrive pas et dès que le texte (le lorem ipsum) arrive au niveau du div jaune tous les div s'empilent...

Que me conseillez-vous d'utiliser ?

Merci pour l'aide
PAul

[Invité]

Bonjour,

1- il n'y a pas de "div jaune"...
(je suis dalmatien, pas daltonien... )

2- Merci de montrer les codes CSS et HTML

[Mister Paul]

Oops oui je voulais parler du div vert !
( il faut que je consulte )

Bon ceci dit pour envoyer du code il faut attendre parce que je retouche à celui de Virtuemart pour des listes de produits. Et je me suis rendu compte que le prix que je souhaite dans le bloc vert, accroché en haut à droite du conteneur, ne permet pas de renvoyer mon joli titre à la ligne si celui-ci est long et qu'on est avec une petite fenêtre...

Au fait quelle est la meilleure technique pour tout ce genre de div imbriqués et élastiques ?
C'est possible avec Flex ce que j'essaie de faire ?

[Invité]

On attend ton code.......

[Mister Paul]

Alors voilà...
Le PHP :

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
 
<div class="row">
	<div class="product vm-products-horizon">
		<div class="spacer product-container">
			<div class="vm-product-media-container">
				<!-- IMAGE zone ROUGE-->
			</div>
			<div class="vm-product-descr-container-0">
				<h2><!-- TITRE zone BLEUE--></h2>
				<p class="product_s_desc"><!-- DESCRIPTION zone BLEUE--></p>
			</div>
			<div class="vm3pr-2">
        			<div class="product-price"><!-- INFO PRIX zone VERTE-->
          				<div class=""><!-- Autres div éventuels (si remise de prix, etc.)--></div>
        			</div>
        		<div class="clear"></div>
      		</div>
	</div>
  </div>
</div>

Le CSS de base dans Virtuemart :

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
 
.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.product {
  float: left;
  border: 0px solid #ddd;
  min-width: 220px;
}
 
.spacer {
  position: relative;
}
.vm-product-media-container {
  float: left;
  max-width: 180px;
}
.vm-product-descr-container-0 {
  float: left;
  min-height: 50px;
  margin-bottom: 6px;
}
.vm3pr-3 {
}
.vm-products-horizon .product-price {
  float: right;
}
.product-price {
  display: block;
  min-height: 56px;
  margin: 0 0 6px;
  text-align: right;
}
.clear {
   clear: both;
}

J'ai ajouté:

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
 
.row {
    overflow: hidden;
}
.vm-product-media-container {
  float: left;
  max-width: 180px;
}
.vm-product-descr-container-0 {
  position: absolute;
}
.vm-products-horizon .product-price {
  right:5px;
  top:10px;
  position:absolute;
}

Le souci c'est que quand le texte du div .vm-product-descr-container-0 (zone en bleu) atteint le .product-price (zone en vert) , il passe en dessous. J'aimerais qu'il aille automatiquement à la ligne...

[Invité]

Bonjour,

il faut mettre le div "vm3pr-2" DANS le div "vm-product-descr-container-0" :

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
<div class="row">
  <div class="product vm-products-horizon">
    <div class="spacer product-container">
      <div class="vm-product-media-container">
        IMAGE zone ROUGE
      </div>
      <div class="vm-product-descr-container-0">
        <div class="vm3pr-2">
          <div class="product-price">INFO PRIX zone VERTE
            <div class="">Autres div éventuels (si remise de prix, etc.)</div>
          </div>
          <div class="clear"></div>
        </div>
        <h2>TITRE zone BLEUE</h2>
        <p class="product_s_desc">DESCRIPTION zone BLEUE</p>
      </div>
    </div>
  </div>
</div>

Code css :

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

1
2
3
4
.product-container { display:flex; display:-webkit-flex; }
.vm-product-media-container { background:red; }
.vm-product-descr-container-0 { background:lightblue; }
.vm3pr-2 { float:right; background:lightgreen; width:30%; }

[Mister Paul]

Merci de prendre du temps pour mes petits soucis.


J'ai bien modifié le code php comme tu l'indiques pour déplacer le div "vm3pr-2"
J'ai ajouté ton code css

Mais, sauf erreur de ma part, quelque chose ne va pas car .vm-product-descr-container-0 (bleu) prend 100% du div.spacer.product-container.

Donc le texte :
- commence complètement à gauche, au-dessus de .vm-product-media-container,
- et va complètement à droite => toujours pas de saut de ligne du texte quand il touche vm3pr-2 (dont je ne vois pas le background vert)

[Invité]

Je n'ai pas l'ensemble du code. On ne peut pas tester "in situ".
À toi d'adapter.

Supprime le CSS que TU as ajouté (float:left,... position:absolute,...)

[Mister Paul]

C'était bien ça !

J'ai dû ajuster en mettant un width: 100%; sur le .vm-product-descr-container-0
et un width:auto; sur le .vm3pr-2
Enfin des broutilles quoi...

Merci pour l'aide.