CSS Grid - Code HTML de page d'accueil cassé

par Kelari Mer 10 Avr 2019 - 22:15

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://novocaine.forumactif.com/

Description du problème

Bonjour à toutes et tous,

J'ai souhaité utiliser les propriétés de la grid de CSS3 pour concevoir ma page d'accueil et la publier sur mon forum de test. Je rencontre cependant un problème une fois le code enregistré sur la plateforme - il se casse après validation, ce qui provoque la fermeture des balises <section> immédiatement après leur ouverture et le déplacement de leur contenu bien en dessous, comme vous pouvez le voir sur les codes suivants :

Code HTML initial correct:

Code:: <div class="container"> <section class="communaute"> <div class="titre">Communauté</div> </section> <section class="news"> <div id="slideshow"> <input checked name="slideshow" id="slide1" type="radio" /> <input name="slideshow" id="slide2" type="radio" /> <input name="slideshow" id="slide3" type="radio" /> <input name="slideshow" id="slide4" type="radio" /> <input name="slideshow" id="slide5" type="radio" /> <div id="slides"> <div class="inner"> <div class="a_slide"> <a href="#"><img class="left" src="https://image.noelshack.com/fichiers/2019/14/7/1554590678-slideshow1.png" /></a> </div> <div class="a_slide"> <a href="#"><img class="right" src="https://image.noelshack.com/fichiers/2019/14/7/1554590678-slideshiw2.png" /></a> </div> <div class="a_slide"> <a href="#"><img class="left" src="https://image.noelshack.com/fichiers/2019/14/6/1554582338-slideshow3.png" /></a> </div> <div class="a_slide"> <a href="#"><img class="right" src="https://image.noelshack.com/fichiers/2019/14/6/1554582338-slideshow4.png" /></a> </div> <div class="a_slide"> <a href="#"><img class="left" src="https://image.noelshack.com/fichiers/2019/14/6/1554582338-slideshow5.png" /></a> </div> </div> </div> <div id="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> </div> </div> </section> <section class="staff"> <div class="titre">équipe</div> <div class="contenu_pa"> <center> <div class="staff_img" style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554589494-oxy.png)"><div class="staff_desc"> <br />Oxy<br /><span class="italique">Admin</span><br /><br /> <a href="https://"><img src="https://nsa39.casimages.com/img/2018/12/08//181208074139701824.png" style="max-width: 25px" /></a> <a href="https://"><img src="https://nsa39.casimages.com/img/2018/12/08//181208074740178623.png" style="max-width: 25px" /></a> </div></div> <div class="staff_img" style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554589494-sablou.png)"><div class="staff_desc"> <br />Sably<br /><span class="italique">Admin</span><br /><br /> <a href="https://"><img src="https://nsa39.casimages.com/img/2018/12/08//181208074139701824.png" style="max-width: 25px" /></a> <a href="https://"><img src="https://nsa39.casimages.com/img/2018/12/08//181208074740178623.png" style="max-width: 25px" /></a> </div></div> <div class="staff_img" style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554589494-petalou.png)"><div class="staff_desc"> <br />Pétalou<br /><span class="italique">Admin</span><br /><br /> <a href="https://"><img src="https://nsa39.casimages.com/img/2018/12/08//181208074139701824.png" style="max-width: 25px" /></a> <a href="https://"><img src="https://nsa39.casimages.com/img/2018/12/08//181208074740178623.png" style="max-width: 25px" /></a> </div></div> </center> </div> </section> <section class="rpg_news"> <div class="titre">Actualités jdr</div> <div class="contenu_pa"> <div style="text-align: justify;"> <span class="italique">Saison des Neiges (Décembre)</span><br /> La température est passée en négatif, il fait très froid et la neige tombe drue, gelées fréquentes ! <br /><br /><span class="italique">Dé saisonnier</span><br /> Hiver rude - les maladies t'infligent deux fois plus de dégâts… </div> </div> </section> <section class="effectifs"> <div class="titre">Effectifs</div> <div class="contenu_pa"> <span class="solitaires" style="text-transform: uppercase;">solitaires -</span> 1 actif (<span class="orange">prioritaire</span>) <br /><br /> <span class="aube" style="text-transform: uppercase;">Aube -</span> 5 actifs (<span class="vert">ouvert</span>) <br /> <span class="italique">Chef :</span> Aurore du Loup<br /> <span class="italique">Lieutenant.e :</span> <span class="gras">libre</span> <br /> <span class="italique">Guérisseuse :</span> Voix de l'Univers<br /><br /> <span class="crepuscule" style="text-transform: uppercase;">Crépuscule -</span> 5 actifs (<span class="vert">ouvert</span>) <br /> <span class="italique">Chef :</span> Aurore des Ames<br /> <span class="italique">Lieutenant :</span> Danse des Papillons <br /> <span class="italique">Guérisseuse :</span> Ecaille de Salamandre<br /><br /> <span class="eclipse" style="text-transform: uppercase;">éclipse -</span> 4 actifs (<span class="vert">ouvert</span>) <br /> <span class="italique">Chef :</span> Eclipse du Songe<br /> <span class="italique">Lieutenant :</span> Oiseau de Nuit <br /> <span class="italique">Guérisseur :</span> Fléau de l'Araignée<br /><br /> <span class="soleil" style="text-transform: uppercase;">Soleil -</span> 7 actifs (<span class="rouge">fermé</span> sauf apprentis) <br /> <span class="italique">Chef :</span> Aurore des Flammes<br /> <span class="italique">Lieutenante :</span> Aloès du Chagrin <br /> <span class="italique">Guérisseur :</span> Oeil des Lymbes<br /><br /> <span class="lune" style="text-transform: uppercase;">Lune -</span> 6 actifs (<span class="rouge">fermé</span> sauf apprentis) <br /> <span class="italique">Cheffe :</span> Aurore de l'Espérance<br /> <span class="italique">Lieutenante :</span> Coeur d'Onyx <br /> <span class="italique">Guérisseuse :</span> Nuée de Corneilles<br /><br /> </div> </section> <section class="predefinis"> <div class="titre">Prédéfinis</div> <div class="contenu_pa"> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554639135-tempetedeneige.png); max-width: 220px;"><div class="pc_desc"> <table> <tr><br /> <td style="padding-left: 20px;">Tempête des Neiges</td> <td><a href="https://"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" style="max-width: 25px" /></a></td> </tr> </table> </div></div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/6/1554587700-furienocturne.png); max-width: 220px;"><div class="pc_desc"> <table> <tr><br /> <td style="padding-left: 20px;">Furie Nocturne</td> <td><a href="https://"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" style="max-width: 25px" /></a></td> </tr> </table> </div></div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/6/1554587700-raven.png); max-width: 220px;"><div class="pc_desc"> <table> <tr><br /> <td style="padding-left: 20px;">Raven</td> <td><a href="https://"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" style="max-width: 25px" /></a></td> </tr> </table> </div></div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/6/1554587700-faucheurdeble.png); max-width: 220px;"><div class="pc_desc"> <table> <tr><br /> <td style="padding-left: 20px;">Faucheur de Blé</td> <td><a href="https://"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" style="max-width: 25px" /></a></td> </tr> </table> </div></div> </div> </section> <section class="reseaux"> <div class="titre">Réseaux</div> <div class="contenu_pa"> <center> <a href="https://www.instagram.com/theskyclans/?hl=fr"><img style="width: 35px;" src="https://tinyurl.com/ybdfjrw6"></a> <a href="https://www.facebook.com/theskyclans/"><img style="width: 35px;" src="https://tinyurl.com/y9k3xnr9"></a> <a href="https://discord.gg/dxBQdCv"><img style="width: 35px;" src="https://i.servimg.com/u/f27/13/70/08/55/discor10.png"></a> <br /><br /><br />Venez nous soutenir toutes les deux heures ! <span class="rouge">♥</span> <br /><br /><br /><a href="http://www.root-top.com/topsite/shoom/in.php?ID=880"><img style="width: 35px;" src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png"></a> <a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=1130"><img style="width: 35px;" src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png"></a> <a href="http://www.root-top.com/topsite/topsitelaguerredesclan/in.php?ID=431"><img style="width: 35px;" src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png"></a> <br /><a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=11884"><img style="width: 35px;" src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png"></a> <a href="http://www.root-top.com/topsite/guerredesclans/in.php?ID=243"><img style="width: 35px;" src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png"></a> <a href="http://www.root-top.com/topsite/streamrpg/in.php?ID=710"><img style="width: 35px;" src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png"></a> </center> </div> </section> </div>

Code HTML après validation cassé:

Code:: <div class="container"> <section class="communaute"> </section> <div style="" class="titre"> Communauté </div><section class="communaute"> </section> <section class="news"> </section> <div style="" id="slideshow"> <input type="radio" id="slide1" name="slideshow" checked="" /> <input type="radio" id="slide2" name="slideshow" /> <input type="radio" id="slide3" name="slideshow" /> <input type="radio" id="slide4" name="slideshow" /> <input type="radio" id="slide5" name="slideshow" /> <div id="slides"> <div class="inner"> <div class="a_slide"> <a href="#"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590678-slideshow1.png" class="left" /></a> </div> <div class="a_slide"> <a href="#"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590678-slideshiw2.png" class="right" /></a> </div> <div class="a_slide"> <a href="#"><img src="https://image.noelshack.com/fichiers/2019/14/6/1554582338-slideshow3.png" class="left" /></a> </div> <div class="a_slide"> <a href="#"><img src="https://image.noelshack.com/fichiers/2019/14/6/1554582338-slideshow4.png" class="right" /></a> </div> <div class="a_slide"> <a href="#"><img src="https://image.noelshack.com/fichiers/2019/14/6/1554582338-slideshow5.png" class="left" /></a> </div> </div> </div> <div id="controls"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label> <label for="slide5"></label> </div> </div><section class="news"> </section> <section class="staff"> </section> <div style="" class="titre"> équipe </div><section class="staff"> </section> <div style="" class="contenu_pa"> <center> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554589494-oxy.png)" class="staff_img"> <div class="staff_desc"> <br />Oxy<br /><span class="italique">Admin</span><br /><br /> <a href="https://"><img style="max-width: 25px" src="https://nsa39.casimages.com/img/2018/12/08//181208074139701824.png" /></a> <a href="https://"><img style="max-width: 25px" src="https://nsa39.casimages.com/img/2018/12/08//181208074740178623.png" /></a> </div> </div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554589494-sablou.png)" class="staff_img"> <div class="staff_desc"> <br />Sably<br /><span class="italique">Admin</span><br /><br /> <a href="https://"><img style="max-width: 25px" src="https://nsa39.casimages.com/img/2018/12/08//181208074139701824.png" /></a> <a href="https://"><img style="max-width: 25px" src="https://nsa39.casimages.com/img/2018/12/08//181208074740178623.png" /></a> </div> </div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554589494-petalou.png)" class="staff_img"> <div class="staff_desc"> <br />Pétalou<br /><span class="italique">Admin</span><br /><br /> <a href="https://"><img style="max-width: 25px" src="https://nsa39.casimages.com/img/2018/12/08//181208074139701824.png" /></a> <a href="https://"><img style="max-width: 25px" src="https://nsa39.casimages.com/img/2018/12/08//181208074740178623.png" /></a> </div> </div> </center> </div><section class="staff"> </section> <section class="rpg_news"> </section> <div style="" class="titre"> Actualités jdr </div><section class="rpg_news"> </section> <div style="" class="contenu_pa"> <div style="text-align: justify;"> <span class="italique">Saison des Neiges (Décembre)</span><br /> La température est passée en négatif, il fait très froid et la neige tombe drue, gelées fréquentes ! <br /><br /><span class="italique">Dé saisonnier</span><br /> Hiver rude - les maladies t'infligent deux fois plus de dégâts… </div> </div><section class="rpg_news"> </section> <section class="effectifs"> </section> <div style="" class="titre"> Effectifs </div><section class="effectifs"> </section> <div style="" class="contenu_pa"> <span style="text-transform: uppercase;" class="solitaires">solitaires -</span> 1 actif (<span class="orange">prioritaire</span>) <br /><br /> <span style="text-transform: uppercase;" class="aube">Aube -</span> 5 actifs (<span class="vert">ouvert</span>) <br /> <span class="italique">Chef :</span> Aurore du Loup<br /> <span class="italique">Lieutenant.e :</span> <span class="gras">libre</span> <br /> <span class="italique">Guérisseuse :</span> Voix de l'Univers<br /><br /> <span style="text-transform: uppercase;" class="crepuscule">Crépuscule -</span> 5 actifs (<span class="vert">ouvert</span>) <br /> <span class="italique">Chef :</span> Aurore des Ames<br /> <span class="italique">Lieutenant :</span> Danse des Papillons <br /> <span class="italique">Guérisseuse :</span> Ecaille de Salamandre<br /><br /> <span style="text-transform: uppercase;" class="eclipse">éclipse -</span> 4 actifs (<span class="vert">ouvert</span>) <br /> <span class="italique">Chef :</span> Eclipse du Songe<br /> <span class="italique">Lieutenant :</span> Oiseau de Nuit <br /> <span class="italique">Guérisseur :</span> Fléau de l'Araignée<br /><br /> <span style="text-transform: uppercase;" class="soleil">Soleil -</span> 7 actifs (<span class="rouge">fermé</span> sauf apprentis) <br /> <span class="italique">Chef :</span> Aurore des Flammes<br /> <span class="italique">Lieutenante :</span> Aloès du Chagrin <br /> <span class="italique">Guérisseur :</span> Oeil des Lymbes<br /><br /> <span style="text-transform: uppercase;" class="lune">Lune -</span> 6 actifs (<span class="rouge">fermé</span> sauf apprentis) <br /> <span class="italique">Cheffe :</span> Aurore de l'Espérance<br /> <span class="italique">Lieutenante :</span> Coeur d'Onyx <br /> <span class="italique">Guérisseuse :</span> Nuée de Corneilles<br /><br /> </div><section class="effectifs"> </section> <section class="predefinis"> </section> <div style="" class="titre"> Prédéfinis </div><section class="predefinis"> </section> <div style="" class="contenu_pa"> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/7/1554639135-tempetedeneige.png); max-width: 220px;"> <div class="pc_desc"> <br /> <table> <tbody></tbody> <tr style=""> <td style="padding-left: 20px;"> Tempête des Neiges </td> <td> <a href="https://"><img style="max-width: 25px" src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" /></a> </td> </tr><tbody> </tbody> </table> </div> </div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/6/1554587700-furienocturne.png); max-width: 220px;"> <div class="pc_desc"> <br /> <table> <tbody></tbody> <tr style=""> <td style="padding-left: 20px;"> Furie Nocturne </td> <td> <a href="https://"><img style="max-width: 25px" src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" /></a> </td> </tr><tbody> </tbody> </table> </div> </div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/6/1554587700-raven.png); max-width: 220px;"> <div class="pc_desc"> <br /> <table> <tbody></tbody> <tr style=""> <td style="padding-left: 20px;"> Raven </td> <td> <a href="https://"><img style="max-width: 25px" src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" /></a> </td> </tr><tbody> </tbody> </table> </div> </div> <div style="background-image: url(https://image.noelshack.com/fichiers/2019/14/6/1554587700-faucheurdeble.png); max-width: 220px;"> <div class="pc_desc"> <br /> <table> <tbody></tbody> <tr style=""> <td style="padding-left: 20px;"> Faucheur de Blé </td> <td> <a href="https://"><img style="max-width: 25px" src="https://image.noelshack.com/fichiers/2019/14/7/1554639352-louoe.png" /></a> </td> </tr><tbody> </tbody> </table> </div> </div> </div><section class="predefinis"> </section> <section class="reseaux"> </section> <div style="" class="titre"> Réseaux </div><section class="reseaux"> </section> <div style="" class="contenu_pa"> <center> <a href="https://www.instagram.com/theskyclans/?hl=fr"><img src="https://tinyurl.com/ybdfjrw6" style="width: 35px;" /></a> <a href="https://www.facebook.com/theskyclans/"><img src="https://tinyurl.com/y9k3xnr9" style="width: 35px;" /></a> <a href="https://discord.gg/dxBQdCv"><img src="https://i.servimg.com/u/f27/13/70/08/55/discor10.png" style="width: 35px;" /></a> <br /><br /><br />Venez nous soutenir toutes les deux heures ! <span class="rouge">♥</span> <br /><br /><br /><a href="http://www.root-top.com/topsite/shoom/in.php?ID=880"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png" style="width: 35px;" /></a> <a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=1130"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png" style="width: 35px;" /></a> <a href="http://www.root-top.com/topsite/topsitelaguerredesclan/in.php?ID=431"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png" style="width: 35px;" /></a> <br /><a href="http://www.root-top.com/topsite/serpentgy/in.php?ID=11884"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png" style="width: 35px;" /></a> <a href="http://www.root-top.com/topsite/guerredesclans/in.php?ID=243"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png" style="width: 35px;" /></a> <a href="http://www.root-top.com/topsite/streamrpg/in.php?ID=710"><img src="https://image.noelshack.com/fichiers/2019/14/7/1554590910-topsite.png" style="width: 35px;" /></a> </center> </div><section class="reseaux"> </section> </div>

Et le CSS associé à la grid :

CSS:

Code:: .container { display: grid; max-width: 1000px; position: relative; margin: auto; grid-gap: 0; grid-template-areas: "communaute news news staff" "rpg_news effectifs predefinis reseaux"; grid-template-columns: 250px 250px 250px 250px; grid-template-rows: 300px 300px; } .titre { font-family: 'Roboto'; font-size: 20px; color: #7EA18F; text-transform: uppercase; margin-top: 10px; text-align: center; } .communaute { color: #1F1F1F; font-size: 11px; background-color: #fff; grid-area: communaute; border-width: 3px 0px 0px 3px; border-color: #7EA18F; border-style: dotted; opacity: 0.6; transition: all ease-out 0.2s; } .communaute:hover { opacity: 1; transition: all ease-out 0.2s; } .news { background-color: #fff; grid-area: news; } .staff { color: #1F1F1F; font-size: 11px; background-color: #fff; grid-area: staff; border-width: 3px 3px 0px 0px; border-color: #7EA18F; border-style: dotted; opacity: 0.6; transition: all ease-out 0.2s; } .staff:hover { opacity: 1; transition: all ease-out 0.2s; } .rpg_news { color: #1F1F1F; font-size: 11px; background-color: #fff; grid-area: rpg_news; border-width: 3px 3px 3px 3px; border-color: #7EA18F; border-style: dotted; opacity: 0.6; transition: all ease-out 0.2s; } .rpg_news:hover { opacity: 1; transition: all ease-out 0.2s; } .effectifs { color: #1F1F1F; font-size: 11px; background-color: #fff; grid-area: effectifs; border-width: 0px 3px 3px 0px; border-color: #7EA18F; border-style: dotted; opacity: 0.6; transition: all ease-out 0.2s; } .effectifs:hover { opacity: 1; transition: all ease-out 0.2s; } .predefinis { color: #1F1F1F; font-size: 11px; background-color: #fff; grid-area: predefinis; border-width: 0px 3px 3px 0px; border-color: #7EA18F; border-style: dotted; opacity: 0.6; transition: all ease-out 0.2s; } .predefinis:hover { opacity: 1; transition: all ease-out 0.2s; } .reseaux { color: #1F1F1F; font-size: 11px; background-color: #fff; grid-area: reseaux; border-width: 3px 3px 3px 0px; border-color: #7EA18F; border-style: dotted; opacity: 0.6; transition: all ease-out 0.2s; } .reseaux:hover { opacity: 1; transition: all ease-out 0.2s; }

Cela ne pose pas de problème dans l'immédiat car la page se publie correctement, avec le code initial. En revanche dès l'instant où quelqu'un d'autre ou moi-même souhaite apporter une modification à la page d'accueil directement sur la plateforme, il ne peut pas le faire sans corriger tout le code à la main ou bien enregistrer la version faussée (ce qui en apparence provoque le déplacement du contenu de la grille en dessous de celle-ci comme expliqué plus haut).

Bien que ce ne soit pas fondamentalement un souci sachant que nous gardons et modifions évidemment notre code depuis une source extérieure, c'est quand même assez embêtant que l'éditeur se permette de modifier le code tout seul jusqu'à en changer la structure (surtout quand il y a juste un chiffre à modifier ou une petite info à rajouter)... Et je n'ai pas tellement envie de refaire ma page d'accueil avec les tableaux HTML :/

Quelqu'un a-t-il une solution ?

Merci bien !

par Kelari Ven 12 Avr 2019 - 14:05

par Kelari Sam 13 Avr 2019 - 21:49

par Scoubifitz Dim 14 Avr 2019 - 16:20

Kelari a écrit:
Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://novocaine.forumactif.com/

Description du problème

Bonjour à toutes et tous,

J'ai souhaité utiliser les propriétés de la grid de CSS3 pour concevoir ma page d'accueil et la publier sur mon forum de test. Je rencontre cependant un problème une fois le code enregistré sur la plateforme - il se casse après validation, ce qui provoque la fermeture des balises <section> immédiatement après leur ouverture et le déplacement de leur contenu bien en dessous, comme vous pouvez le voir sur les codes suivants :
Code HTML initial correct:
Code HTML après validation cassé:
Et le CSS associé à la grid :
CSS:
Cela ne pose pas de problème dans l'immédiat car la page se publie correctement, avec le code initial. En revanche dès l'instant où quelqu'un d'autre ou moi-même souhaite apporter une modification à la page d'accueil directement sur la plateforme, il ne peut pas le faire sans corriger tout le code à la main ou bien enregistrer la version faussée (ce qui en apparence provoque le déplacement du contenu de la grille en dessous de celle-ci comme expliqué plus haut).

Bien que ce ne soit pas fondamentalement un souci sachant que nous gardons et modifions évidemment notre code depuis une source extérieure, c'est quand même assez embêtant que l'éditeur se permette de modifier le code tout seul jusqu'à en changer la structure (surtout quand il y a juste un chiffre à modifier ou une petite info à rajouter)... Et je n'ai pas tellement envie de refaire ma page d'accueil avec les tableaux HTML :/

Quelqu'un a-t-il une solution ?

Merci bien !

Bonjour,

Tout d'abord , il faut comprendre comment fonctionne un éditeur de texte avant de l'accuser de tous les maux .

L'éditeur de texte sert à éditer ... du texte !
A l'époque où il a été conçu , il a été programmé pour reconnaitre la plupart des balises HTML4 ...
Les autres balises non reconnues ont été - et sont toujours - traitées en refermant la balise . Toute balise inconnue est donc refermée aussitôt ouverte .
Cette sécurité permet de garder la structure du forum si une balise est mal fermée dans la case d'accueil .

Il est donc possible d'utiliser et d'envoyer une balise perso ou HTML5 avec l'éditeur , mais impossible d'éditer le code , puisqu'il ne sera pas reconnu , ni interprété.

Concernant la balise <section> , il suffit de la remplacer par une balise <div> , celà n'aura pas d'influence sur le CSS.

La balise <section> n'a aucun intérêt dans votre code (voir : Notice d'utilisation )

De plus , évitez la balise <center> qui est dépréciée en HTML4 , et obsolète en HTML5.

par Kelari Dim 14 Avr 2019 - 16:36

Bonjour et merci pour votre réponse,

La balise <section> a simplement été celle que l'on m'a préconisée pour l'utilisation des grid et je n'ai pas médité plus que cela sur son utilisation ou son statut.

Le remplacement par les balises <div> règle en effet le problème.

CSS Grid - Code HTML de page d'accueil cassé