bonjour, je souhaite trouver le code pour avoir des textes non colés aux bord des portables ayant: dans mon grid:
le DIV wrapper ouvert
le DIV content ouvert
Voici le code HTML de content:
___________________________________
Mon CSS comprenant:
le DIV wrapper ouvert
le DIV content ouvert
Voici le code HTML de content:
___________________________________
<section class="centreXblanc" >
<article>
<figure>
<img class="bande" alt="1444x920 astronaute thomas pesquet photographie mont saint michel avant retour terre" id="lui" src="logos/mont-saint-michel-vu-du-ciel00.jpg" />
</figure>
<div><p class="txtjust">
Quel plaisir d'ouvrire cette série sur le mont saint Michel, capté par thomas pesquet !
Le Mont Saint-Michel, une merveille architecturale et historique, se dresse majestueusement sur la côte normande de la France.
Ce monument, classé au patrimoine mondial de l'UNESCO, est un chef-d'œuvre de l'architecture médiévale et un témoignage éloquent
de l'habileté et de la foi des bâtisseurs de l'époque.
L'histoire du Mont Saint-Michel commence au 8ème siècle, lorsqu'un évêque d'Avranches construit un sanctuaire en l'honneur de l'archange
Michel sur ce rocher isolé. Au fil des siècles, le site s'est enrichi d'une abbaye bénédictine impressionnante,
reflétant la puissance de la foi chrétienne et la richesse de l'art gothique.
</p></div>
</article>
</section>
<br /><br />
<!-- -------------------------------------- -->
<section class="centreXblanc" >
<article>
<figure>
<img class="bande" alt="mont saint michel vue du ciel01" id="lui" src="logos/mont-saint-michel-vu-du-ciel01.jpg" />
</figure>
<div><p class="txtjust">
Le Mont Saint-Michel n'est pas seulement un monument historique; il est aussi un lieu de pèlerinage actif.
Chaque année, des milliers de pèlerins et de touristes parcourent le pont-passerelle pour atteindre l'abbaye,
se plongeant dans l'atmosphère tranquille et presque intemporelle du site.
En dépit de sa popularité, le Mont Saint-Michel a su préserver son authenticité et son mystère.
La gestion attentive du site a permis de maintenir un équilibre entre préservation patrimoniale et accueil des visiteurs.
Des efforts récents pour rétablir son caractère maritime ont encore renforcé son charme et son attrait.
</p></div>
</article>
</section>
<br /><br />
<!-- -------------------------------------- -->
</div></div>
Mon CSS comprenant:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin :0; padding :0; }
fieldset, img { border :0;margin: 0px 0px 0px 0px;}
address, caption, cite, dfn, em, strong, th, var { font-style :normal; font-weight :normal; }
ol, ul { list-style :none; }
caption, th { text-align :left; }
h1, h2, h3, h4, h5, h6 { font-size :100%; font-weight :normal; }
/* =================fin du raz================= */
html, body { height: 100%; }
body { background-color:#6c564b;font-family:"Times New Roman", Times, serif;color:#feffff; font-size:22px;margin:0;border:0;text-align: center;}
/* #577bac #0080c0 OLD nouveau 577bac 6c564b */
* {box-sizing: border-box;}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr;
grid-template-areas:
"bandeau"
"ToutMenu"
"content"
"footer";
min-height: 100vh;
}
.bandeau {
grid-area: bandeau;
text-align:center;
}
.ToutMenu {
grid-area: ToutMenu;
text-align:center;
}
.content {
grid-area: content;
text-align:left;
}
.footer {
grid-area: footer;
text-align:center;
}
/* ____________________media640px en min width___POUR ARTICLE FIGURE etc___________________ */
@media screen and (min-width:640px){
/* ________section = img et txt ______________ */
.centreXblanc > article { display:flex; justify-content:center; align-items:center; }
.centreXblanc > article > figure,
.centreXblanc > article > div { flex:1 1 45%; width:45%; }
.centreXblanc > div { display: block; width: auto; }
/* ____________________________________ */
}
