bonjour à tous,
bien que agé de 84 printemps, je fais toujours partis des nuls en informatique, mais parmis mes défauts, j'ai celui de ne pas accepterles sites réalisés avec le style wordpress, je veux seulement ce qui est totalement écris, mais c'est surement l'époque.
J'ai essayé d'utiliser les flexbox pour supprimer l'usage des tables ce qui, effectivement me facilite la vie mais parfois m'em..... car je ne trouve aucune solution.
actuellement, j'essaye de construire un menu vertical avec 8 positions comportant a chaque fois une icone et le texte explicatif accolé. je voudrais que le texte sois centré verticalement comme l'icone, mais impossible d'y arriver.
(voir la copie écran)
en css, j'ai :
en html
malgré toutes mes recherche et les essais avec align-items ou autre, je ne suis pas arrivé à avoir le texte explicatif au centre du box !!!!! Je ne sais ou je fais l'erreur.
Merci de vos conseils.
Modifié par Felipe (14 Apr 2023 - 19:46)
bien que agé de 84 printemps, je fais toujours partis des nuls en informatique, mais parmis mes défauts, j'ai celui de ne pas accepterles sites réalisés avec le style wordpress, je veux seulement ce qui est totalement écris, mais c'est surement l'époque.
J'ai essayé d'utiliser les flexbox pour supprimer l'usage des tables ce qui, effectivement me facilite la vie mais parfois m'em..... car je ne trouve aucune solution.
actuellement, j'essaye de construire un menu vertical avec 8 positions comportant a chaque fois une icone et le texte explicatif accolé. je voudrais que le texte sois centré verticalement comme l'icone, mais impossible d'y arriver.
(voir la copie écran)
en css, j'ai :
body { height: 100%; width: 100%; text-align: center; background-image: url(fichiers%20generiques/fond-region.jpg); line-height: 20%; z-index: 1; }
.ferm_window { position: absolute; top: 14px; left: 341px; width: 213px; height: 74px; font-size: 22px; line-height: 20px; text-align: center; font-family: "Brush Script Std"; color: #FFFF00; background-color: #666666;z-index: 500; }
.description { position: absolute; top: 7%; left: 18%; width: 1200px; height: 1200px; background-image: url(../Flexbox%200%20%E2%80%94%20essai%20fenetres/fichiers%20generiques/fond_cisalpin.jpg); overflow-y: scroll; line-height: 120%; z-index: 200; text-align: center; border: solid 1px; margin: 2px 10px 2px; }
#menu_1 { position: absolute; top: 33px; left: 12px; width: 260px; z-index: 100; height: 700px; background-position: 0% 0%; margin-left: 2px; }
* {box-sizing: border-box;}
p { margin: 0 0 1em 0; }
.contenir { display: justify-content-center; flex; align-items: center; flex-direction: column; width: 300px; }
.item { padding: 2px; text-align:left;align-items:center; border: 2px solid rgba(111,41,97,.5); flex: 1 1 0; }
</style>
en html
</head>
<body>
<!-- ***************** menu 1 **************************************** -->
<div id="menu_1">
<div class="contenir" id="contenir">
<div class="item"><img src="icones/folder_presentation.png" /><a href="#pop1" class="pop"> Présentation</a></div>
<div class="item"><img src="icones/folder_cabanes.png" /><a href="#pop2" class="pop"> Cabanes de bergers</a></div>
<div class="item"><img src="icones/folder_violettes.png" /><a href="#pop3" class="pop"> Club du temps libre</a></div>
<div class="item"><img src="icones/folder_chasseurs.png" /><a href="#pop4" class="pop"> Chasseurs</a></div>
<div class="item"><img src="icones/folder_festigranges.png" /><a href="#pop5" class="pop"> Festigranges</a></div>
<div class="item"><img src="icones/folder_foyer-rural.png" /><a href="#pop6" class="pop"> Foyer rural</a></div>
<div class="item"><img src="icones/folder_belvedere.png" /><a href="#pop7" class="pop"> Hauteroche</a></div>
<div class="item"><img src="icones/folder_voies-sel.png" /><a href="#pop8" class="pop"> Voies du sel</a></div>
</div>
<!--date de mise à jour -->
<p class="titre1"> </p><p align="left" font-size:20px;>dernière mise a jour
<?php
$ressource = fopen('mise-jour_manifs.txt', 'rb');
echo fread($ressource, filesize('mise-jour_manifs.txt'));
?>
</p>
<br />
<p align="left"><a href="../cisalpin/index.php"><img src="fichiers generiques/contacts.jpg" width="160" height="16" /></a></p>
<p align="left"><a href="../cisalpin/index.php"><img src="fichiers generiques/pageprecedente.jpg" width="160" height="16" /></a></p>
<br />
<!-- compteur de visites _____ compteur_manif.txt -->
<p class="titre1"> </p>
<p align="left" font-size:20px;>;
<?php
$fichier = fopen("compteur_visites.txt", "r+");
$nombreVisites = fgets($fichier, 255);
$nombreVisites++;
fseek($fichier, 0);
fputs($fichier, $nombreVisites);
fclose($fichier);
echo 'Visiteurs : '.$nombreVisites;
?>
<p align="left" font-size:20px;> Nous sommes le :
<?php
echo date("d-m-Y");
?>
<p align="left" font-size:20px;> <br /> <br /></p>
</div>
<!-- *********** fin menu 1 **************** -->
malgré toutes mes recherche et les essais avec align-items ou autre, je ne suis pas arrivé à avoir le texte explicatif au centre du box !!!!! Je ne sais ou je fais l'erreur.
Merci de vos conseils.
Modifié par Felipe (14 Apr 2023 - 19:46)