Utilisation de flexbox

Question

helvetdulac

18 Feb 2022 à 20:52

bonjour à tous,
malgré mes 82 printemps, je suis un débutant. j'essaye de modifier un de mes site en y mettant du php, css3, et flexbox mais mon ignorance de l'anglais et la mémoire qui fout le camp ne me facilite pas la vie.
le site que j'essaye de modifier consacré aux fleurs, présente a l'ouverture un menu à gauche offrant l'accèc aux diférents sous dossiers ou l'on accède en pressant l'icone correspondande; l'affichage du dossier est encore réalisé avec une table. Par contre, le dossier central est réalisé avec flexbox qui, quand ça fonctionne est plus facile à installer.
Malheureusement, les problèmes arrivent et il est impossible d'utiliser la fonction "pop" pour changer de dossier. Cela fait une semaine que j'essaye de résoudre mon problème et je ne trouve rien. je serai désolé si je dois revenir à utiliser une table pour afficher la partie centrale.
je joins les photos de ce que j'obtiens et les css et le code !
est-ce que la fonction pop ne fonctionne pas avec flexbox (j'ai cherché partout mais je n'ai rien trouvé a ce sujet)


<style>
/*			css locales		*/ 
body { height: 100%; width: 100%; text-align: center; background-image: url(../../Images%20de%20fond%20cisalpin/fond_cisalpin-fleur.png); line-height: 20%; z-index: 1; }
.contenir_1 { position: relative; top: 45px; left: 400px; width: 1000px; height: 600px; z-index: 100; text-align: center; }
.mesimages	{ border-width: 3px; width: 1000px; height: 600px; margin-left: 12.5%; } 
entete	{ position: relative; top: -10px; width: 20%; height: 20px; line-height: 30px; font-weight: bold;}

.contenir_2{ position: absolute ; top: 45px; left: 370px; width: 1050px; height: 900px; background-image: url(../_%20images_generiques/fond_cisalpin.jpg); overflow-y: scroll; line-height: 120%; z-index: 200; text-align: center; }

em { background-color: yellow; font-size: 14pt; }
.titre	{ font-size: 30px; padding-left: 2mm; text-align: 50%; font-family: "Brush Script Std"; }	
.ferm_window { position: absolute; top: 2px; right: 0px; width: 200px; font-size: 20px; text-align: center; font-family: "Brush Script Std"; color: #FFFF00; background-color: #666666; }
#menu_1 { position: absolute; top: 29px; left: 5px; width: 260px; z-index: 100; height: 700px; background-position: 0% 0%; background-color: #CCCCCC; margin-left: 2px; }
#menu_2 { position: absolute; top: 755px; left: 5px; width: 240px; z-index: 100; height: 191px; background-position: 0% 0%; background-color: #CCCCCC; margin-left: 2px; }

.titre3 { font-size: 18px; font-style: italic; vertical-align: text-bottom; color: #00FF00; font-family: "Brush Script Std"; background-color: #333333; width:150px; text-align:center; }

.conteneur-flexible{ display: flex; font-size: 18px; border: 0px solid blue; box-sizing: border-box; margin: 1px 0px; height: 230px; }
.ligne{ flex-flow: row wrap; }
.colonne{ flex-flow: column wrap; }
.element-flexible{ flex-basis: 200px; flex-grow: 1; flex-shrink: 0; padding: 1px 0px; text-align: center; border: 0px solid green; box-sizing: border-box; margin: 20px;}

.dim .element-flexible{ width: 25%; height: 80%; }
.ef30{ flex-basis: 30%; }
.fg0{ flex-grow: 0;}
.fg1{ flex-grow: 1;}
.fg3{ flex-grow: 3;}

</style>



<!-- ***************************************************************** -->
<div style="display: none;" id="pop1">
<!-- ***************************************************************** -->
<div class="contenir_2">
<div id="entete">
<p align="center" class="titre">&nbsp;Présentation&nbsp;</p>
<p class="ferm_window">Cliquer sur la fenêtre pour la fermer </p>
<!-- ***************************************************************** -->
<!-- ***************************************************************** -->


<div class="conteneur-flexible ligne dim">
  <div class="element-flexible fg1"; vertical-align: text-top;>
  	<p align="right" vertical-align:bottom><em>&nbsp;agapanthe bleue&nbsp;</em></p>
	Je ne sais si dans mon subconscient, le fait d'avoir dû aider mon père à cultiver le potager familial (20 ares) qui était entretenu exclusivement à la main, m'a éloigné de la culture des légumes, mais c'est comme ça.<br>Notre potager actuel est une buse en béton de 2.5 mètres de diamètre avec plantes condimentaires et laurier sauce.<br>Notre séjour belge nous à fait découvrir la profusion de plantes vivaces qu'il est possible de cultiver sous nos latitudes et qui enchante la vision toute l'année de notre jardin.<p> 
  </div>
  <div class="element-flexible ef30 fg0"><img src="images 300x200/agapanthe_04.jpg" width="300" height="200" /></div>
</div>
<!-- ***************************************************************** -->
<div class="conteneur-flexible ligne dim">
  <div class="element-flexible ef30 fg0"><img src="images 300x200/alstro_06.jpg" width="300" height="200" /></div>
  <div class="element-flexible fg1">  <p class="parent" align="left" ><em>&nbsp;alstromeria rouge&nbsp;</em></p>
 La proximité de la Hollande avec ses champs de bulbes n'a fait qu'accentuer cet engouement pour les vivaces.<br>Un jardin d'agrément, s'il demande moins de travail  qu'un potager doit être entretenu régulièrement. Les vivaces doivent en général être dédoublées après 4 à 5 ans. Cela permet de rajeunir les touffes et de faire plaisir à ses voisins.<br>Le fait de résider dans un pays non francophone nous a obligé à apprendre directemente les noms latins des plantes ce qui permet de se comprendre avec les horticulteurs, que ce soit en Hollande ou Angleterre.</p>
</div>
<!-- ***************************************************************** -->
<div class="conteneur-flexible ligne dim">
  <div class="element-flexible fg1"; vertical-align: text-top;>
  	<p align="right" vertical-align:bottom><em>&nbsp;agapanthe bleue&nbsp;</em></p>
	Je ne sais si dans mon subconscient, le fait d'avoir dû aider mon père à cultiver le potager familial (20 ares) qui était entretenu exclusivement à la main, m'a éloigné de la culture des légumes, mais c'est comme ça.<br>Notre potager actuel est une buse en béton de 2.5 mètres de diamètre avec plantes condimentaires et laurier sauce.<br>Notre séjour belge nous à fait découvrir la profusion de plantes vivaces qu'il est possible de cultiver sous nos latitudes et qui enchante la vision toute l'année de notre jardin.<p> 
  </div>
  <div class="element-flexible ef30 fg0"><img src="images 300x200/dodecateon_10.jpg" width="300" height="200" /></div>
</div>
<!-- ***************************************************************** -->
<div class="conteneur-flexible ligne dim">
  <div class="element-flexible ef30 fg0"><img src="images 300x200/chrysantheme-2.jpg" width="300" height="200" /></div>
  <div class="element-flexible fg1">  <p class="parent" align="left" ><em>&nbsp;chrysanthème rouge&nbsp;</em></p>

</div>
<!-- ***************************************************************** -->
<div class="conteneur-flexible ligne dim">
  <div class="element-flexible fg1"; vertical-align: text-top;>
  	<p align="right" vertical-align:bottom><em>&nbsp;edelweis&nbsp;</em></p>
	Je ne sais si dans mon subconscient, le fait d'avoir dû aider mon père à cultiver le potager familial (20 ares) qui était entretenu exclusivement à la main, m'a éloigné de la culture des légumes, mais c'est comme ça.<br>Notre potager actuel est une buse en béton de 2.5 mètres de diamètre avec plantes condimentaires et laurier sauce.<br>Notre séjour belge nous à fait découvrir la profusion de plantes vivaces qu'il est possible de cultiver sous nos latitudes et qui enchante la vision toute l'année de notre jardin.<p> 
  </div>
  <div class="element-flexible ef30 fg0"><img src="images 300x200/edelweis_01.jpg" width="300" height="200" /></div>
</div>
<!-- ***************************************************************** -->
<div class="conteneur-flexible ligne dim">
  <div class="element-flexible ef30 fg0"><img src="images 300x200/lis_04.jpg" width="300" height="200" /></div>
  <div class="element-flexible fg1">  <p class="parent" align="left" ><em>&nbsp;lis orange&nbsp;</em></p>
 La proximité de la Hollande avec ses champs de bulbes n'a fait qu'accentuer cet engouement pour les vivaces.<br>Un jardin d'agrément, s'il demande moins de travail  qu'un potager doit être entretenu régulièrement. Les vivaces doivent en général être dédoublées après 4 à 5 ans. Cela permet de rajeunir les touffes et de faire plaisir à ses voisins.<br>Le fait de résider dans un pays non francophone nous a obligé à apprendre directement les noms latins des plantes ce qui permet de se comprendre avec les horticulteurs, que ce soit en Hollande ou Angleterre.</p>
</div>
  </div>
</div>
</div>
<!-- =======   Fin du POP 1  -->

Merci d'avance de vos avis

edit, mise en forme du code Bienvenue sur le forum.
Modifié par gcyrillus (18 Feb 2022 - 21:13)

gcyrillus

Modérateur

18 Feb 2022 à 21:13

Bonsoir,

il semble manquer la fonction javascript qui va afficher la pop1 ou je n'ai pas bien saisi/compris ton soucis (ton code met en display:none; id="pop1"et aucun js n'est là pour le contrecarrer)

En retirant le display:none; , le code semble fonctionner.

Cdt

helvetdulac

20 Feb 2022 à 14:42

Bonjour gcyrillus et merci de ta prompte réponse. Pour des problèmes de santé, je n'ai pas pu répondre plus tôt.
Comme je l'ai indiqué dans le précédent message, je suis nul mais ça ne m'empêche pas d'essayer.
pour faciliter, je joins l'adresse des sites "http://www.cisalpin.com/index.php"
si tu clique sur fleurs, tu accèdes à la nouvelle version que j'essaye d'installer avec flexbox ; si je
veux consulter un des 8 chapitres, je peux afficher les 2 premiers (réduis pour les essais) mais impossible d'afficher les suivants ?????? je ne comprend pas le problème si ce n'est peut-être une incompatibilité entre le nouvel affichage avec les "élément-flexible de flexbox que j'ai introduits.
si tu reviens sur la page précédente et que tu clique sur trains, là tout le programme est encore avec des tables pour l'affichage et ce qui me chiffone, c'est que ça marche.

Au cas ou c'est trop problématique, je te remercie mais ne perd pas ton temps inutilement, je vais conserver mon usage des tables, qui me correspondent mieux .
Merci encore

gcyrillus

Modérateur

20 Feb 2022 à 22:17

Bonsoir/bonjour,

Sur ton lien , cela fonctionne pour pop1 parce qu'elle est bien présente dans le code, pour les autres de la pop2 à la pop8 , elles ne sont pas/plus dans le code de ta page, il n'y a donc rien à afficher. A priori, pas de bugs Smiley smile

Sujet clos

Questions générales et questions de débutants

Utilisation de flexbox