Je travaille sur un site d'audioguide pour smartphone.
le site est réalisé en HTML.
J'utilise la balise audio et cela marche très bien sur un PC ou une tablette. voir l'image ci dessous.
Par contre lorsque l'on lit le site sur un smartphone l'image correspondante est petite.

Y a-t-il une méthode pour agrandir cette image ou la tansformer via des symboles flêche pour démarrer et deux barres pour arréter.

Merci de votre aide

jojaba a écrit :
Bonjour,
Un code à proposer (HTML + CSS) ?
Le centrage vertical est une problématique vieille comme le monde dans le domaine Web. Raphaël s'est penché sur cela pour toi (et toute la communauté) :
https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html
Petit conseil, si tu permets : la prochaine fois, essaie de faire une recherche (que ce soit ici ou sur le web entier), c'est beaucoup plus formateur que de poser une question sans se documenter

C'est ce que j'ai fait mais je n'ai rien trouver

Bonjour,
Toute petite contribution dans la limite de mes compétences
L'export vers document Word, je n'ai jamais fait, mais pour excell, il suffit de créer un fichier csv (fichier texte avec données séparées par des points-virgules) qui pourra être ouvert par le logiciel (il faudra néanmoins faire attention à l'encodage, qui est mal pris en compte par le produit Microsoft mais bien mieux par des solutions libres telles que LibrOffice).

Bonjour,
Un code à proposer (HTML + CSS) ?
Le centrage vertical est une problématique vieille comme le monde dans le domaine Web. Raphaël s'est penché sur cela pour toi (et toute la communauté) :
https://www.alsacreations.com/tuto/lire/1032-Comment-centrer-verticalement-sur-tous-les-navigateurs-.html
Petit conseil, si tu permets : la prochaine fois, essaie de faire une recherche (que ce soit ici ou sur le web entier), c'est beaucoup plus formateur que de poser une question sans se documenter

Bonjour

Bon j'ai trouvé la solution

Merci

Bonjour je n'arrive pas a centre verticalement mon div au milieu de ma page web sauf avec position: absolute; ect... vous me direz ou est le probleme ? bah j'aimerais que mon site sois "responsive" et bien avec cette commande ce n'est pas possible. et je n'arrive pas a trouver de commande qui marche ! donc si vous pourriez m'aider ou me donner la commande sa serais super cool

PapyJP a écrit :

@gcyrillus je ne vois pas de différence notable avec ce que j'ai fait

les cellules s'empilent et c’était la raison et la question de mon intervention, il te suffit de regrouper chaque colonne en une seule cellule si un reset sur le display te suffit.

je n'ai pas touché a ton HTML, qui, sans aucun style reste lisible et compréhensible.
Modifié par gcyrillus (25 Jan 2020 - 18:08)

Salut,
PapyJP a aussi demandé comment mettre, en version mobiles sous grid, les trois colonnes les unes en dessous des autres. Je réponds à cette question, sans pousser vers grid si les tables fonctionnent d'une façon satisfaisante. Les noms des items sont arbitraires. Je n'ai pas bien compris s'il s'agissait de refaire tout le site ou juste mettre grid dans la partie tables (ce qui me paraît un peu aventureux). C'est du grossier, vite fait, à adapter et finaliser. Je ne connais rien aux tables et ne peux t'en dire plus.
/*############################## Pour les mobiles ################## */

@media (max-width: 36em) {
.contenair {
	display: grid;
	grid-template-columns: 1fr 2fr 3fr;/* Ou toute autres valeurs divisant le contenair en trois */
	grid-template-rows: repeat(3,auto);
	grid-gap:5px; /* Ou plus !*/
	min-height: 100vh;
}
.table1 {
	grid-column: 1 /span 3; 
	grid-row: 1;
	background-color:lightblue;	
	font-size: 1em;
	font-family: Arial;
    	display: flex;
  	justify-content: center;
  	align-items: center;	
}
.table2 {
	grid-column: 1 /span 3 ; 
	grid-row: 2;
	background-color:lightblue;
  	font-size: 1em;
    	font-family: Arial;   	
    	display: flex;
  	justify-content: center;
  	align-items: center;	
}
.table3 {
	grid-column: 1 /span 3 ; 
	grid-row: 3;
	background-color:lightblue;
  	font-size: 1em;
    	font-family: Arial;    	
    	display: flex;
  	justify-content: center;
  	align-items: center;	
}

</style>
<body>
   <div class="contenair">
   <div class="table1">Matable1</div>
   <div class="table2">Matable2</div>
   <div class="table3">Matable3</div>
</body>
</html>

Modifié par Bongota (25 Jan 2020 - 17:58)

Juste que tu ne réponds pas à sa question, et franchement regardes puisqu'il est sur un site la version smartphone j'ai testé ta version il n'y a plus la correspondance des trois versions ... et tu dis lancer le troll, mais moi je trouves ton test pertinent, une mise en évidence des versions, le Grid-Layout tu fais des copiers collés de TOUT les trois textes brutalement dans des DIV alors qu'en tableau imagines sur 300 chants le boulot....
Et la responsivity sans rien écrire ! tu trouves pas ?

Merci de vos réponses
@JPB
Y aurait il un moyen pour que ça ne prenne pas systématiquement toute la largeur de l'écran ?
Pour cet exemple, ce ,'est pas très gênant, mais j'en ai d'autres où il n'y a que 2 colonnes (pas de phonétique)

ou même une seule colonne (texte en français)


@gcyrillus je ne vois pas de différence notable avec ce que j'ai fait
Modifié par PapyJP (25 Jan 2020 - 17:36)

Le tableau me semble tout indiqué pour ce type de contenu sans vouloir lancé un troll.

Est ce qu'un simple display sur les cellules ,pour qu'elles se superposent en deçà d'une certaine largeur, serait acceptable ?

exemple avec un peu de couleur https://codepen.io/gc-nomade/pen/KKwERwq

Bon OK il y a mieux mais c'est du 100% tout de même
La séparation des textes faciles avec excel

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]--> 
<title>Premiers pas Flex Grid_Layout</title>
<meta name="description" content="Premiers pas Flex Grid_Layout"/>
<style>
body ,html {
    margin: 0 auto;
    height: 100%; /* permet l'usage de hauteur en % pour les enfants */
}
* {box-sizing: border-box;} 
.wrapper {
   border: 2px solid #222222;
   border-radius: 5px;
   background-color: #ffffff;
}
.wrapper > div {
   border: 2px solid #222222;
   border-radius: 5px;
   background-color: #ffffff;
   padding: 1em;
   color: #111111;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px 200px;
}
</style>
</head><body>
<div class="wrapper">
   <div>
<h1>   ???????</h1><br /><br />
VOIR MON LIEN POUR COPIER COLLER
   </div>
   <div>
<h1>Lieguenda</h1><br /><br />
Byl ou Khrísta mladiéntsa sat<br />
I mnóga ros vzrástil on' v nióm<br />
On' tríjdy vdién' ikh palival<br />
Chtop spliést' vienók sibié patóm.<br />
Kagdá jé rózy rastsvéli,<br />
Ditiéï ïevriéïskikh sazvál On',<br />
Agní sarváli pa tsviétku,<br />
I sat byl viés' apustachón.<br />
"Kak Ty splitióch' tipiér vienók?<br />
B tvayóm sadoú niet bólche ros"<br />
"Vy pazabýli chto chípy<br />
astális Mnié" skazál Khrístos<br />
I is chípot agní splíli<br />
Vienók kaliútchi' dliá gnivó<br />
I kápli króvi vmiésta ros<br />
Ukrasíli ïevó tcheló.   <br /><br />
   </div>
   <div>
<h1>Légende</h1><br /><br />
L'enfant Jésus avait un jardin,<br />
Où il faisait pousser des roses<br />
Trois fois par jour il les arrosait,<br />
Pour s’en tresser des couronnes.<br />
Lorsque les roses eurent fleuri,<br />
Il fit venir les enfants juifs,<br />
Ils cueillirent chacun une rose,<br />
Et le jardin en fut dépourvu.<br />
"Comment te tresser une couronne ?<br />
Dans ton jardin il n’y a plus de roses."<br />
"Vous oubliez les ronces<br />
Qui me restent", dit le Christ.<br />
Et ils lui tressèrent avec ces ronces<br />
Une couronne pleine d’épines,<br />
Au lieu de roses, des gouttes de sang<br />
Pour décorer son front.   <br /><br />
   </div>
   </div>
</body></html>

http://www.fox-infographie.com/gridtest.htm
Modifié par Jean-Pierre-Bruneau (25 Jan 2020 - 17:06)

Je sais que sur wordpress on utilise par exemple esc_url en php. Je voudrais juste un équivalent mais sur un site statique (sans cms)

Sans doute, encore faudrait il savoir ce que tu entends exactement par là.
Modifié par PapyJP (25 Jan 2020 - 15:18)

Bonjour à tous
Dans le cadre de la rénovation par partie de mon site, je vous soumets le cas suivant:
https://www.alma-musica.net/tests/legende.html
Il s'agit des paroles d'une pièce de Tchaïkovsky.
Chaque vers est présenté de trois façons: le texte originel, une translittération phonétique et la traduction en français.
La structure utilisée consiste à définir une <table> avec 3 colonnes, ce qui assure que les vers sont face à face.
La question: comment supprimer les <table> et autres <tr>, <td>, etc et assurer la même présentation en Grid Layout, tout en permettant une présentation différente sur petits écrans, avec les trois versions présentées l'une au dessus de l'autre.
Actuellement je n'ai pas d'autre façon d'adapter cette page aux petits écrans que de réduire la taille des caractères.
Modifié par PapyJP (25 Jan 2020 - 15:16)

kustolovic a écrit :

Bonjour, en l’occurrence là n'est pas vraiment la question. Dans le flux HTML la verticalité est infinie, pour avoir un espace restant il faut fixer d'une manière ou d'une autre la taille du parent, que ce soit en absolu ou en relatif.

Ce qui est une autre façon de répondre à la question: flex:1 correspond à min-height:le reste de la balise parent et il n'y a pas de max-height implicite.
Et par ailleurs il ne semble pas y avoir un moyen de dire max-height = min-height.
Il faut donc le faire par JavaScript.
Merci de ta réponse, ça me semble clair.
Modifié par PapyJP (25 Jan 2020 - 15:01)

Bonjour,

Est-ce que c'est possible de sécurisé ses liens dans un site static en php ?

PapyJP a écrit :

Ou bien le CSS que j'ai écrit comporte une erreur, ou bien le comportement de flex:1 n'est pas d'affecter tout l'espace restant mais au moins tout l'espace restant ce qui n'est pas du tout la même chose.

Bonjour, en l’occurrence là n'est pas vraiment la question. Dans le flux HTML la verticalité est infinie, pour avoir un espace restant il faut fixer d'une manière ou d'une autre la taille du parent, que ce soit en absolu ou en relatif.

Bonjour, l'utilité et le bon endroit pour utiliser article n'est pas toujours très évident.

Il ne faut pas vouloir le réserver trop précautionneusement ni le servir à toutes les sauces

Dans la doc il est dit:

a écrit :
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

En gros c'est un ensemble cohérent d'informations qui se suffit à lui-même, que l'on pourrait extraire du site pour le mettre dans un autre contexte, sans que cela pose problème. C'est une définition bien plus large qu'un article de contenu éditorial. Une fiche produit, une recette de cuisine ou une offre d'emploi sont des <article>s.
Par contre cela présuppose d'avoir un minimum de contenu organisé: un titre, du textes, quelques données ou documents, etc.
Souvent le contenu principal d'une page est un article, à l'exception des pages qui servent à la navigation (listing, menus, etc. n'ont pas ou peu de raison d'être hors contexte). Les résumés d'articles ne sont généralement pas des articles eux-mêmes.

a écrit :

Pas "article", car le document que je cherche à décrire est plus générique. Comme je l'écrivais, le document peut aussi bien être un article, qu'une fiche produit, ou une petite annonce, par exemple.

En effet, mais une fiche produit ou une annonce sont complètement des articles.

Jean-Pierre-Bruneau a écrit :

Mais WC3 me sort 30 warning

Ici c'est le contraire de Karnabal, l'utilisation d'article est trop généreuse, une photo avec un lien sur une page n'est pas un article, c'est le contenu de cette page qui est un article.

Felipe a écrit :
Bonjour,
- j'éviterais h1 dans l'entête s'il y en a un dans le contenu .....

Oui bien d'accord avec toi, mais j'ais une page d’accroche genre de menu géant allant vers 30*2 pages réservé a mes amis photographes.
ma structure de base est (je te passes les détails,

  
  <article>
    <figure>
     <a class='LesA3' href='wblog_michelle_raffard.php' ><img class="im300" src='logos/michelle_raffardv.jpg' alt='Michelle Raffard Page' />
     <br />Michelle Raffard Page Photographe , globe trotter </a>
    </figure>
  </article>  

  <article>
    <figure>
     <a class='LesA3' href='wblog_yvon_buchmann.php' ><img class="im300" src='logos/yvon_buchmannv.jpg' alt='Yvon Buchmann' />
     <br />Yvon Buchmann Photographe , globe trotter </a>
   </figure>
  </article>  

Résultat présentation superbe et impeccable sur portables ...
Mais WC3 me sort 30 warning

Avertissement: l'article manque de titre. Pensez à utiliser les éléments h2-h6 pour ajouter des titres d'identification à tous les articles.
De la ligne 57, colonne 3; à la ligne 57, colonne 11

Pas très cool ça !!

Ah oui c'est donc pas la vrais solution que j'ai trouvée, je regardes si une autre idée existe ça m'intéresse ,car c'est souvent bien util ...

Bonjour à tous
Dans certaines pages, je mets des boutons permettant à l'utilisateur de recevoir le contenu de la page en Word ou en Excel.
Une façon simple de faire cela, que j'utilise depuis 20 ans, consiste à générer la même page avec un header approprié, le contenu étant sous la forme d'une <table>
Je suppose qu'il existe des solutions moins barbares.
Avez vous un document à me recommander à ce sujet?
Merci de votre aide

J'ai regardé ton code: le scroll est obtenu comme toujours par un max-height sur le conteneur d'images, ce que j'espérais pouvoir éviter.

La question qui me préoccupe est la suivante:
Soit un conteneur avec

figure.album{
    display:flex;
    flex-direction: column;
}

Son contenu va donc être une suite de boîtes superposées
La dernière boîte est

figure.photos {
    flex:1;
    overflow-y: auto;
}

d'après la doc flex:1 signifie que cette boîte occupe tout l'espace restant
Cela semble dire que la hauteur de figure.photos est la hauteur restante de figure.album
et donc que si ce qu'on met dedans déborde il devrait y avoir une barre de scroll.

Ou bien le CSS que j'ai écrit comporte une erreur, ou bien le comportement de flex:1 n'est pas d'affecter tout l'espace restant mais au moins tout l'espace restant ce qui n'est pas du tout la même chose.

Pour faire la présentation que l'on désire, la technique est toujours la même: utiliser du "JavaScript de présentation". Au fil du temps il est devenu de moins en moins nécessaire d'utiliser cette technique, et j'espérais que le module flexbox, relativement récent, contenait une propriété correspondant à ce besoin.
Écrire quelques lignes de JavaScript n'est pas un problème, mais je veux être sûr d'avoir bien compris le fonctionnement de flexbox dans ce domaine.

Pas grave j'espères ....

Jean-Pierre-Bruneau a écrit :
Voila grace a cette version je suis arrivé à faire ton scrolling

Merci. J’ai passé la journée à l’hosto. Je regarde demain