28172 sujets

CSS et mise en forme, CSS3

[Résolu] Habiller un block d'images par du texte

Salut

J'aimerais faire ça en CSS mais je bataille et ne trouve pas comment faire :

upload/1536238683-63857-2018-09-06144015-window.png

Le HTML des images :


<div class="multi-img">
	<img class="image-01" src="#"/>
	<img class="image-02" src="#"/>
</div>


Pour le CSS :


.multi-img {float:right;}

.img-01 {
	position:relative;
	left:120px;
	z-index:20;
}

.img-02 {
	margin-top:-79px;
	margin-right:129px;
}


Voir également un exemple sur Codepen.

Merci d'avance pour vos tuyaux.
Modifié par schtroumph (06 Sep 2018 - 15:00)
Modérateur
Bonjour,

c'est compliqué, il faut un peu ruser car:

- Une boite flottante est toujours rectangulaire, peu importe son contenu
- Déplacer une boite flottante par de la position relative ou de la marge négative ne déplacera pas l'espace sur lequel le texte ne peut pas se rendre.

Il faut donc découper en deux flottants, et gérer l'intérieur du flottant pour qu'il dépasse éventuellement son conteneur:

upload/1536245338-32231-float.jpg
(Un découpage assez peu intuitif) Smiley biggrin

Ce qui donne en CSS:

https://codepen.io/anon/pen/PdJpLj
Modifié par kustolovic (06 Sep 2018 - 16:50)
Meilleure solution
Au début j'avais pensé à mettre les 2 images hors d'un conteneur et en position relative chacune, mais elles sortaient du flux et le texte passait en dessous. Donc pas bon. C'est pour ça que je les avaient mise dans un conteneur. J'ai même pas pensé à les mettre chacune dans son propre conteneur !

Merci pour la solution.
La réponse au dessus c'est moi ! Je me suis trompé de compte quant j'ai répondu lol
Modifié par schtroumph (06 Sep 2018 - 18:46)
L'astuce est que la 1ère boite interne verte déborde de son container.

@kustolovic,
On peut simplifier un petit peu :
.img-01 {
	position:relative;
	float:right;
	/*  z-index:20; */
  height:150px;
  /* width:200px;*/
}

.img-02 {
  float:right;
  clear: right;
  margin-right: 100px;
  /* height:200px; */
  /*   width:200px; */
}


Par contre petit souci pour inverser la superposition des boites de couleurs
https://codepen.io/bazooka07/pen/qMPpJW
Modifié par bazooka07 (06 Sep 2018 - 19:55)
C'est normal que tu ne puisse pas inverser la superposition. Tu as mis un z-index à img-02 alors qu'il n'est pas positionné. Il doit avoir une position différente de static.

Je viens de tilter pour l'astuce et l'utilisation du height Smiley biggrin .

Merci à vous 2 pour votre aide.
Modifié par schtroumph (07 Sep 2018 - 09:14)
Sujet clos
Aller à