Bonjour,

Je vous donne le lien visuel de ce que je cherche à faire cliquez ici

L'image gauche est ce que j'ai réussi à faire il y a quelques temps déjà. Et l'image de droite, est ce que je test, mais que je n'arrive pas à faire.

Pourquoi le carré jaune se trouve en dehors de la carte?

En fonction de certains paramètres (PHP), je souhaite que le carré jaune se trouve soit en haut, au milieu ou en bas.
Donc l'idée est d'avoir une class haut, milieu et bas... Mais je n'arrive pas à positionner correctement.

Le code:

<div class="cartes">001<br/>Truc bidule<hr />
	<img src="https://nui.ovh/Test/carrejaune.png" alt="Truc bidule"/>
	<img class="xx" src="https://nui.ovh/Test/carrerouge.png" alt="xx"/>
	<div class="infos">Blabla : hhhhhhhh<br />Blabla : tttttttt </div>
</div>

<div class="cartes">001<br/>Truc bidule<hr />
	<img class="bas" src="https://nui.ovh/Test/carrejaune.png" alt="Truc bidule"/>
	<img class="xx" src="https://nui.ovh/Test/carrerouge.png" alt="xx"/>
	<div class="infos">Blabla : hhhhhhhh<br />Blabla : tttttttt </div>
</div>

le Css:

.cartes { 
display: inline-block;
background-color: white;
position: relative;
text-align: center;
border: solid 1px;
margin: 5px;
padding: 5px;
width: 200px;
height:	300px;
border-radius: 15px;
border: solid 10px;
}

.infos {
	position:absolute;
	bottom: 5px;
	text-align: left;
}

.xx {
  position: absolute; 
   bottom: 8px; 
  right: 8px;
}

.bas {
 position: absolute;
  bottom: 50px;
}

Voili voilou... Si je peux obtenir une piste

Salut, après avoir tester ton code, je me suis rendu compte que le problème vient du positionnement de ton carré jaune.

La propriété "position: absolute" sur la classe ".bas" n'est pas bonne. Il faut mettre "position: relative". La position absolute donne une position par rapport à l'écran, la position relative donne une position par rapport au parent.

Vu que tu souhaite adapter la position du carrer jaune, dans le carrer noir. Tu peux définir ton carrer jaune en position: relative. Tu as meilleur temps également de jouer avec la position "top" plutôt que "bottom" perso j'obtiens exactement le résultat que tu attends en mettant "top: 50" puis "top: 100".

À voir en fonction de tes besoins ! J'espère avoir pu t'aider

Merci, j'ai testé avec relative (et pourtant j'aurais juré avoir testé avec relative avant de poster) et le carré jaune n'est effectivement plus en dehors de la zone.

Par contre, ce que j'ai oublié de préciser dans le premier message, c'est que le carré jaune qui sera en fait une image au final, aura une hauteur variable entre 50 et 200 pixels, ce qui rend la top: 50 obsolète.

T'inquiète, une erreur inattention ça arrive à tout le monde ! Pour la hauteur dans ce cas tu peux également la définir en % ce qui te permet, peu importe la hauteur variable, de conserver une position similaire. Si cette alternative ne fonctionne pas, tu peux également jouer avec la propriété calc. Avec la bonne formule tu trouveras surement ton bonheur.