grid css placement d'images

[L'ange noir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : https://vampires-kingdom.forumactif.com/

Description du problème

Bonjour à tous,

J'ai bien essayé de faire toute seule mais je bloque et ce que j'ai vu sur le tuto youtube ne répond pas du tout à ma question.

Je cherche à caler une image à droite d'une autre mais elle reste en dessous sans parvenir à la remonter. Je ne suis pas du tout certaine de mon code déjà pour la première image. je suis loin de le faire avec un système de grid. Je me suis dit qu'en insérant une grid de deux cases en dessous du texte, cela solutionnerait mon problème en un clin d'oeil, mais je n'ai pas réussi à encastrer la fameuse grille.

Bref. Voici une capture d'écran de ce que je cherche à faire :

Spoiler:

Voici le code Html :

Code:

<div class="art2"><p style="color:#0000FF;font-size:14px;text-align:center;">[b]Création surprise d’une ambassade <br/>entre le Rajasthan et l’Empire[/b]</p>
<p style="text-indent: 1.5em;margin-bottom:-8px;line-height: 15px;padding:5px;font-size:12px;margin-top:-25px; text-align:justify;">Des négociations ont eu lieu entre la Reine Dewi Amuna et l’Empereur Assane El Saad afin d’établir une ambassade au Rajasthan. Et inversement, des travaux auraient commencé à Makoba pour en construire une en Empire. Des échanges diplomatiques tolérés par le Roi de Bretagne ? N’est-ce pas aussi incroyable que de savoir que la personne qui a mené ces négociations n’est autre qu’une dévote, Lucia Hallewin.
</p><p style="text-align:left;margin-left:10px;margin-top:15px;"><img src="https://i.servimg.com/u/f83/19/93/50/05/ambass10.png" width="170"/></p>
<p style="line-height: 12px;text-align:center;margin-left:35px;font-size:10px;margin-top:-25px;width:120px;">[b]L’Ambassade Impériale <br/>à Iskandar[/b]</p>
<p style="float:right;"><img src="https://i83.servimg.com/u/f83/19/93/50/05/lucia_11.png" width="70"/></p>
</div>

Voici le code css :

Code:

.grilleavril
{
 display:grid;
 justify-content: stretch;
 width:99%;
  padding:4px;
 text-align:center;
 grid-template-columns:repeat(4,1fr);
 grid-template-rows: 0.6fr 0.7fr 5fr 0.5fr;
 grid-template-areas:
    "date titre titre titre"
    "grostitre grostitre grostitre grostitre"
    "art1 art1 art2 art2"
    "barreinter barreinter barreinter barreinter"}

.art2
{background-color:#FFFFFF;
  border: 3px solid #0000FF;
  grid-area:art2;
  margin-right:4px;
}

je ne vous ai pas mis tout le code css.

Edit: j'ai oublié de vous dire que je ne vous demande pas de m'écrire le code mais de me dire où trouver la réponse s'il vous plait.

Merci bien

[L'ange noir]

Bonsoir les amis,

alors j'ai réussi à encastrer une grille dans la grille et j'ai mis la photo à l'intérieur. Mais je suppose qu'il doit y avoir un moyen de caler cette case, là où je veux , mais je n'y arrive pas sauf avec des marges immenses et forcément ça me décale tout le reste.

Y a t'il quelque chose que je doive utiliser pour réussir s'il vous plait ?

[L'ange noir]

Bonjour à tous,

Après de plusieurs tentatives, je n'arrive à rien de bien probant. En plus, je ne comprends pas pourquoi mon justify-self: end; (pareil pour center etc) ne fonctionne pas alors que le align-self:center; fonctionne très bien. J'ai la sensation qu'il me manque quelque chose à apprendre mais je n'arrive pas à savoir quoi.

Voici le CSS :

Code:

.photodroite
{ z-index:1;
  border:1px solid black;
  margin-top:105px;
  grid-column-start: 4;
  grid-row-end: 3;
  grid-row-start: 3;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: 0.5fr;
  grid-template-rows:0.1fr;
 
}
.photolucia
{justify-self:end;
align-self:center;}

Voici le html :

Code:

<div class="photodroite">
<div class="photolucia"><img src="https://i.servimg.com/u/f83/19/93/50/05/lucia_13.png" width="70"/></div></div>

Je vous rappelle que cette grille est à l'intérieur d'une autre grille. Vous faut il tout le code depuis le début ?

Merci d'avance pour votre aide. Je crois que là j'ai épuisé toute ma science de débutante.

[L'ange noir]

Bonjour à tous

Merci à ceux qui m'ont lu et peut-être tenté de m'aider. J'ai finalement trouvé la solution toute seule. J'ai simplement créé 2 cellules supplémentaires à ma grille avec 1 ligne de plus et le tour est joué.