Parce que j'ai promis à Chattigre

[L'ange noir]

Bonjour

Je viens ici pour remercier Chattigre et Oka-mi qui m'ont aidé à comprendre le Grid CSS. J'ai posé de nombreuses questions et j'ai toujours obtenu d'excellentes réponses. Tout cela ne fut pas vain. Bien au contraire. J'ai promis à Chattigre que je lui montrerai le résultat de ses efforts. Je suppose qu'il y a encore des erreurs mais voici ce que j'ai réussi à faire grâce à lui et tous ceux qui m'ont aidé.

Code:

<div class="container">
<div class="grilleavrilp1">
<div class="dateavril"><p>[b]- Avril 2032 -[/b]</p></div>
<div class="titre"><h1 style="text-shadow: 0.1em 0.1em 0.05em #E3E6E4;font-size:28px;font-family: arial black;color:#095228;margin-top:18px;">L'ESCLAVE ENCHAINE</h1></div>
<div class="grostitre"><p>LES VAMPIRES NE CESSERONT JAMAIS DE NOUS ETONNER</p></div>
<div class="art1"><p style="color:#B40404;font-size:16px;text-align:center;">[b]- La Fête du Sang -[/b]</p>
<p style="color:#B40404;font-size:14px;text-align:center;margin-top:-25px;">Quand les vampires renouent avec les vieilles traditions, les esclaves trinquent</p>
<p style="text-indent: 1.5em;margin-bottom:-8px;line-height: 14px;padding:5px;font-size:12px;text-align:center;margin-top:-25px; text-align:justify;">Qui aurait cru que les Grands Vampires de ce monde aimaient à ce point les vieilles traditions ? Cela faisait cinq siècles que cette ignoble fête n’avait pas été organisée par un Roi de Bretagne. Oui, vous avez bien entendu. Cette odieuse cérémonie se déroule pendant les fêtes de Noël. Le Roi Maximen de Bretagne a invité les plus hauts dignitaires de son Royaume et en prime, rien que moins que l’Empereur Assane El Saad.

A l’honneur, le Diable, a qui sont offerts des sacrifices humains. Le sang versé de nos frères s’infiltrera dans la terre pour nourrir leur Démon. Ils dansent, ils rient et ils passent d’étranges moments entre eux, en dehors de la fête.  Deux choses sont incroyables malgré tout. La première c’est que les esclaves ont eu droit à une soirée pendant laquelle ils ont eu toute liberté et la seconde, c’est que même le Rajasthan a aussi décidé de faire cette cérémonie. Décidément, plus rien ne nous étonnera de la part de la Reine Amuna, pas plus cette décision que l’annonce incroyable de l’existence d’un frère illégitime, prétendant au trône, en la personne de Kohei Ishida.</p></div>
<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; line-height: 16px;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></div>
<div class="photo1"><p style="margin-left:7px; margin-top:-5px;"><img src="https://i.servimg.com/u/f83/19/93/50/05/ambass11.png" width="155"/></p><p style="line-height: 12px;text-align:center;margin-left:15px;font-size:11px;margin-top:-10px;">[b]L’Ambassade Impériale <br/>à Iskandar[/b]</p></div><div class="photo2"><p style="line-height: 12px;text-align:center;font-size:11px;">[b]Lucia Hallewin Ambassadrice Impériale[/b]</p><img style="margin-left:10px;"src="https://i.servimg.com/u/f83/19/93/50/05/lucia_14.png" width="70"/></div>
<div class="barreinter"><img src="https://i.servimg.com/u/f83/19/93/50/05/szopar13.png" width="500" height="20" /></div></div>
<div class=grillepa>
<div class="artgauche"><h1 style="font-family:arial;font-size:11px;text-align:center;line-height: 13px;padding:3px;">[b]RECHERCHE<br/>ESCLAVE[/b]</h1>
<p style="font-size:10px; margin-top:-26px;line-height: 13px;padding:3px;margin-bottom:5px;">Homme/femme
Caractère docile. Personne discrète avec un  intérêt indispensable pour l’espionnage.</p>
<p style="font-size:10px; margin-top:-26px;line-height: 13px;padding:3px;margin-bottom:-1px;">[b]Personne à contacter :
Nathan Denikin[/b]</p>
</div>
<div class="titrepa"><img style="z-index:2;width:175px;"src="https://i.servimg.com/u/f83/19/93/50/05/traits14.png"><P style="z-index:1;margin-top:-45px;">PETITES<br/>ANNONCES</P></div>
<div class="artcentral"><p style="font-size:10px;">[b]AVIS AUX TRAFIQUANTS[/b]</p>
<p style="font-size:10px;margin-top:-26px;line-height: 13px;padding:3px;margin-bottom:-1px;">Le Harem de l’Empereur El Saad a besoin de beaux et belles esclaves. S'adresser à Aldéric Deluze pour une sélection exigeante et le paiement.</p></div>
<div class="artdroite"><p style="margin-top:5px;line-height: 14px;font-family: 'Bungee Inline', cursive;font-size:11px;">PROPOSITION DE SERVICE</p>
<p style="line-height: 11px;margin-top:-10px;font-size:10px;margin-top:-26px;line-height: 13px;padding:3px;margin-bottom:-1px;">Le Bossu du Château de Bretagne propose dressage à la carte pour esclaves ou dévots récalcitrants. Séances sur mesure selon les besoins. </p><p style="margin-top:-1px;text-align:center;font-size:10px;line-height: 11px;">[b][u]Tarifs[/u][/b]<br/>[b]500 pièces d’or la semaine.<br/>100 pièces d’or la nuit.[/b]</p>
<p style="padding:4px;line-height: 12px;margin-top:-35px;font-size:10px; margin-bottom:-2px;text-align:center;">
Contacter Le Bossu sur le site internet du château ou par MP
[u]Service de qualité garanti[/u]</p></div>
<div class="arbre">PENSEZ A FETER LE<br/>PRINTEMPS</div>
<div class="artbas"><p style="margin-top:-1px;font-size:12px;font-family: 'Chonburi', cursive; letter-spacing:3px;">[u]GRAND RECRUTEMENT[/u] </p><br/><p style="font-size:12px;text-align:center;margin-top:-30px;">[b]Dévots ou dévotes[/b]</p>
<p style="margin-top:-15px;font-size:11px;margin-top:-26px;line-height: 13px;padding:3px;text-align:left;margin-bottom:-1px;">- Lars Solaris cherche une dévote. Femme uniquement.
- Elio Shaé cherche dévot ou dévote.
- Aldéric Deluze recherche un dévot ou une dévote.</p></div>
<div class="footer1"><img src="https://i.servimg.com/u/f83/19/93/50/05/bas_de10.png" width="600"/></div>
<div class="footer2"><img src="https://i.servimg.com/u/f83/19/93/50/05/trait_10.png" width="500"/></div></div></div>

Code:

/* GRILLE JOURNAL AVRIL*/

.container
{ border: 1px solid black;
  background-color:#E6E6E6;
  height:860px;}

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

.dateavril
{grid-area:date;
 height:30px;
 margin-top:-10px;
 margin-left:15px;
justify-self: start;}

.dateavril p
{margin-top:5px;
 font-size:13px;
font-family:sans serif;}

.titre
{background-color:#9BD8B1;
  margin-top:-10px;
  margin-right:30px;
  margin-left:-40px;
  grid-area:titre;
}

.grilleavrilp1 .grostitre
{grid-area:grostitre;
font-size:15px;
vertical-align:middle;
margin-right:25px;
margin-left:23px;
margin-top:5px;}

.grostitre p
{font-family: 'Zen Tokyo Zoo', cursive;
}

.art1
{background-color:#FAD7D7;
 border: 3px solid #B40404;
 margin-right:5px;
 margin-left:3px;
grid-area:art1;
  margin-top:-50px;
  padding-bottom:5px;
  background: url(https://i.servimg.com/u/f83/19/93/50/05/sticke10.png);
background-size: 320px;
background-repeat: no-repeat;
background-position: center bottom;
}

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

.photo1
{background-color:#FFFFFF;
  border: 3px solid #0000FF;
  border-top:none;
   border-right:none;
  grid-area:photo1;
}
.photo2
{background-color:#FFFFFF;
  border: 3px solid #0000FF;
  grid-area:photo2;
  border-top:none;
  border-left:none;
  margin-right:4px;
  justify-self:center;
}

.barreinter
{margin-top:10px;
 grid-area:barreinter;
}

.grillepa
{display:grid;
 justify-content: stretch;
 width:99%;
margin-left:8px;
  margin-top:-55px;
 width:97%;
 text-align:center;
 grid-template-columns:0.6fr 0.6fr 0.6fr 1fr;
 grid-template-rows: 0.1fr 0.6fr 1fr 0.5fr 1fr;
 grid-template-areas:
    "artgauche titrepa artdroite arbre"
    "artgauche artcentral artdroite arbre"
    "artbas artbas artdroite arbre"
    "footer1 footer1 footer1 footer1"
    "footer2 footer2 footer2 footer2";}

.artgauche
{ background-color:#FFFFFF;
  border: 1px solid black;
grid-area:artgauche;
}

.titrepa
{background-color:#FFFFFF;
  border: 1px solid black;
  border-top:none;
  border-bottom:none;
  grid-area:titrepa;

}
.titrepa p
{ font-family: 'Saira Stencil One', cursive;
  letter-spacing:5px;
}

.artdroite
{ background-color:#FFFFFF;
  border: 1px solid black;
grid-area:artdroite;
}

.artcentral
{background-color:#FFFFFF;
 border: 1px solid black;
 margin-top:-5px;
grid-area:artcentral;
}

.artbas
{background-color:#FFFFFF;
  border: 1px solid black;
  grid-area:artbas;
}

.arbre
{background:url(https://i.servimg.com/u/f83/19/93/50/05/arbre10.png);
 background-size: 170px;
background-repeat: no-repeat;
background-position: center bottom;
font-family: 'Acme', sans-serif;
font-size:16px;
letter-spacing:2px;
margin-top:5px;
grid-area:arbre;
}

.footer1
{grid-area:footer1;
}

.footer2
{grid-area:footer2;
 margin-top:5px;
}

Voilà. Je vous souhaites de bonnes fêtes.