Discussion :

[herveD]

Bonjour
Apèrs pas mal de recherche, je partage le besoin serait dans le cas où le bloc de partage réseaux sociaux se trouve à la droite de l'image (cas ou la hauteur du texte est plus petite que l'image) de déplacer le bloc de partage à gauche sous l'image. https://v2.alterweb.info/site-web/co...s-sous-dossier

j'ai fait différents essais avec white-space (entre autre):

Code :

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

1
2
3
.jssocials-shares{  
  white-space:normal;
}

Voici la structure:

Code html :

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

1
2
3
4
5
<div>
	<span class="acfup-item"><img src="https://v2.alterweb.info/0-alterweb/site-web/communautes/test-site-commun-avec-img-dans-sous-sous-dossier.jpg"></span>		  
	<p>Falling Fruit ...</p> 
	<div id="share478" class="jssocials"><div class="jssocials-shares">...</div></div>       
</div>

[NoSmoking]

Bonjour,
pour permettre à un élément situé à côté d'un élément flottant il faut utiliser la propriété clear.
Dans ton cas :

Code :

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

1
2
3
4
.jssocials-shares{  
/*  white-space:normal;    /* ne sert pas ici */
  clear: left;
}

Au passage :

Code html :

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

<div id="share478" class="jssocials"><div class="jssocials-shares">...</div></div>

peut s'écire simplement:

Code html :

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

<div id="share478" class="jssocials jssocials-shares">...</div>

[herveD]

Bonjour
Cela fonctionne parfaitement ; Merci
je ne peux pas alléger le code HTML car le bandeau de partage est généré par le cms (joomla dans ce cas)

J'en profite pour une question similaire, mais je ne sais pas si réalisable?
C'est pour remonter l'image (généré par le cms) à gauche (ou droite) du bloc texte sur la catégorie
https://v2.alterweb.info/site-web/communaute

[NoSmoking]

Le principe est le même mais il faut que la structure s'y prête, ce qui n'est pas le cas sur cette page.

C'est soit float:left pour image à gauche et écoulement du texte autour par la droite, soit float:right pour image à droite et écoulement du texte autour par la gauche.

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
<div class="groupe-image image-left">
  <img src="https://nosmoking.developpez.com/demos/css/images/image_001.jpg" alt="illustration">
  <h2><code>float:left</code></h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
    Nulla in tortor nec est placerat condimentum in nec magna.
  </p>
  <p class="clear-float">
    La suite qui passe toujours sous l'image ...
  </p>
</div>
<div class="groupe-image image-right">
  <img src="https://nosmoking.developpez.com/demos/css/images/image_002.jpg" alt="illustration">
  <h2><code>float:right</code></h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    Maecenas tellus elit, suscipit at laoreet et, tempor a orci.
    Nulla in tortor nec est placerat condimentum in nec magna.
  </p>
  <p class="clear-float">
    La suite qui passe toujours sous l'image ...
  </p>
</div>

c'est le même code seule la classe du conteneur diffère.
Le CSS à appliquer est le suivant :

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
.groupe-image {
  margin-bottom: 1em;
  padding: .25em;
  border: 1px solid #069;
}
.image-left img {
  float: left;
  margin: 0 1em 1em 0;
}
.image-right img {
  float: right;
  margin: 0 0 1em 1em;
}
.clear-float {
  clear: both;    /* équivalent à clear:left et clear:right */
  color: #A00;    /* juste pour voir */
}
img {
  max-width: 100%;
}

[herveD]

Bonsoir
Merci d'avoir essayé mais effectivement j'ai effectivement le même problème de génération par le cms

Code php :

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

1
2
3
4
5
6
7
<?php if (stripos($this->item->introtext, 'iframe') !== false) { // bloc texte
		echo $this->item->introtext; }
	     else {echo JHTML::_('string.truncate',  strip_tags($this->item->introtext, ['br','img','iframe','b','strong']), 300, true, true) ;} ?>
 
	<?php if (!empty($this->item->jcfields[101]->value)): ; ?>
  		<?php  echo $this->item->jcfields[101]->value ;/* IMG Ress - Doc. Site Web */ ?>
	<?php endif; ?>

Je poste la structure HTML dès fois qu'il apparaisse une autre piste

Code html :

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

1
2
3
4
5
6
<div class="item-content">
	<div class="page-header"></div>			
    	<ul class="tags list-inline">...</ul>		
	Falling Fruit est une carte en ligne qui référence tous les endroits dans le monde où vous pouvez trouver des plantes comestibles sur le domaine public, à savoir principalement des arbres fruitiers. Pommiers, cerisiers, noyers, poiriers…etc., y’a de quoi vous nourrir.. C’est en quantifiant cette...		  		
	<span class="acfup-item"><img ....></span>		
</div>

[NoSmoking]

j'ai effectivement le même problème de génération par le cms

il a bon dos le CMS, il te faut faire une action pour qu'il te délivre un code HTML cohérent, deux page « semblable » et deux structures différentes !?!

Je poste la structure HTML dès fois qu'il apparaisse une autre piste

Le CSS enjolive le HTML mais ne répare pas les anomalies de structure, cependant il est capable de mettre des emplâtres ce qui, quoiqu'il arrive, rendra la maintenance délicate un jour ou l'autre.

Une façon de t'en sortir est de passer par une mise en forme sur base de GRID.

Sur base de la structure suivante, reprise de ta page :

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
<div class="item-content">
  <div class="page-header">
    <h2 itemprop="name">...</h2>
  </div>
  <dl class="article-info text-muted">
    <dt class="article-info-term">...</dt>
  </dl>
  <ul class="tags list-inline">
    <li class="list-inline-item tag-3 tag-list0" itemprop="keywords">
      <a href="/mot-cle/cueillir" class="btn btn-sm btn-info">...</a>
    </li>
  </ul>
  Ici le texte sans conteneur...
  <span class="acfup-item">
    <img src="..." alt="">
  </span>
</div>

Il te faut commencer par déclarer des règles pour les différentes zones à prendre en compte, soit :

Code :

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

1
2
3
4
.item-content .page-header  { grid-area: header;}
.item-content .article-info { grid-area: info;}
.item-content .list-inline  { grid-area: list;}
.item-content .acfup-item   { grid-area: image;}

Ceci étant fait, déclarons le conteneur comme GRID layout :

Code :

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

1
2
3
4
5
6
7
.item-content {
  display: grid;
  grid-template-areas:
    "header header"
    "list list"
    ". image";
}

grid-template-areas te permet de positionner les différentes zones à des endroits bien particuliers de cette « grille ».

La partie déclarée avec un point(.) est une partie vide dans laquelle ton texte sans conteneur va venir se loger et il sera positionné à gauche de ton image.

Si tu souhaites l'image à droite il te faut modifier la propriété grid-template-areas comme suit :

Code :

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

1
2
3
4
grid-template-areas:
  "header header"
  "list list"
  "image .";  /* le point passe à droite */

Tu perds la notion de texte qui peut s'écouler le long de l'image mais cela devrait répondre à ta problématique et il te faudra surement faire quelques ajustements.

C'est un emplâtre, même si opérationnel le mieux serait quand même de faire modifier le code PHP pour avoir quelque chose de simple à gérer ce qui reste la base des bases