Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1376 connectés 

 
 


 Mot :   Pseudo :  
  Aller à la page :
 
 Page :   1  2  3  4  5  6  ..  16  17  18  19  20  21
Page Suivante
Page Précédente
Bas de page 
Auteur Sujet :

Insertion image en html depuis mon ordi

n°2411713
Harmo88
Il n\\
Posté le 08-03-2022 à 20:22:47  profilanswer
 

Reprise du message précédent :

mechkurt a écrit :

Ce sera plus compliqué que ce que tu as fait.
Tu peux afficher le code source de la page que je t'ai envoyé pour "comprendre" comment il procède, en gros tu doit préparer le contenu html de ta modal et la cacher (avec un display: none;) puis conditionner son affichage a un clic de bouton grâce au pseudo selecteur :target.
On est clairement dans du css "avancé", mais au moins tu n'a pas a abordé le javascript. :o  
 
Html:

Code :
  1. <a href="#dogs">Demo</a>
  2.   <div class="modal" id="dogs">
  3.     <div class="modal-container">
  4.     <h2>Modal Title</h2>
  5.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac iaculis est. Proin a nisl sit amet turpis facilisis euismod. Praesent sit amet nisl ornare, volutpat orci at, pretium ipsum. Sed sed ante a ex vulputate iaculis sed et mauris. Suspendisse potenti. In hac habitasse platea dictumst.</p>
  6.       <a href="#modal-close">Close</a>
  7.     </div>
  8.   </div>


Style :

Code :
  1. p { margin-top: 0; }
  3. .modal-container {
  4.   position: fixed;
  5.   background-color: #fff;
  6.   width: 70%;
  7.   max-width: 400px;
  8.   left: 50%;
  9.   padding: 20px;
  10.   border-radius: 5px;
  11.   -webkit-transform: translate(-50%, -200%);
  12.   -ms-transform: translate(-50%, -200%);
  13.   transform: translate(-50%, -200%);
  14.   -webkit-transition: -webkit-transform 200ms ease-out;
  15.   transition: transform 200ms ease-out;
  16. }
  18. .modal:before {
  19.   content: "";
  20.   position: fixed;
  21.   display: none;
  22.   background-color: rgba(0,0,0,.8);
  23.   top: 0;
  24.   left: 0;
  25.   height: 100%;
  26.   width: 100%;
  27. }
  29. .modal:target:before { display: block; }
  31. .modal:target .modal-container {
  32.   top: 20%;
  33.   -webkit-transform: translate(-50%, 0%);
  34.   -ms-transform: translate(-50%, 0%);
  35.   transform: translate(-50%, 0%);
  36. }
  38. #modal-close { }



 

Citation :

Effectivement, ça se corse ... des éléments et des attributs nouveaux, qu'il va falloir que je comprenne.
J'ai commencé à regarder le code source, en gros le fonctionnement est facile à comprendre, mais la réalisation l'est beaucoup moins.
On va y aller gentiment, pour ne pas affoler les neurones  :lol:  
C'est quand même très intéressant; j'aurais du me lancer plus tôt.
 :hello:


mood
Publicité
Posté le 08-03-2022 à 20:22:47  profilanswer
 

n°2412008
Harmo88
Il n\\
Posté le 11-03-2022 à 20:10:21  profilanswer
 

:hello:  
 
Pour l'instant, je "fabrique" des blocs, pour comprendre comment ça fonctionne; il y a tellement de possibilités.  
Il faut bien cibler les attributs dont on a besoin.
Ensuite je passerai à l'ouverture et à la fermeture avec un bouton.
 
Avec ce beau temps, je repars en photo, sans pour autant laisser tomber.

n°2412078
Harmo88
Il n\\
Posté le 13-03-2022 à 10:44:09  profilanswer
 

:hello:  
 

Citation :

Voilà ce que ça donne : pour vous, la photo ne s'affichera pas, puisqu'elle est en local sur mon ordi.
Çà fonctionne parfaitement; il a juste fallu que j'adapte la taille de la fenêtre à l'image, pour ne pas qu'elle déborde, et changer les titres.
Je n'ai pas créé de fichier CSS; je ne sais pas comment adapter un fichier spécifique à une page ... ça doit être possible.
 
<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="utf-8"/>
 <title>Afficher image avec un bouton</title>
 <link rel="stylesheet" type="text/css" href="" /> <!--href Nom du fichier CSS-->
<head>
 
<style>
    p { margin-top: 0; }
    .modal-container {
      position: fixed;
      background-color: #fff;
      width: 70%;
      max-width: 500px; /*Taille de la fenêtre à adapter à l'image*/
      left: 50%;
      padding: 20px;
      border-radius: 5px;
      -webkit-transform: translate(-50%, -200%);
      -ms-transform: translate(-50%, -200%);
      transform: translate(-50%, -200%);
      -webkit-transition: -webkit-transform 200ms ease-out;
      transition: transform 200ms ease-out;
    }
    .modal:before {
      content: "";
      position: fixed;
      display: none;
      background-color: rgba(0,0,0,.8);
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .modal:target:before { display: block; }
    .modal:target .modal-container {
      top: 20%;
      -webkit-transform: translate(-50%, 0%);
      -ms-transform: translate(-50%, 0%);
      transform: translate(-50%, 0%);
    }
    #modal-close { }
 
 
</style>
 
 
</head>
 
 
<body
 style="background-color:#b2a8f6;"><!--Couleur de fond de la page en bleu-->
 
    <a href="#dogs">Afficher rotor anticouple</a>
      <div class="modal" id="dogs">
        <div class="modal-container">
        <h2>Rotor anticouple</h2>
          <p style="text-align: center;"><img src="C:\Users\Perso\Pictures\rac.jpg" class="image" alt"Photo rotor anticouple hélicoptère"/></p>
          <a href="#modal-close">Close</a>
        </div>
      </div>
 
 
 
</body>  

n°2413460
Harmo88
Il n\\
Posté le 29-03-2022 à 12:02:35  profilanswer
 

:hello:  
Pour les fenêtres modales, c'est bon.
 
Dans un autre domaine, est-il correct sémantiquement de numéroter des paragraphes <p1> ...<p2>, pour ne pas que ces paragraphes numérotés soient concernés par les attributs des paragraphes précédents ?
 
Par exemple, j'ai des paragraphes avec margin: 0px, et je veux des nouveaux paragraphes avec margin: 10px.
Ensuite, je veux revenir à des paragraphes avec margin: 0px
En numérotant les nouveaux paragraphes, ils ne seraient pas concernés par margin: 0px
C'est correct ?
<body>
    <style>
        p {
           margin: 0px;
        }
        p1 {
           margin: 10px;
        }
    </style>
<p>Bonjour</p>
<p1>Bonsoir</p1>
</body>
 

n°2413464
MaybeEijOr​Not
but someone at least
Posté le 29-03-2022 à 12:19:48  profilanswer
 

Non mais tu n'en es pas loin.

 

Tu dois utiliser les classes CSS, tu attribues une classe (class) à chaque type de paragraphe :

Code :
  1. <body>
  2.     <style>
  3.         p.nomargin {
  4.            margin: 0px;
  5.         }
  6.         p.margin {
  7.            margin: 10px;
  8.         }
  9.     </style>
  10. <p class="nomargin">Bonjour</p>
  11. <p class="margin">Bonsoir</p>
  12. </body>
 

Ainsi à chaque fois que tu préciseras la classe dans la balise, ça ira chercher le style CSS définit pour cette classe. ;)

 

EDIT : tu peux donner le nom que tu veux à tes classes.

Message cité 1 fois
Message édité par MaybeEijOrNot le 29-03-2022 à 12:21:28

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413474
Harmo88
Il n\\
Posté le 29-03-2022 à 13:36:35  profilanswer
 

MaybeEijOrNot a écrit :

Non mais tu n'en es pas loin.
 
Tu dois utiliser les classes CSS, tu attribues une classe (class) à chaque type de paragraphe :

Code :
  1. <body>
  2.     <style>
  3.         p.nomargin {
  4.            margin: 0px;
  5.         }
  6.         p.margin {
  7.            margin: 10px;
  8.         }
  9.     </style>
  10. <p class="nomargin">Bonjour</p>
  11. <p class="margin">Bonsoir</p>
  12. </body>


 
Ainsi à chaque fois que tu préciseras la classe dans la balise, ça ira chercher le style CSS définit pour cette classe. ;)  
 
EDIT : tu peux donner le nom que tu veux à tes classes.


[quotmsg]Effectivement, je n'ai pas pensé à utiliser class  :pfff: qui est fait pour ça ...
Merci pour ta réponse.[/quotmsg]

n°2413594
gatsu35
Blablaté par Harko
Posté le 30-03-2022 à 13:42:06  profilanswer
 

en fait tu n'as pas le droit de mettre des P dans un H1,  
Le navigateur va fermer le H1 au moment où il va voir ton P
Du coup ça fait n'importe quoi.
Et si tu veux aligner au centre c'est <h1 style="text-align:center">
 

Message cité 1 fois

---------------
Blablaté par Harko
n°2413610
MaybeEijOr​Not
but someone at least
Posté le 30-03-2022 à 16:02:01  profilanswer
 

gatsu35 a écrit :

en fait tu n'as pas le droit de mettre des P dans un H1,  
Le navigateur va fermer le H1 au moment où il va voir ton P
Du coup ça fait n'importe quoi.
Et si tu veux aligner au centre c'est <h1 style="text-align:center">


Il n'a pas fait ça ni dit qu'il voulait faire ça ? :??:  
 
Par contre, je n'avais pas fait attention, la balise "<style>" va dans la balise "<head>" et non dans la balise "<body>".

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413639
rufo
Pas me confondre avec Lycos!
Posté le 30-03-2022 à 18:54:19  profilanswer
 

Si, il nous l'a déjà fait le coup du <p> dans le <h1>.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2413641
MaybeEijOr​Not
but someone at least
Posté le 30-03-2022 à 18:58:11  profilanswer
 

Oui mais pas dernièrement ? Ou alors je n'ai rien compris...


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
mood
Publicité
Posté le 30-03-2022 à 18:58:11  profilanswer
 

n°2413646
Harmo88
Il n\\
Posté le 30-03-2022 à 20:06:15  profilanswer
 

MaybeEijOrNot a écrit :


Il n'a pas fait ça ni dit qu'il voulait faire ça ? :??:  
 
Par contre, je n'avais pas fait attention, la balise "<style>" va dans la balise "<head>" et non dans la balise "<body>".


 
[quotemsg]
Je n'ai pas le souvenir d'avoir mis un <p> dans un h1 ... j'ai fait d'autres erreurs, c'est sur, par manque de connaissance du HTML et du CSS, puisque je débute.
Je ne confonds pas un titre de page, avec un paragraphe.
 
Pour la balise <style> dans le <body>, le bouquin indique que c'est possible avec le HTML5 .... c'est pourquoi je l'ai fait ... J'ai vu la même chose sur un site de HTML, je ne sais plus lequel ...
alors qu'avant, je la mettais dans le <head>; il semble qu'il y ait beaucoup d'erreurs dans ce bouquin. Dorénavant, je placerai cette balise dans le <head>.
Beaucoup d'exercices ne donnent pas le même résultat, à l'écran, que sur les images de ce bouquin.
Pour certains, je trouve la solution, et je rectifie; pour d'autres je ne comprends même pas, je mets une annotation comme quoi ça ne fonctionne pas, et je passe à autre chose.
 
"Et si tu veux aligner au centre c'est <h1 style="text-align:center">" ça, c'est OK, j'ai déjà utilisé, tout au début de la page que j'ai crée.
 
Merci pour vos commentaires, qui me sont une aide que j'apprécie.
L'apprenti n'est pas encore maître, même si il progresse  :)

n°2413653
gatsu35
Blablaté par Harko
Posté le 31-03-2022 à 04:42:49  profilanswer
 

j'ai répondu à un de tes messages en page 1 ou 2 je crois, mais j'avais pas vu que j'ai fais mon muchacho


---------------
Blablaté par Harko
n°2413655
rufo
Pas me confondre avec Lycos!
Posté le 31-03-2022 à 07:33:27  profilanswer
 

Trouvé en fin de page 1 :o

Citation :


<h1
   <p align=center  
   style="color:yellow">VOL EN HELICOPTERE RADIOCOMMANDE<!--Colore le titre en jaune/ Titre centré avec p align=center-->
   </p>
  </h1>  

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2413657
Harmo88
Il n\\
Posté le 31-03-2022 à 08:46:00  profilanswer
 

rufo a écrit :

Trouvé en fin de page 1 :o

Citation :


<h1
   <p align=center  
   style="color:yellow">VOL EN HELICOPTERE RADIOCOMMANDE<!--Colore le titre en jaune/ Titre centré avec p align=center-->
   </p>
  </h1>  



 
[quotemsg]  :lol:  autant pour moi .... c'était tout au début; ça a été rectifié depuis.
On tâtonne, on essaie, et on oublie de rectifier, jusqu'à ce qu'on s'aperçoive que quelque chose ne va pas...
Merci pour le rappel.  ;)  
 
 

n°2413741
Harmo88
Il n\\
Posté le 01-04-2022 à 09:43:30  profilanswer
 

Citation :

Pour du texte sur plusieurs colonnes, est-ce que sémantiquement, cette façon de faire est correcte?
 
<!DOCTYPE html>
<html lang="fr">
 
<head>
 <meta charset="utf-8"/>
 <title>Sono.html</title>
 <link rel="stylesheet" type="text/css" href="" /> <!--href"" vide pour essai.-->
   
   
<style>
/*Texte sur 4 colonnes*/
.sono {
 border: 2px solid #000;
 margin: 10px;  /*Marge extérieure de la fenêtre*/
 padding: 10px;   /*Marge à l'intérieur de la fenêtre*/
 column-count:4;  /*Nombre de colonnes*/
 font-size: 18px; /*Taille de la police*/
 color: #0000ff;  /*Couleur police*/
 column-rule: 2px solid #000; /*Trait vertical*/
 }
 </style>
 
</head>
 
<body>
 
<p class="sono">  
  <u>Marche/Sourdine</u> :<br>
  1. Branchez le câble d'alimentation sur une prise  
  murale et allumez l'appareil; le système est alimenté.<br>
  2. Appuyez sur la touche "MUTE" de la télécommande pour couper le son.<br>
  <br>
  <u>Séléction de la source audio</u> :<br>
  1. Branchez le connecteur port du connecteur PC sur le panneau
  arrière de l'amplificateur de vos appareils audio(carte son PC, tablette,
  lecteur MP3/MP4, etc) avec le câble audio 3.5 mm~double RCA.
  Câble audio 3.5 mm (non fourni avec le produit) disponible si l'entrée AUX
  est sélectionnée sur le panneau arrière ou latèral de l'amplificateur.<br>
  2. Appuyez sur le bouton "INPUT" sur la façade de l'amplificateur ou sur
  la touche "PC" / "AUX" de la télécommande pour basculer la source audio.
  3. L'indicateur correspondant s'allumera sur la façade de l'amplificateur,
  dès que la source audio sera sélectionnée.<br>
  <br>
  <u>Entrée optique</u> :<br>
  1. Appuyez sur le bouton "INPUT" (ENTREE) sur la façade de l'amplificateur
  ou sur la touche "OPT" de la télécommande pour séléctionner l'entrée audio.<br>
  2. Branchez "OPT" à la source audio avec la câble fibre optique.<br>
  3. Lisez la musique sur l'appareil branché.<br>
  4. Réglez le volume à votre convenance.<br>
  <u>Remarque</u> : seuls les signaux ausio PCM standards de l'horloge d'échantillonage
  (44,1/48/96 kHz) sont adaptables en mode optique.<br>
  <br>
  <u>Réglages</u> :<br>
  1. Appuyez sur le bouton "FUNC" sur la façade de l'amplificateur pour accéder
  aux réglages "BASS" et "TREBLE". Le voyant lumineux correspondant s'allumera  
  pendant le mode de réglage. Tournez le bouton principal du volume pour régler
  les graves (-9 à 9) et les aigus (-7 à 7) à votre convenance.
  L'écran numérique affichera la valeur correspondante. Si aucun voyant lumineux
  n'est allumé, le système est mode de contrôle du volume principal (0 à 50).<br>
  2. Appuyez sur les touches "SW +"/"SW -", "TRE +"/"TRE -" et "VOLUME +/-"  
  de la télécommande pour régler le niveau des graves, des aigus, et du volume.
  L'écran numèrique affichera la valeur correspondante.<br>
  <u>Remarque</u> : le système repassera par défaut sur le réglage du volume principal
  si aucune action n'est effectuée en mode réglage, dans les 3 secondes.<br>
  <br>
  <u>Débit des écouteurs</u> :<br>
  1. Branchez vos écouteurs dans la prise située sur la face latérale de l'amplificateur.<br>
  2. Réglez le volume en tournant le bouton proncipal du volume. L'écran affiche le niveau
  de volume correspondant.<br>
  <br>
  <u>A propos de la technologie E.I.D.C.</u>:<br>
  Si un signal d'entrée est trop fort, il parasite l'amplificateur, ce qui déforme le signal.
  Afin de protéger l'équipement audio de l'utilisateur et de générer une excellente expèrience  
  musicale, EDIFIER a créé un système anti-distorsion appelé E.I.D.C.  
  (Electronic Intelligent Distortion Control). Ce système en attente d'être bréveté et propriètaire,
  utilise un microprocesseur pour surveiller le taux de distorsion harmonique (THD) en temps réel,
  en comparant le signal d'entrée au signal de sortie, et il ajuste automatiquement le niveau
  de gain de l'amplificateur.<br>
  E.I.D.C est une fonctionnalité de série, pour ce produit. Lorsque le système détecte une distorsion,
  le voyant d'alimentation clignote une fois et le niveau du volume du système diminue d'un palier.
  L'E.I.D.C. reste actif tant que la distorsion est détectée.<br>
  <br>
  <u>Guide de dépannage</u>:<br>
  1. <u>Tous les haut-parleurs ne fonctionnent pas</u> :<br>
  Veuillez d'abord vérifier si les câbles du haut-parleur sont connectés de manière sécurisée, puis
  vérifiez si les connecteurs d'entrée (Line-in) sont inversés; vérifiez aussi si il y a un défaut  
  de la source audio.<br>
  <br>
  2. <u>Un haut-parleur satellite ne fonctionne pas lorsqu'il lit un CD sur l'ordinateur</u> :<br>
  Ce type de phénomène est susceptible de se produire sur de nouveaux systèmes d'ordinateur :
  un satellite ne fonctionne pas lors de la lecture d'un CD mais le système fonctionne bien lors de
  la lecture de fichiers formatés en WAW.<br>
  Cela est principalement dû à un défaut de connexion du CD-ROM et de la carte son : un canal
  de signal est relié à la masse.<br>
  Veuillez vous référer au manuel du CD-ROM et de la carte son pour régler la connexion du câble.<br>
  <br>
  3.<u>Le système ne fonctionne pas du tout</u> : <br>
  I. Veuillez vérifier si le courant est branché, et si la prise murale est allumée.<br>
  II. Veuillez vérifier si l'amplificateur est toujours en mode STBY.<br>
  III. Veuillez vérifier si le volume master est sur minimum.<br>
  IV. Veuillez vérifier si le câble d'entrée audio est bien connecté.<br>
  V. Veuillez vérifier s'il y a un signal de la source audio.<br>
  <br>
  4.<u>Il y a du bruit dans les haut-parleurs</u>:<br>
  L'équipement de l'amplificateur de ce produit génère peu de bruit, alors que le bruit de fond
  de certains lecteurs VCD/DVD, ou la carte son du PC sont trop élevés.<br>
  Veuillez laisser le système en mode actif et retirer la source audio.<br>
  Si aucun son n'est entendu à 1 mètre du système, alors il n'y a aucun problème avec le produit.<br>
  <br>
  Si vous avez d'autres questions ou prèoccupations concernant les produits EDIFIER :<br>
  Cher client,<br>
  Nous vous remercions d'avoir acheté ce produit EDIFIER. Pour que la garantie EDIFIER s'applique
  à ce produit, veuillez consulter le site Internet EDIFIER www.edifier-international.com/warranty-terms<br>
  Veuillez consulter notre site Internet : www.edifier.com, ou envoyez un courriel à EDIFIER Support pour
  davantage d'aide : main@edifier; si vous préférez nous contacter par téléphone, N° gratuit : 1-877-EDIFIER (334-3437).
   
  </p>
 
</body>
</html>

n°2413750
MaybeEijOr​Not
but someone at least
Posté le 01-04-2022 à 10:46:17  profilanswer
 

Bonjour,
 
Ah ben tu as bien progressé, pas d'avis sur la mise en forme en colonnes, ce n'est pas trop dans les standards du web actuel je pense. Mais moi ça ne me choque pas si ce n'est que ça te fait tout mettre sémantiquement dans un seul paragraphe (p). Donc j'aurai plutôt mis tout ton texte dans une balise div, j'aurai appliqué les colonnes à cette balise. Puis le texte je l'aurai découpé en plusieurs paragraphes, voire même utilisé les titres pour hiérarchiser. Ce qui permet par exemple de créer une règle css de soulignement pour les titres plutôt que d'utiliser la balise u qui n'est plus préconisée (mieux vaut passer par le css). ;)

Message cité 2 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413764
Harmo88
Il n\\
Posté le 01-04-2022 à 12:06:22  profilanswer
 

MaybeEijOrNot a écrit :

Bonjour,
 
Ah ben tu as bien progressé, pas d'avis sur la mise en forme en colonnes, ce n'est pas trop dans les standards du web actuel je pense. Mais moi ça ne me choque pas si ce n'est que ça te fait tout mettre sémantiquement dans un seul paragraphe (p). Donc j'aurai plutôt mis tout ton texte dans une balise div, j'aurai appliqué les colonnes à cette balise. Puis le texte je l'aurai découpé en plusieurs paragraphes, voire même utilisé les titres pour hiérarchiser. Ce qui permet par exemple de créer une règle css de soulignement pour les titres plutôt que d'utiliser la balise u qui n'est plus préconisée (mieux vaut passer par le css). ;)


 
[quotemsg]Merci pour les encouragements  :jap: J'avais essayé avec column-width, column-gap etc, mais la gestion de la dimension des fenêtres est plus compliquée; le texte des différentes fenêtres se chevauchait ....
J'avais trouvé que la méthode que j'ai employée est plus simple, et plus automatisée (pas de largeur de fenêtre à indiquer, ça se "fait" tout seul).
Le but était de découvrir le texte en colonnes; je ne sais pas si j'utiliserai souvent. C'est autant pour le plaisir.
 
Je vais essayer ta méthode.
OK pour la balise <u> périmée.
 
En aparté, je m'étais juré, à la retraite, de ne plus jamais programmer ... suite à tous les stages intensifs en électronique, programmation ...
Il fallait en quelques mois, à raison de quelques heures par semaine (et assurer le semaine de travail), rattraper le niveau de ceux qui avaient fait le même parcours, en quelques années au lycée.
Je m'étais bien "pété" les neurones  :lol:  
Et puis, la curiosité concernant le HTML a été la plus forte; un peu maso sans doute ...
Ce qui m'a conforté à continuer, est que sur HardWare, vous êtes disponibles, et patients, ce qui n'est pas le cas de tous les sites.
Merci encore pour votre aide.  :hello:  

n°2413814
Harmo88
Il n\\
Posté le 01-04-2022 à 20:19:38  profilanswer
 

Citation :

J'aurais voulu justifier le texte dans les colonnes, mais je n'ai pas encore trouvé la solution ... le margin:0px empêche la justification, enfin, je crois ...
 
<!DOCTYPE html>
<html lang="fr">
 
 
<head>
  <meta charset="utf-8"/>
  <title>colonne-div.html</title>
  <link rel="stylesheet" type="text/css" href="" />  
   
<style>
 
#colonnes3 {
 width: 600px;
 column-count: 3;
 column-width: 150px;
 column-gap: 10px;
 column-rule: 1px solid #ef3422;
 column-rule-color: #ef3422;
 padding: 10px;
 border: 1px solid #ef3422;
 color: #3641ec;
}
 #colonnes3 p, #colonnes3 h4 {
  margin: 0px;
}
 
 
 
   
   
</style>  
   
   
</head>
 
<body>
 
<div id="colonnes3">
<h4>INTRODUCTION</h4>
<p>La fonction du STIM-PRO + est de traiter/soulager la douleur
grâce à une opèration nommée TENS et de stimuler les muscles grâce  
grâce à une opèration nommée EMS. L'appareil est utilisé et exploité  
par le patient lui-même.</p>
 
<h4>Qu'est-ce que la TENS ?</h4>
 
<p>La stimulation nerveuse électrique transcutanée (TENS)est une variante  
douce du traitement de la douleur par stimulation électrique. L'appareil
TENS envoie des impulsions agréables à travers la peau et stimulent les nerfs
situés dans la zone de traitement. La sensation de douleur de l'utilisateur est,
dans de nombreux cas, réduite ou éliminée. Le soulagement de la douleur varie
en fonction du patient, de la thérapie choisie, et du type de douleur. Chez de  
nombreux patients, la réduction ou l'élimination de la douleur dure plus longtemps
que le temps de stimulation en lui-même (parfois, trois à quatre fois plus longtemps).
Pour certains patients,la douleur n'est soulagée que le temps de la séance de stimulation.</p>
 
<h4>Principe de fonctionnement de la TENS</h4>
 
<p>La stimulation transcutanée des nerfs est une méthode non invasive et sans médicament
pour traiter la douleur. La TENS utilise de minuscules impulsions électriques envoyées
par la peau aux nerfs pour modifier la perception suggestive de la douleur.
La TENS ne guérit pas un problème physiologique, mais aide seulement à contrôler la douleur.
La TENS ne fonctionne pas pour tout le monde mais elle aide la plupart des patients
à réduire ou à éliminer la douleur.</p>
 
<h4>Qu'est-ce que l'EMS ?</h4>
 
<p>La stimulation musculaire électrique est un traitement reconnu et utilisé dans le monde entier
pour soulager les lèsions musculaires. L'EMS est également utilisé avec succés depuis
plusieurs années, dans le domaine sportif pour la régénération et le développement musculaire.</p>
</div>
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

n°2413815
MaybeEijOr​Not
but someone at least
Posté le 01-04-2022 à 20:31:05  profilanswer
 

Code :
  1. #colonnes3 p, #colonnes3 h4 {
  2.   margin: 0px;
  3.   text-align: justify;
  4. }


 
Je vois que tu commences à maîtriser les sélecteurs CSS, c'est bien.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413816
Harmo88
Il n\\
Posté le 01-04-2022 à 20:57:58  profilanswer
 

MaybeEijOrNot a écrit :

Code :
  1. #colonnes3 p, #colonnes3 h4 {
  2.   margin: 0px;
  3.   text-align: justify;
  4. }


 
Je vois que tu commences à maîtriser les sélecteurs CSS, c'est bien.


 
[quotemsg] C'était pourtant plus simple que ce que je cherchais ...
J'avais essayé text-justify:inter-word; ça n'a pas fonctionné ...
 
Je m'impose d'ajouter des attributs, pour les mémoriser. Ça vient doucement.
Merci pour ta réponse.[/quotemsg

n°2413817
MaybeEijOr​Not
but someone at least
Posté le 01-04-2022 à 21:07:08  profilanswer
 

text-justify précise comment doit se justifier le texte quand text-align a pour valeur "justify".
 
Tu commences à gérer les balises HTML, par contre les balises de BBCode sur le forum ce n'est pas encore ça. xD

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413822
rufo
Pas me confondre avec Lycos!
Posté le 02-04-2022 à 08:42:39  profilanswer
 

Pour info, pour les 1., 2., 3., ... tu peux utiliser les listées ordonnées : <ol> ;)

Message cité 2 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2413826
Harmo88
Il n\\
Posté le 02-04-2022 à 11:43:34  profilanswer
 

MaybeEijOrNot a écrit :

text-justify précise comment doit se justifier le texte quand text-align a pour valeur "justify".
 
Tu commences à gérer les balises HTML, par contre les balises de BBCode sur le forum ce n'est pas encore ça. xD


Citation :

Problème de clavier .... les touches sont trop espacées, j'ai des bugs de frappe. J'avais un Rocca qui allait bien, mais il n'a pas apprécié le passage
à W10. Je n'ai pas trouvé de pilote. Et vu le prix de ces claviers .... il faut que j'en trouve un équivalent.


n°2413828
Harmo88
Il n\\
Posté le 02-04-2022 à 11:56:30  profilanswer
 

rufo a écrit :

Pour info, pour les 1., 2., 3., ... tu peux utiliser les listées ordonnées : <ol> ;)


 

Citation :

C'est fini, de me compliquer la vie?  :whistle:  :whistle:  :lol: C'est pas assez compliqué comme ça ?  :lol:  
Bon  :jap: je vais essayer.
 
Je voulais tester:
<style>
#colonnes3 h4.haut-col {
   break-before: column;
}
</style>
 
C'est censé placer les titres <h4> en haut de colonnes.
Comme j'ai 6 titres, j'ai modifié le nombre de colonnes dans column-count; j'ai donc attribué 6 colonnes (au lieu de trois), ce qui devrait donner en largeur 6*150px = 900px. Ça devrait passer ...
A l'exécution, j'ai toujours 3 colonnes ... je ne sais pas si mon raisonnement est bon ...

n°2413832
MaybeEijOr​Not
but someone at least
Posté le 02-04-2022 à 12:50:19  profilanswer
 

Cela devrait fonctionner, néanmoins tous les navigateurs ne sont pas compatibles avec cette règle.

 

Attention à ne pas rentrer dans de la "sur"-sélection dans ton CSS, tu viens d'écrire d'appliquer une règle break-before pour tous les titres "h4" de la classe "haut-col" qui sont contenus dans l'élément ayant l'id "colonnes3".
Étant donné ton nom de classe "haut-col" et son contenu je pense que tu peux juste écrire :

Code :
  1. <style>
  2. .haut-col {
  3.    break-before: column;
  4. }
  5. </style>


En effet, tu utiliseras cette classe uniquement pour casser les colonnes, donc tu l'attribueras qu'aux éléments qui en ont besoin, pas besoin de spécifier que c'est limité aux titres "h4" contenus dans l'élément ayant pour id "colonnes3". Soit tu es en dehors de ces éléments et tu ne veux pas casser les colonnes, donc tu n'attribueras pas cette classe aux éléments en dehors. Soit tu es en dehors ou à l'intérieur de ces éléments et tu veux casser les colonnes, auquel cas tu pourras attribuer cette classe.

Message cité 1 fois
Message édité par MaybeEijOrNot le 02-04-2022 à 12:51:33

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413838
Harmo88
Il n\\
Posté le 02-04-2022 à 13:46:07  profilanswer
 

MaybeEijOrNot a écrit :

Cela devrait fonctionner, néanmoins tous les navigateurs ne sont pas compatibles avec cette règle.
 
Attention à ne pas rentrer dans de la "sur"-sélection dans ton CSS, tu viens d'écrire d'appliquer une règle break-before pour tous les titres "h4" de la classe "haut-col" qui sont contenus dans l'élément ayant l'id "colonnes3".
Étant donné ton nom de classe "haut-col" et son contenu je pense que tu peux juste écrire :

Code :
  1. <style>
  2. .haut-col {
  3.    break-before: column;
  4. }
  5. </style>


En effet, tu utiliseras cette classe uniquement pour casser les colonnes, donc tu l'attribueras qu'aux éléments qui en ont besoin, pas besoin de spécifier que c'est limité aux titres "h4" contenus dans l'élément ayant pour id "colonnes3". Soit tu es en dehors de ces éléments et tu ne veux pas casser les colonnes, donc tu n'attribueras pas cette classe aux éléments en dehors. Soit tu es en dehors ou à l'intérieur de ces éléments et tu veux casser les colonnes, auquel cas tu pourras attribuer cette classe.


 

Citation :

Je n'y arrive pas, soit je m'y prends mal, soit le navigateur ne l'accepte pas ... Pas grave, c'était juste pour voir l'effet produit, au niveau de la présentation du document.
Je ne comprends pas non plus pourquoi, si je change le nombre de colonnes dans column-count (3 au départ), le nombre de colonnes reste à 3, alors que j'en attribue 4.
Est-ce en rapport avec la longueur de texte ? Il faut que j'en rajoute ? Perso, je ne le pense pas, mais je peux me tromper.
 
Pour la justification du texte, je crois que je ne l'appliquerai plus; entre certains mots, l'espace est trop important, surtout lorsqu'on passe d'un mot long, à un mot court. Ça n'est pas plus "joli"
que du texte non justifié, ou alors la largeur des colonnes n'est pas assez important. Je n'ai pas non plus testé tous les attributs de justify ... Pas simple la gestion des colonnes ... tu as raison, je rentre peut-être dans la "sur" sélection, et comme je n'ai pas encore un niveau assez élevé, j'ai un peu de mal à gérer.


 

Message cité 1 fois
n°2413841
Harmo88
Il n\\
Posté le 02-04-2022 à 13:58:55  profilanswer
 

rufo a écrit :

Pour info, pour les 1., 2., 3., ... tu peux utiliser les listées ordonnées : <ol> ;)


 

Citation :

  :hello:  Je reviens sur ton message. En fait, c'est moi qui ne "vois" pas à quoi va servir une liste ordonnée, dans ce cas ...
Ce qui démontre que je ne maîtrise pas encore suffisamment certaines fonctions.  
Je vais revoir le sujet, et également les imbrications, qui me posent problème en HTML, et moins dans un autre langage, comme le basic (il y a .... des lustres).
C'est curieux comme on peut réagir face à certains éléments ...

n°2413845
MaybeEijOr​Not
but someone at least
Posté le 02-04-2022 à 14:18:03  profilanswer
 

Harmo88 a écrit :


Je n'y arrive pas, soit je m'y prends mal, soit le navigateur ne l'accepte pas ... Pas grave, c'était juste pour voir l'effet produit, au niveau de la présentation du document.
Je ne comprends pas non plus pourquoi, si je change le nombre de colonnes dans column-count (3 au départ), le nombre de colonnes reste à 3, alors que j'en attribue 4.
Est-ce en rapport avec la longueur de texte ? Il faut que j'en rajoute ? Perso, je ne le pense pas, mais je peux me tromper.
 
Pour la justification du texte, je crois que je ne l'appliquerai plus; entre certains mots, l'espace est trop important, surtout lorsqu'on passe d'un mot long, à un mot court. Ça n'est pas plus "joli"
que du texte non justifié, ou alors la largeur des colonnes n'est pas assez important. Je n'ai pas non plus testé tous les attributs de justify ... Pas simple la gestion des colonnes ... tu as raison, je rentre peut-être dans la "sur" sélection, et comme je n'ai pas encore un niveau assez élevé, j'ai un peu de mal à gérer.


Firefox et Safari ne supportent pas le break-before pour les colonnes : https://developer.mozilla.org/fr/do [...] avigateurs
Si tu as un problème, merci de partager ton code, ça permet de savoir si cela est causé par l'environnement ou par le code en lui-même ou si c'est un comportement mal compris. Parce que comme ça, aucune idée de si c'est normal d'avoir 3 colonnes au lieu de 4. Je dirai que non mais je n'ai jamais utilisé cette règle css par la passé.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413849
Harmo88
Il n\\
Posté le 02-04-2022 à 15:23:05  profilanswer
 

MaybeEijOrNot a écrit :

Bonjour,
 
Ah ben tu as bien progressé, pas d'avis sur la mise en forme en colonnes, ce n'est pas trop dans les standards du web actuel je pense. Mais moi ça ne me choque pas si ce n'est que ça te fait tout mettre sémantiquement dans un seul paragraphe (p). Donc j'aurai plutôt mis tout ton texte dans une balise div, j'aurai appliqué les colonnes à cette balise. Puis le texte je l'aurai découpé en plusieurs paragraphes, voire même utilisé les titres pour hiérarchiser. Ce qui permet par exemple de créer une règle css de soulignement pour les titres plutôt que d'utiliser la balise u qui n'est plus préconisée (mieux vaut passer par le css). ;)


 

Citation :

Je reprends le message.
Dans cet exemple, quand je change le nombre de colonnes, ça fonctionne.
Pourquoi ça ne fonctionne pas avec div ... curieux.
J'essaierai avec conteneur.
 
J'ai effacé break-before dans le dernier exemple; je ne sais plus ce que j'avais testé .... besoin d'un breack, je sature  :pt1cable:  
je reprendrai ce soir.


Message cité 1 fois
n°2413857
Harmo88
Il n\\
Posté le 02-04-2022 à 17:24:20  profilanswer
 

Harmo88 a écrit :


 

Citation :

Je reprends le message.
Dans cet exemple, quand je change le nombre de colonnes, ça fonctionne.
Pourquoi ça ne fonctionne pas avec div ... curieux.
J'essaierai avec conteneur.
 
J'ai effacé break-before dans le dernier exemple; je ne sais plus ce que j'avais testé .... besoin d'un breack, je sature  :pt1cable:  
je reprendrai ce soir.




 

Citation :


 
<style>
 
#colonnes3 {
 width: 900px;
 column-count: 4;
 column-width: 150px;
 column-gap: 10px;
 /*column-rule: 1px solid #ef3422;*/
 /*column-rule-color: #ef3422;*/
 padding: 10px;
 border: 1px solid #ef3422;
 color: #3641ec;
}
#colonnes3 p, #colonnes3 h4 {
 margin: 0px;
}  
   
</style>  
 
En supprimant les traits verticaux, je peux changer le nombre de colonnes, ça fonctionne.
Ce qui m'a mis "la puce à l'oreille", c'est que dans l'autre exemple, il n'y avait pas de séparation de colonnes avec ces traits verticaux.
Maintenant que j'ai une colonne de plus je vais remettre ces séparations, pour voir ...
 
Hé ben, j'ai remis les séparations, et je conserve mes 4 colonnes ... va comprendre, Charles ...
Si tu as l'explication ... je suis preneur.

n°2413859
Harmo88
Il n\\
Posté le 02-04-2022 à 18:20:13  profilanswer
 

Citation :


 
<style>
 
#colonnes3 {
 width: 900px;
 column-count: 4;
 column-width: 150px;
 column-gap: 10px;
 /*column-rule: 1px solid #ef3422;*/
 /*column-rule-color: #ef3422;*/
 padding: 10px;
 border: 1px solid #ef3422;
 color: #3641ec;
}
#colonnes3 p, #colonnes3 h4 {
 margin: 0px;
}  
   
</style>  
 
En supprimant les traits verticaux, je peux changer le nombre de colonnes, ça fonctionne.
Ce qui m'a mis "la puce à l'oreille", c'est que dans l'autre exemple, il n'y avait pas de séparation de colonnes avec ces traits verticaux.
Maintenant que j'ai une colonne de plus je vais remettre ces séparations, pour voir ...
 
Hé ben, j'ai remis les séparations, et je conserve mes 4 colonnes ... va comprendre, Charles ...
Si tu as l'explication ... je suis preneur.  

En fait, ça ne fonctionne qu'une fois .... dommage.
Il faudrait donc provoquer un saut de colonne; j'ai trouvé, apparemment, mais c'est en anglais ... et là, je ne comprends rien.[/quotemsg]

n°2413861
MaybeEijOr​Not
but someone at least
Posté le 02-04-2022 à 18:48:51  profilanswer
 

Qu'est-ce qui ne fonctionne qu'une fois ?

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413862
Harmo88
Il n\\
Posté le 02-04-2022 à 19:14:15  profilanswer
 

MaybeEijOrNot a écrit :

Qu'est-ce qui ne fonctionne qu'une fois ?


 

Citation :

L'ajout d'une colonne, ça ne fonctionne qu'une fois; donc, ça n'est pas la solution.
Si je change la largeur des colonnes, le nombre des colonnes change; mais en continuant à éditer du texte, les colonnes s'allongent vers le bas.
Il n'y a pas de passage automatique à la colonne suivante, même si il en reste de disponible.
J'ai même essayé en retirant la bordure tout autour des colonnes, pour voir.
 
Ex: J'ai rempli 4 colonnes, j'en ai cinq d'attribuées, le passage à la 5e ne se fera pas. Est-ce qu'il faudrait définir une largeur, et une hauteur de colonne ?
Il n'est pas certain qu'il y ait aussi un passage auto à la colonne suivante. Il pourrait y avoir un débordement de texte dans les colonnes ?
 
J'ai essayé aussi de diviser la résolution de l'écran par le nombre de colonnes souhaitées, mais ça ne correspond pas.
Ex: je veux 6 colonnes; donc 1920/6= 320px
Sur l'écran, ça ne correspond pas ... et puis, que donnerait l'affichage sur un écran plus petit ?
Je n'en n'ai aucune idée. Ce ne sont de ma part, que des suppositions.
 
La gestion des colonnes, c'est pire que le calcul des intervalles, avec un piquet, ou non, au départ  :lol: ou en circuit fermé (cas le plus simple, finalement).


n°2413863
MaybeEijOr​Not
but someone at least
Posté le 02-04-2022 à 20:00:09  profilanswer
 

Ok, mais sans le code je ne peux pas t'aider, pas de problème par exemple avec ça chez moi :

Code :
  1. <style>
  2. div {
  3.   columns: auto 24vw;
  4.   column-rule: solid 1px black;
  5. }
  6. h1 {
  7.   break-before: column;
  8. }
  9. </style>


Code :
  1. <body>
  2.   <div>
  3.     <h1>titre 1</h1>
  4.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  5.     <h1>titre 2</h1>
  6.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  7.     <h1>titre 3</h1>
  8.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  9.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  10.   </div>
  11. </body>

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413864
Harmo88
Il n\\
Posté le 02-04-2022 à 20:11:34  profilanswer
 

MaybeEijOrNot a écrit :

Ok, mais sans le code je ne peux pas t'aider, pas de problème par exemple avec ça chez moi :

Code :
  1. <style>
  2. div {
  3.   columns: auto 24vw;
  4.   column-rule: solid 1px black;
  5. }
  6. h1 {
  7.   break-before: column;
  8. }
  9. </style>


Code :
  1. <body>
  2.   <div>
  3.     <h1>titre 1</h1>
  4.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  5.     <h1>titre 2</h1>
  6.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  7.     <h1>titre 3</h1>
  8.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  9.     <p>blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla blablabla bla blabla bla</p>
  10.   </div>
  11. </body>



 

Citation :

Ça fonctionne, merci.
Je vais rajouter du texte, pour voir ce qui se passe, au niveau des colonnes.
Avec le texte édité, il y a 3 colonnes, réparties sur toute la largeur de l'écran. C'est parfait.
Je te mettrai le code.


 

Message cité 1 fois
n°2413865
MaybeEijOr​Not
but someone at least
Posté le 02-04-2022 à 20:37:50  profilanswer
 

Euh si tu es strictement resté sur mon exemple tu devrais plutôt avoir 4 colonnes.  

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413871
Harmo88
Il n\\
Posté le 02-04-2022 à 21:27:49  profilanswer
 

Harmo88 a écrit :


 
[quotemsg] Ça fonctionne, merci.
Je vais rajouter du texte, pour voir ce qui se passe, au niveau des colonnes.
Avec le texte édité, il y a 3 colonnes, réparties sur toute la largeur de l'écran. C'est parfait.
Je te mettrai le code.
 
 
<!DOCTYPE html>
<html lang="fr">
 
 
<head>
  <meta charset="utf-8"/>
  <title>colonne-div.html</title>
  <link rel="stylesheet" type="text/css" href="" />  
   
<style>
 
#colonnes3 {
 padding: 10px;
 border: 2px solid #ef3422;
 color: #3641ec;
}
 
div {
  columns: auto 24vw;
  column-rule: solid 1px #ef3422;
}
 
#colonnes3 p, #colonnes3 h4 {
 margin: 0px;
}  
   
</style>  
   
</head>
 
<body>
 
<div id="colonnes3">
<h4>INTRODUCTION</h4>
<p>La fonction du STIM-PRO + est de traiter/soulager la douleur
grâce à une opèration nommée TENS et de stimuler les muscles grâce  
grâce à une opèration nommée EMS. L'appareil est utilisé et exploité  
par le patient lui-même.</p>
<br>
 
<h4>Qu'est-ce que la TENS ?</h4>
 
<p>La stimulation nerveuse électrique transcutanée (TENS)est une variante  
douce du traitement de la douleur par stimulation électrique. L'appareil
TENS envoie des impulsions agréables à travers la peau et stimulent les nerfs
situés dans la zone de traitement. La sensation de douleur de l'utilisateur est,
dans de nombreux cas, réduite ou éliminée. Le soulagement de la douleur varie
en fonction du patient, de la thérapie choisie, et du type de douleur. Chez de  
nombreux patients, la réduction ou l'élimination de la douleur dure plus longtemps
que le temps de stimulation en lui-même (parfois, trois à quatre fois plus longtemps).
Pour certains patients,la douleur n'est soulagée que le temps de la séance de stimulation.</p>
<br>
 
<h4> Principe de fonctionnement de la TENS</h4>
 
<p>La stimulation transcutanée des nerfs est une méthode non invasive et sans médicament
pour traiter la douleur. La TENS utilise de minuscules impulsions électriques envoyées
par la peau aux nerfs pour modifier la perception suggestive de la douleur.
La TENS ne guérit pas un problème physiologique, mais aide seulement à contrôler la douleur.
La TENS ne fonctionne pas pour tout le monde mais elle aide la plupart des patients
à réduire ou à éliminer la douleur.</p>
<br>
 
<h4>Qu'est-ce que l'EMS ?</h4>
 
<p>La stimulation musculaire électrique est un traitement reconnu et utilisé dans le monde entier
pour soulager les lèsions musculaires. L'EMS est également utilisé avec succés depuis
plusieurs années, dans le domaine sportif pour la régénération et le développement musculaire.</p>
<br>
 
<h4>Principe de fonctionnement de l'EMS</h4>
 
<p>Normalement, un muscle reçoit un ordre du cerveau, qui le fait fonctionner. Avec l'EMS, la
stimulation artificielle du muscle se fait grâce à l'utilisation d'impulsions électriques pour
stimuler les muscles sous la peau. Le muscle ne sait pas faire la différence entre une impulsion
de l'extérieur ou du cerveau. De ce fait, il réagit de manière normale en se contractant, et est  
ainsi entraîné passivement. Lorsque l'impulsion diminue, le muscle se détend et le cycle de stimulation,
contraction et relaxation recommence.</p>
 <br>
 
<h4>Indications TENS et EMS</h4>
 
<p>La TENS permet de soulager les douleurs engendrées par divers types de maladies et d'affections.
Elle est le plus souvent utilisée pour traiter les douleurs musculaires, articulaires ou osseuses
associées à des affections telles que l'arthrose ou la fibromalgie, ainsi que les maux de dos, les  
douleurs cervicales, les tendinites ou les bursites. La TENS est utilisée pour traiter la douleur soudaine
(aigüe) et la douleur permanente (chronique) de longue durée.
<br>
 
<p>L'EMS est largement utilisée dans les hopitaux et les cliniques sportives pour le traitement des blessures
musculaires et la rééducation des muscles paralysés afin de prévenir l'atrophie des muscles touchés et  
d'améliorer la force musculaire, ainsi que la circulation sanguine. Elle est utilisée pour : soulager les crampes
musculaires, prévenir ou retarder l'atrophie musculaire, améliorer localement la circulation sanguine,
la régénèration musculaire, la stimulation post opèratoire immédiate des muscles du mollet pour
prévenir la trombose veineuse, maintenir ou augmenter la mobilité.</p>
<br>
 
<h4>NOTE IMPORTANTE</h4>
 
<p>Lisez le mode d'emploi avant d'utiliser l'appareil. Veillez à respecter tous les avertissements et
consignes de sécurité figurants dans ce manuel. Le non-respect de ces instructions peut causer des
dommages à l'utilisateur ou à l'appareil.</p>
<br>
 
<h4>EFFETS SECONDAIRES</h4>
<h4>TENS</h4>
 
<p>Les effets secondaires des appareils TENS sont généralement légers, même en cas d'utilisation prolongée.
En cas d'effet indésirable, un médecin peut évaluer la poursuite ou non de l'appareil.
<br>
Une peau irritée ou de légéres brûlures sont des effets secondaires possibles. Si cela se produit, cessez
immédiatement l'utilisation et consultez votre médecin. </p>
 
<h4>EMS</h4>
 
<p>Les effets secondaires de l'EMS sont généralement très légers. Après un séance EMS, une sensibilité musculaire
accrue se produira pendant une journée si les musclesétaient déjà enflammés au moment de l'application. Une
rougeur et une irritation de la peau peuvent également survenir. Les utilisateurs de dispositifs médicaux
implantés et les femmes enceintes doivent éviter ce type d'application.</p>
<br>
<p>Une peau irritée ou de légéres brûlures sont des effets secondaires possibles. Si cela se produit, cessez
immédiatement l'utilisation, et consultez votre médecin.</p>
<br>
<h4>CONSIGNES DE SECURITE ET CONTRE-INDICATIONS</h4>
<h4>TENS</h4>
<p>N'utilisez que les accessoires d'origine du fabricant pour votre appareil.<br></p>
Consultez un médecin avant d'utiliser cet appareil pour des symptômes de douleurs non diagnostiqués.
Les patients porteur d'un dispositif électronique implanté, tel qu'un stimulateur cardiaque ou d'un
défibrillateur, ou d'un implant métallique ou électronique, ne doivent pas être traités par TENS
sans consulter un médecin au préalable.<br>
La stimulation de cet appareil peut être suffisante pour provoquer un choc électrique. Un courant
électrique de cette intensité ne doit pas traverser le thorax ou la poitrine car il peut provoquer  
une arytmie cardiaque.<b>Ne placez pas d'électrodes sur le coeur !</b><br>
<p>Ne placez pas d'électrodes sur le devant de la gorge, car cela peut provoquer des crampes des muscles
laryngés et pharyngés. La stimulation au-dessus de la cavité de la gorge (zone du cou) peut fermer
les voies respiratoires, rendre la respiration difficile et avoir un effet négatif sur le rhytme  
cardiaque ou la tension artérielle.<br></p>
<p>Ne placez pas d'électrodes sur votre tête ou aux endroits où le courant électrique peut circuler
de manière transcérébrale (à travers votre tête).</p><br>
<p>Cet appareil ne doit pas être utilisé pendant la conduite; l'utilisation près de machines,près de l'eau
ou dans toute activité où des contractions musculaires involontaires peuvent exposer l'utilisateur
à un risque excessif de blessure.</p><br>
<p>Toujours éteindre l'appareil avant de fixer ou de retirer les accessoires TENS sur la peau.</p><br>
<p>De légères irritations cutanées peuvent survenir à l'endroit où sont placées les électrodes après
une utilisation prolongée.Dans ce cas, cessez l'utilisation et consultez votre médecin si l'irritation  
ne disparait pas. </p><br>
<p>Si le traitement TENS est inéfficace ou devient inconfortable, la stimulation doit être interrompue
jusqu'à ce que son utilisation soit réèvaluée par un médecin.</p><br>
<p>Conservez cet appareil hors de portée des enfants.</p><br>
<p>Les appareils ne disposent pas de protection AP/APG. Ne pas utiliser en présence d'une atmosphère explosive
et d'un mélange combustible.</p><br>
<p>Les électrodes ne doivent être collées que sur une peau saine et non lésée.</p><br>
 
<h4>EMS</h4>
 
<p>N'utilisez que les accessoires d'origine du fabricant pour votre appareil.</p><br>
<p>L'innocuité des stimulateurs musculaires électriques destinés à être utilisés  pendant la grossesse
n'est pas prouvée.</p><br>
<p>Les patients soupçonnés d'avoir des problèmes cardiaques ou qui ont été diagnostiqués doivent être prudents
et l'utilisation de l'EMS doit d'abord être discutée avec un médecin.</p><br>
<p>Ceci s'applique aussi aux patients dont l'épilepsie est suspectée ou diagnostiquée.</p><br>
<p>La prudence est de mise dans les cas suivants:</p><br>
<p>- En cas de tendance aux saignements après un traumatisme aigu ou une fracture</p><br>
<p>- Après des interventions chirurgicales récentes au cours desquelles:</p><br>
<p>- La contration musculaire interfére avec le processusde guérison.</p><br>
<p>- Stimulation près de l'utérus pendant les menstruations et la grossesse.</p><br>
<p>- Sur les zones du corps dont la sensibilité est limitée.</p><br>
<p>Certains patients peuvent présenter une irritation ou une hypersensibilité cutanée due à la stimulation
électrique ou au milieu électriquement conducteur. L'irritation peut généralement être réduite en utilisant
un autre milieu conducteur pour les peaux sensibles ou un autre placement des électrodes.</p><br>
<p>Le placement des électrodes et les réglages de stimulation doivent être basés sur des conseils médicaux.</p><br>
<p>Les puissants stimulateurs musculaires doivent être tenus hors de portée des enfants.</p><br>
<p>Cet appareil ne doit pas être utilisé pendant la conduite, l'utilisation près de l'eau ou dans les
activités où des contractions musculaires ou involontaires peuvent exposer l'utilisateur à un  
risque excessif de blessures.</p>
 
</div>
 
</body>
</html>
 
Merci encore, grâce à toi c'est nickel  :jap:

n°2413872
Harmo88
Il n\\
Posté le 02-04-2022 à 21:30:53  profilanswer
 

MaybeEijOrNot a écrit :

Euh si tu es strictement resté sur mon exemple tu devrais plutôt avoir 4 colonnes.  

 
Citation :

Euh .... ben ...... je suis passé au raccourci ???
Pas grave, ça me plait bien comme ça; mais je vais quand même regarder ce que j'ai fabriqué  :lol:
C'est peut être le bla bla qui m'a dérouté ...

Message cité 1 fois
Message édité par Harmo88 le 02-04-2022 à 21:31:57
n°2413891
Harmo88
Il n\\
Posté le 03-04-2022 à 10:53:39  profilanswer
 

Harmo88 a écrit :


 
[quotemsg] Euh .... ben ...... je suis passé au raccourci ???
Pas grave, ça me plait bien comme ça; mais je vais quand même regarder ce que j'ai fabriqué  :lol:  
C'est peut être le bla bla qui m'a dérouté ...


 
[quotemsg] :hello: Je voudrais créer la même fenêtre (avec un texte différent) à la suite de la première( et probablement une 3e, voir une 4e).
J'ai rajouté avec #colonnes3, #colonnes4; j'obtiens bien une 2e fenêtre. Le problème est que cette 2e fenêtre s'encastre dans la dernière colonne de la première fenêtre.
Comment faire pour que cette 2e fenêtre se place à la suite de la 1e ?
 
Pour passer d'une fenêtre à l'autre, je pourrais utiliser des ancres, enfin, je pense.
 
Le code :
<style>
 
#colonnes3, #colonnes4 {
 padding: 10px;
 border: 2px solid #ef3422;
 color: #3641ec;
}
 
div {
  columns: auto 24vw;
  column-rule: solid 1px #ef3422;
}
 
#colonnes3 p, #colonnes4 p, #colonnes3 h4, #colonnes4 h4 {
 margin: 0px;
}  
   
</style>  
 
<body>
<div id="colonnes3">
<h4>INTRODUCTION</h4>
<p>La fonction du STIM-PRO + est de traiter/soulager la douleur
grâce à une opération nommée TENS et de stimuler les muscles
grâce à une opération nommée EMS. L'appareil est utilisé et exploité  
par le patient lui-même.</p>
 
 
<div id="colonnes4">
<h4>NOTES D'AVERTISSEMENT</h4>
<p>L'appareil ne doit être utilisé qu'après avis médical.</p>
</div>
</body>
 
Le but est de recopier la notice d'un électro-stimulateur; au lieu d'utiliser la notice sur papier, je préfère mettre le contenu dans un fichier HTML, et ranger le bouquin qui ne "traînera" plus sur le bureau.


Message édité par Harmo88 le 03-04-2022 à 10:59:23
n°2413893
MaybeEijOr​Not
but someone at least
Posté le 03-04-2022 à 11:16:16  profilanswer
 

Je n'ai pas eu le temps de tout regarder, juste pour ton dernier message, il faut revenir aux bases.
Si tes divisions (évite le mot fenêtre qui a une autre signification) s'encastrent c'est parce que dans le code tu les as imbriquées. Il faut fermer ta balise div avant d'en ouvrir une autre. ;)

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2413932
Harmo88
Il n\\
Posté le 03-04-2022 à 19:00:19  profilanswer
 

MaybeEijOrNot a écrit :

Je n'ai pas eu le temps de tout regarder, juste pour ton dernier message, il faut revenir aux bases.
Si tes divisions (évite le mot fenêtre qui a une autre signification) s'encastrent c'est parce que dans le code tu les as imbriquées. Il faut fermer ta balise div avant d'en ouvrir une autre. ;)


 

Citation :

Ha !!! Ben, celle-là, fallait pas la louper .......... hé ben ..... je l'ai loupée  :lol:  :D Le petit rien qui fait que ça ne fonctionne pas.
Vraiment une erreur de débutant  :( Je l'avais pourtant placée (plutôt l'éditeur); j'ai du l'effacer par mégarde en modifiant du texte ...
Je vais essayer de ne pas la refaire ...  :hello:

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3  4  5  6  ..  16  17  18  19  20  21
Page Suivante
Page Précédente
Haut de page 

Aller à :
Ajouter une réponse
 

Sujets relatifs
Signature e-mail en HTML adaptative mode clair/sombre ?Exercice html, php, mysql, javascript
hébergement de page htmlresponsive scroll pas quand je glisse l'image
Probleme d'edition d'image dans DjangoEnvoi image sur blog impossible
Aligner le background au milieu de l'imageun problème de lien php dans le html
Affichage d'une image en infobulle au survol d'un lien (hover)HTML Select et OnClick() ne fonctionne pas sur Safari
Plus de sujets relatifs à : Insertion image en html depuis mon ordi

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.160 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR