28111 sujets

CSS et mise en forme, CSS3

[Résolu] Bloc texte à droite ou sous l'image en fonction de la page

Bonsoir
J'ai un souci qui arrive en fonction de la taille de l'image. J'ai mis le texte à droite, mais je souhaiterais savoir s'il est possible de le mettre à droite uniquement s'il remplit (1/3 au hasard) du div.encadre . En effet, comme vous pouvez le constater sur ce cas, ce n'est pas très ergonomique Smiley decu . Si c'est inférieur comme ce cas, alors j'aimerais que le texte commence sous l'image
https://cochanger.eu/media-web/toits-alternatifs
Cordialement
Modifié par HDcms (19 Sep 2022 - 13:07)
Modérateur
Bonjour,

Une idée est d'obliger le contenu des <p> de l'encadré à avoir une largeur minimal de x % de leur parent.

On peut par exemple le faire avec un pseudo-element css. Dans ton cas, le code pourrait être quelque chose du genre :
div.encadre p:before {
  content: "";
  min-width: 33%;
  display: block;
  overflow: hidden;
}

À adapter éventuellement.

Amicalement,
Bonjour
Merci, cela fonctionne bien Smiley smile J'étais mal barré avec https://developer.mozilla.org/fr/docs/Web/CSS/calc
Je me pose encore quelques questions
1/ effets de bords ou interaction avec d'autres paramétrages,
je vois que ton code ne dépend pas de l'image. Est-ce que peut avoir un impact dans d'autre cas (image, bloc div.encadre..) ?
2/ .com-content-article__body p img
il me semble que je ne peux pas supprimer ce code ? car étrangement le texte retournant à la ligne sur https://cochanger.eu/media-web/savez-vous-planter-chez-nous
3/ centrer l'image pour légère amélioration quand le texte retourne à la ligne
je ne suis pas sûr que cela conviendrait partout, je ne vois pas pourquoi dans mon code, l'image est à gauche?
/* texte mis à droite de l'image s'il y a un minimum de 33% */
div.encadre p:before {
  content: "";
  min-width: 33%;
  display: block;
  overflow: hidden;
}

/* texte mis à droite de l'image dans l'affichage d'un article */
.com-content-article__body p img {
	float:left;
}

/* alignement texte J! à droite de l'image */
	div[itemprop="articleBody"] p>img{ 
	padding: 10px!important;
}

Cordialement
Modifié par HDcms (19 Sep 2022 - 11:47)
Modérateur
Bonjour,
HDcms a écrit :
1/ effets de bords ou interaction avec d'autres paramétrages,
je vois que ton code ne dépend pas de l'image. Est-ce que peut avoir un impact dans d'autre cas (image, bloc div.encadre..) ?

Ça peut toujours avoir des effets de bord ! Règle ! Smiley lol

Si tu veux limiter les effets de bords, mets une classe sur les <p> concernés (ceux qui contiennent le texte qui doit aller à la ligne) et applique le css que j'ai donné précédemment uniquement pour cette classe.
HDcms a écrit :
2/ .com-content-article__body p img
il me semble que je ne peux pas supprimer ce code ? car étrangement le texte retournant à la ligne sur https://cochanger.eu/media-web/savez-vous-planter-chez-nous

Rien compris ! (s'il s'agit de supprimer le float sur les images, non, on ne peut pas le faire, car ce float est nécessaire pour que la solution fonctionne).
HDcms a écrit :
3/ centrer l'image pour légère amélioration quand le texte retourne à la ligne
je ne suis pas sûr que cela conviendrait partout, je ne vois pas pourquoi dans mon code, l'image est à gauche?

Si l'image est en float:left, elle reste à gauche même si elle est toute seule sur sa ligne (c'est le principe de base du float).

Pour que l'image soit centrée sur sa ligne lorsque le texte passe à la ligne, tout en conservant la technique du float sur les images quand il y a assez de place à droite des images, je crains qu'il ne faille changer de méthode et utiliser les media queries (mais là, on s'embarque dans du code nettement plus compliqué car il faut penser à tous les cas selon la place disponible : prise de tête assurée vu le désordre régnant dans ton code). Le principe serait de n'utiliser le float sur les images uniquement pour les écrans et/ou fenêtres assez larges, et de ne pas mettre de float du tout sur les images pour les écrans et/ou fenêtres étroites.

Amicalement,
Modifié par parsimonhi (19 Sep 2022 - 13:00)
Bonjour
Merci pour ce complément d'informations
1/ cela obligerait à le faire à chaque saisie dans le cms. Tant pis cela a l'air de fonctionner
2/ pas grave, je me demandais si je pouvais enlever ce code, mais à priori non
3/ je laisse tomber, de manière générale, je souhaite faire au mieux, privilégier la simplicité et régler si possible si nécessaire au cas par cas (d'autant que c'est bénévole)
@+
Prévenir un modérateur
Répondre au sujet
Aller à