Insertion image en html depuis mon ordi

Recherche :

Mot : Pseudo : Filtrer Aller à la page :
Page : 1 2 3 4 5 .. 14 15 16 17 18 19 20 21 Page Suivante Page Précédente Bas de page
Auteur	Sujet : Insertion image en html depuis mon ordi

Harmo88

Il n\\

Reprise du message précédent :

Citation :

Ca commence à devenir intéressant.
https://jsfiddle.net/c4d6b5zk/

Publicité

Harmo88

Il n\\

Citation :

https://jsfiddle.net/uxzm3de5/

Harmo88

Il n\\

Citation :

Ajout d'infobulle; je me suis contenté de copier le code sur un site, et de l'arranger à ma sauce. Il y aura une erreur 404, vu que les fichiers correspondant au menu ne sont pas chargés. Ils sont créés.
https://jsfiddle.net/fs5c3906/

Harmo88

Il n\\

Citation :

https://jsfiddle.net/53g6aj4L/

MaybeEijOrNot

but someone at least

Pas bien compris le dernier. Mais bon il faut retenir qu'il faut éviter les ascenseurs horizontaux, c'est très chiant pour l'utilisateur. L'ascenseur vertical doit être généré par le navigateur pour l'ensemble de la page et non pour un élément en particulier. Évidemment sauf cas très particuliers.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Citation :

Tu as raison, mais c'est l'exercice qui est formulé ainsi ... et encore, j'améliore le code pour réviser mes acquis et obtenir un affichage amélioré.
Je fais un retour arrière pour apprendre d'autres éléments survolés un peu rapidement, pour le code du site, mais qui n'étaient pas restés en mémoire.

Un autre exercice, différent, je pense qu'il peut être utile; là aussi j'ai modifié l'ordre des paragraphes, pour un affichage plus logique.
En gros, on ne met pas les salutations, avant l'entête ... Dans le fond, c'est "bien" qu'il y ait des erreurs, ça m'oblige à réfléchir, pour les rectifier. C'est parfois chiant ... il faut faire avec.
https://jsfiddle.net/oqmL812j/
:hello:

Harmo88

Il n\\

Citation :

https://jsfiddle.net/df09654o/
La gestion des marges des enfants est géniale, un peu compliquée pour obtenir le résultat escompté. Avec un peu de pratique ça ira. J'ai trouvé pourquoi je n'arrive pas toujours à me connecter; avec Google, il y a un bug ... Avec Firefox, qui effectue ses recherches avec Google(???), je peux me connecter. Les mystères de l'informatique ...

Harmo88

Il n\\

Citation :

CSS3 structural pseudo-class selector tester
https://lea.verou.me/demos/nth.html

Un autre : https://css-tricks.com/examples/nth-child-tester/

Un générateur:
http://css3generator.com

Message édité par Harmo88 le 25-12-2022 à 11:19:32

Harmo88

Il n\\

Citation :

scroll horizontal et vertical.
https://jsfiddle.net/smpvoefu/

Harmo88

Il n\\

Citation :

Un dégradé simple.
https://jsfiddle.net/7jresoqg/
Un autre
https://jsfiddle.net/7jresoqg/1/
Et un p'tit dernier pour la route
https://jsfiddle.net/4e6583f7/

Message édité par Harmo88 le 26-12-2022 à 10:30:27

Publicité

Harmo88

Il n\\

Citation :

Les arrière-plans multiples:
https://jsfiddle.net/jh20cpks/

Message édité par Harmo88 le 26-12-2022 à 13:32:17

Harmo88

Il n\\

Citation :

En application des dégradés, j'ai modifié la page d'accueil du site. Ça flash !
https://hfervolhelico-rc.pagesperso-orange.fr

MaybeEijOrNot

but someone at least

Je n'ai pas eu le temps de tout voir, mais mollo sur les couleurs. [:tinostar]

Tu m'excuseras, j'ai simplement parcouru le lien rapidement donc je ne sais pas si c'est tip top, mais vu d'où tu pars ça ne peut pas faire de mal. :whistle:

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Citation :

C'est bien toi qui voulais un site moderne ... tu l'as :lol: :bounce: pour un site de modélisme, en 2022, on peut se livrer à quelques fantaisies.
Tu sais, je ne me fais pas d'illusion, ce site tombera dans l'oubli, il arrive 20 ans trop tard. Le drone a détrôné l'hélico(difficile à piloter, trop peu de modélistes réussissent), et tombera aussi dans les oubliettes(au niveau grand-public)
vu la conjoncture actuelle ... Je suis tout de même content d'avoir créé ce site, et d'avoir réussi à exécuter de l'acrobatie avec un modèle, alors que, vu mon âge(65 ans à l'époque) tout le monde se moquait de moi :
- Tu n'y arriveras jamais, tu es trop vieux ... :lol:
Mais le vieux a réussi. :bounce: on a l'âge de sa tête ...
:hello:

MaybeEijOrNot

but someone at least

C'est juste pour te faire prendre conscience que dans le web il y a certes la partie programmation, mais pas que ! Il y a plein d'autres aspects sympas sur lesquels on peu travailler et c'est complémentaire. Donc quand tu en as un peu marre d'écrire des lignes tu peux regarder toutes les notions de design dans le sens noble du terme : fonctionnaliser par l'aspect.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Citation :

Je suis bien conscient que si je progresse, doucement, je suis encore loin d'exploiter toutes les possibilités du codage.
A moins de pratiquer comme un pro, tous les jours, il est quasiment impossible de mémoriser toutes ces possibilités tellement elles sont nombreuses.
L'important, à mon niveau, c'est de trouver un certain plaisir à découvrir de nouvelles possibilités et à essayer de les comprendre; y'a encore du boulot. :lol:

Harmo88

Il n\\

Citation :

Après adaptation pour la dimension de mes photos(plein écran) et quelques modifs, un slider simple, mais qui fonctionne bien. Un meeting aérien avec MIG21, F16, Mirage 2000, Rafale ... qu'on ne voit pas, elles sont en local. Je voudrais le passer en scroll par les flèches droite et gauche; cliquer sur un lien à chaque photo est barbant. Ou à la rigueur le passer en auto ...
Je poste juste le code, sur jsfiddle, rien ne s'affiche, juste les liens.

Code :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Slider 5</title>
<link rel="stylesheet" type="text/css" href="">
<style>
html{
scroll-padding-top: 53rem; /* pour le saut de page, à ajuster selon les besoins */
}
*{box-sizing: border-box }
.slider-scroll {
width: auto;
max-width: 90%;
max-height: auto;
margin: 2rem auto;
display: flex;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.slider-scroll img {
scroll-snap-align: center;
min-width: 100%;
border-radius: 5px;
}
.ancre {
margin: 1rem auto;
display: flex;
justify-content: center;
}
.ancre li{
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background: #404040;
border-radius: 50%;
}
.ancre li a{color:yellow}
.ancre li: not(:last-child){
margin-right: 15px;
}
.ancre li a:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class=slider-scroll>
<img id="slide-scroll1" src="Images/HUB_7443R.jpg" alt>
<img id="slide-scroll2" src="Images/HUB_7446R.jpg" alt>
<img id="slide-scroll3" src="Images/HUB_7491R.jpg" alt>
<img id="slide-scroll4" src="Images/HUB_7492R.jpg" alt>
<img id="slide-scroll5" src="Images/HUB_7508R.jpg" alt>
<img id="slide-scroll6" src="Images/HUB_7512R.jpg" alt>
<img id="slide-scroll7" src="Images/HUB_7520R.jpg" alt>
<img id="slide-scroll8" src="Images/HUB_7526R.jpg" alt>
<img id="slide-scroll9" src="Images/HUB_7555R.jpg" alt>
<img id="slide-scroll10" src="Images/HUB_7604R.jpg" alt>
<img id="slide-scroll11" src="Images/HUB_7612R.jpg" alt>
<img id="slide-scroll12" src="Images/HUB_7626R.jpg" alt>
<img id="slide-scroll13" src="Images/HUB_7627R.jpg" alt>
<img id="slide-scroll14" src="Images/HUB_7652R.jpg" alt>
<img id="slide-scroll15" src="Images/HUB_7653R.jpg" alt>
<img id="slide-scroll16" src="Images/HUB_7656R.jpg" alt>
<img id="slide-scroll17" src="Images/HUB_7682R.jpg" alt>
<img id="slide-scroll18" src="Images/HUB_7682R1.jpg" alt>
<img id="slide-scroll19" src="Images/HUB_7686R.jpg" alt>
<img id="slide-scroll20" src="Images/HUB_7688R.jpg" alt>
<img id="slide-scroll21" src="Images/HUB_7708R.jpg" alt>
<img id="slide-scroll22" src="Images/HUB_7719R.jpg" alt>
<img id="slide-scroll23" src="Images/HUB_7737R.jpg" alt>
<img id="slide-scroll24" src="Images/HUB_7746R.jpg" alt>
<img id="slide-scroll25" src="Images/HUB_7766R.jpg" alt>
<img id="slide-scroll26" src="Images/HUB_7768R.jpg" alt>
<img id="slide-scroll27" src="Images/HUB_7770R.jpg" alt>
<img id="slide-scroll28" src="Images/HUB_7789R.jpg" alt>
<img id="slide-scroll29" src="Images/HUB_7795R.jpg" alt>
<img id="slide-scroll30" src="Images/HUB_7800R.jpg" alt>
<img id="slide-scroll31" src="Images/HUB_7820R.jpg" alt>
<img id="slide-scroll32" src="Images/HUB_7832R.jpg" alt>
<img id="slide-scroll33" src="Images/HUB_7839R.jpg" alt>
<img id="slide-scroll34" src="Images/HUB_7847R.jpg" alt>
<img id="slide-scroll35" src="Images/HUB_7852R.jpg" alt>
<img id="slide-scroll36" src="Images/HUB_7855R.jpg" alt>
<img id="slide-scroll37" src="Images/HUB_7859R.jpg" alt>
<img id="slide-scroll38" src="Images/HUB_7864R.jpg" alt>
<img id="slide-scroll39" src="Images/HUB_7872R.jpg" alt>
<img id="slide-scroll40" src="Images/HUB_7876R.jpg" alt>
<img id="slide-scroll41" src="Images/HUB_7882R.jpg" alt>
<img id="slide-scroll42" src="Images/HUB_7887R.jpg" alt>
<img id="slide-scroll43" src="Images/HUB_7897R.jpg" alt>
<img id="slide-scroll44" src="Images/HUB_7904R.jpg" alt>
<img id="slide-scroll45" src="Images/HUB_7913R.jpg" alt>
<img id="slide-scroll46" src="Images/HUB_7919R.jpg" alt>
<img id="slide-scroll47" src="Images/HUB_7924R.jpg" alt>
<img id="slide-scroll48" src="Images/HUB_7927R.jpg" alt>
<img id="slide-scroll49" src="Images/HUB_7929R.jpg" alt>
<img id="slide-scroll50" src="Images/HUB_7945R.jpg" alt>
<img id="slide-scroll51" src="Images/HUB_7956R.jpg" alt>
<img id="slide-scroll52" src="Images/HUB_7962R.jpg" alt>
<img id="slide-scroll53" src="Images/HUB_7966R.jpg" alt>
</div>
<ul class="ancre">
<li><a href="#slide-scroll1">1</a></li>
<li><a href="#slide-scroll2">2</a></li>
<li><a href="#slide-scroll3">3</a></li>
<li><a href="#slide-scroll4">4</a></li>
<li><a href="#slide-scroll5">5</a></li>
<li><a href="#slide-scroll6">6</a></li>
<li><a href="#slide-scroll7">7</a></li>
<li><a href="#slide-scroll8">8</a></li>
<li><a href="#slide-scroll9">9</a></li>
<li><a href="#slide-scroll10">10</a></li>
<li><a href="#slide-scroll11">11</a></li>
<li><a href="#slide-scroll12">12</a></li>
<li><a href="#slide-scroll13">13</a></li>
<li><a href="#slide-scroll14">14</a></li>
<li><a href="#slide-scroll15">15</a></li>
<li><a href="#slide-scroll16">16</a></li>
<li><a href="#slide-scroll17">17</a></li>
<li><a href="#slide-scroll18">18</a></li>
<li><a href="#slide-scroll19">19</a></li>
<li><a href="#slide-scroll20">20</a></li>
<li><a href="#slide-scroll21">21</a></li>
<li><a href="#slide-scroll22">22</a></li>
<li><a href="#slide-scroll23">23</a></li>
<li><a href="#slide-scroll24">24</a></li>
<li><a href="#slide-scroll25">25</a></li>
<li><a href="#slide-scroll26">26</a></li>
<li><a href="#slide-scroll27">27</a></li>
<li><a href="#slide-scroll28">28</a></li>
<li><a href="#slide-scroll29">29</a></li>
<li><a href="#slide-scroll30">30</a></li>
<li><a href="#slide-scroll31">31</a></li>
<li><a href="#slide-scroll32">32</a></li>
<li><a href="#slide-scroll33">33</a></li>
<li><a href="#slide-scroll34">34</a></li>
<li><a href="#slide-scroll35">35</a></li>
<li><a href="#slide-scroll36">36</a></li>
<li><a href="#slide-scroll37">37</a></li>
<li><a href="#slide-scroll38">38</a></li>
<li><a href="#slide-scroll39">39</a></li>
<li><a href="#slide-scroll40">40</a></li>
<li><a href="#slide-scroll41">41</a></li>
<li><a href="#slide-scroll42">42</a></li>
<li><a href="#slide-scroll43">43</a></li>
<li><a href="#slide-scroll44">44</a></li>
<li><a href="#slide-scroll45">45</a></li>
<li><a href="#slide-scroll46">46</a></li>
<li><a href="#slide-scroll47">47</a></li>
<li><a href="#slide-scroll48">48</a></li>
<li><a href="#slide-scroll49">49</a></li>
<li><a href="#slide-scroll50">50</a></li>
<li><a href="#slide-scroll51">51</a></li>
<li><a href="#slide-scroll52">52</a></li>
<li><a href="#slide-scroll53">53</a></li>
</ul>
</body>
</html>

Harmo88

Il n\\

Citation :

Un autre automatisé, qui fonctionne bien pour 5 photos ... Je ne trouve pas ce qui détermine le nombre de photos à afficher ... si quelqu'un maîtrise bien le slider, qu'il soit le bienvenu. En attendant, je continue mes investigations.
https://jsfiddle.net/Lr1jp4en/

yann39

⛅⏰♫♪☹☕

Oui c'est normal, ton animation est faire pour 5 images, en gros tu affiches les images redimensionnées à 20%, puis l'animation fait des translations de 20% jusqu'à 100% sur 12 secondes, avant de repartir à 0.

Message cité 1 fois

---------------
Topic achats/ventes | Feed-back | Worklog

Harmo88

Il n\\

yann39 a écrit :

[quotemsg]J'avoue ne pas bien comprendre comment ça fonctionne ... Je ne vois pas du tout comment faire pour afficher 53 photos, avec cette façon de procéder.
Si je comprends bien, il faut 20% / photo, pour 53 cela fait 1060% ??? Qu'il faut répartir comment ?
Il faut que je consulte des tutos sur le sujet, pour aller plus loin.
Merci pour ta réponse.

MaybeEijOrNot

but someone at least

Non il faut : 100 % / nombre de photos.

Cette technique sera très chiante pour afficher autant de photos. Mieux vaut en trouver une autre.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Non il faut : 100 % / nombre de photos.

Cette technique sera très chiante pour afficher autant de photos. Mieux vaut en trouver une autre.

Citation :

J'ai raisonné par l' absurde ... Je crois que tu as raison, je vais essayer de placer des flèches droite et gauche sur celui dont j'ai affiché le code. Cliquer sur des puces(liens) pour faire défiler les photos n'est pas
super génial. Sinon, j'en ai vu un très bien fait, avec du HTML, CSS, Java, et je ne sais plus quoi ... un peu compliqué à comprendre, de ce fait; tu peux afficher un grand nombre de photos. Le gars qui anime le tuto(pour débutants)
est trop rapide(pour des débutants), on est obligé de stopper le tuto pour suivre ... je vais quand même m'y intéresser.
Il y en a d'autres mais quand tu copies le code, une formation t'est proposée, ou un paiement; c'est de bonne guerre.

MaybeEijOrNot

but someone at least

Sur le premier code, tu ne pourras pas utiliser les flèches avec uniquement HTML/CSS. Tu peux essayer de comprendre comment il fonctionne, c'est intéressant et ingénieux.

Pour le dernier que tu as trouvé, c'est HTML/CSS et Javascript (ne pas confondre avec Java ça n'a rien à voir).
Avec le Javascript tu ouvres en effet plein de nouvelles possibilités. Néanmoins toujours garder en tête que c'est plus propre de faire un maximum de choses en CSS quand tu peux. Avec Javascript tu vas vraiment commencer à rentrer dans la programmation.

Message cité 1 fois
Message édité par MaybeEijOrNot le 07-01-2023 à 12:35:13

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

yann39

⛅⏰♫♪☹☕

Tu peux simplifier ton code.

Une solution plus simple qui fait la même chose serait de laisser les images à 100%, et de les déplacer de 100% à chaque fois.
(par contre évidemment tu devras toujours diviser ton animation en autant d'étapes que d'images).

Exemple :

HTML :

Code :

<div class="slider">
  <ul>
    <li>
      <img src="https://www.guyom-design.com/blog/images/1.jpg" alt="img1">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/2.jpg" alt="img2">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/3.jpg" alt="img3">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/4.jpg" alt="img4">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/5.jpg" alt="img5">
    </li>
  </ul>
</div>

CSS :

Code :

.slider {
  overflow: hidden;
}
 
.slider ul {
  animation: animation_slide 20s infinite;
  display: flex;
  margin: 0;
  padding: 0;
  width: 500%;
}
 
.slider li {
  list-style: none;
}
 
.slider img {
  width: 100%;
}
 
@keyframes animation_slide {
  0%, 10% { margin-left: 0; }
  20%, 30% { margin-left: -100%; }
  40%, 50% { margin-left: -200%; }
  60%, 70% { margin-left: -300%; }
  80%, 90% { margin-left: -400%; }
}

https://jsfiddle.net/sa6L4vb0/

En gros :
- tes 5 images sont placées côte à côte dans un conteneur qui fait 500% de large (5 * 100%)
- seul 100% est affiché par défaut (donc la première image), les autres 400% sont invisibles (cachés par l'overflow hidden)
- puis @keyframes te permet de définir les étapes de ton animation (appliquée à ton conteneur), ici de 0 à 10% d'avancement de l'animation, tu conserves ton margin-left de 0px (donc affichage de ta première image), de 10% à 20% rien ne se passe, de 20% à 30% tu appliques un margin-left de -100% (ce qui va venir afficher la 2ème image), et ainsi de suite.

Si tu n'as pas un nombre d'images fixé à l'avance, ou si tu as trop d'images, alors ce n'est pas forcément optimal et il y a d'autres solutions.
Ce n'est pas forcément une bonne pratique aussi de mettre 50 images dans un slider

Message cité 1 fois
Message édité par yann39 le 07-01-2023 à 12:43:47

---------------
Topic achats/ventes | Feed-back | Worklog

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Sur le premier code, tu ne pourras pas utiliser les flèches avec uniquement HTML/CSS. Tu peux essayer de comprendre comment il fonctionne, c'est intéressant et ingénieux.

Pour le dernier que tu as trouvé, c'est HTML/CSS et Javascript (ne pas confondre avec Java ça n'a rien à voir).
Avec le Javascript tu ouvres en effet plein de nouvelles possibilités. Néanmoins toujours garder en tête que c'est plus propre de faire un maximum de choses en CSS quand tu peux. Avec Javascript tu vas vraiment commencer à rentrer dans la programmation.

Citation :

Pour l'instant, je décortique différents essais pour comprendre comment ça fonctionne; d'un auteur à l'autre ça varie(normal, chacun selon son niveau).
Le javascript me remet en mémoire les boucles, les conditions, les variables, que je maîtrisais il y a un an ou deux :lol: (40 ans) autant te dire qu'il en reste .... quelques vapeurs ... Je me rends compte que ma logique s'est émoussée, j'ai besoin de plus de temps pour assimiler(je ne vais pas m'en plaindre, certains de mon âge ont des problèmes bien plus graves ...).
C'est vrai que c'est intéressant à chercher à comprendre; je ne conçois pas d'appliquer sans comprendre, ça ne sert à rien.

https://jsfiddle.net/kuegoxht/
Celui-là est assez génial, mais il faut suivre l'auteur dans son tuto :lol: il débite(forcément, vu son niveau, il ne va pas s'attarder. Il donne beaucoup d'explications à chaque ligne.
Les flèches sont un peu grosses, à mon goût(23 mm de diamètre), je vais les réduire.
sur Firefox, j'ai un ascenseur horizontal et vertical, léger, mais à corriger. Sinon les 50 images défilent bien; pas de saccade.

Message cité 1 fois

Harmo88

Il n\\

yann39 a écrit :

Code :

<div class="slider">
  <ul>
    <li>
      <img src="https://www.guyom-design.com/blog/images/1.jpg" alt="img1">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/2.jpg" alt="img2">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/3.jpg" alt="img3">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/4.jpg" alt="img4">
    </li>
    <li>
      <img src="https://www.guyom-design.com/blog/images/5.jpg" alt="img5">
    </li>
  </ul>
</div>

CSS :

Code :

.slider {
  overflow: hidden;
}
 
.slider ul {
  animation: animation_slide 20s infinite;
  display: flex;
  margin: 0;
  padding: 0;
  width: 500%;
}
 
.slider li {
  list-style: none;
}
 
.slider img {
  width: 100%;
}
 
@keyframes animation_slide {
  0%, 10% { margin-left: 0; }
  20%, 30% { margin-left: -100%; }
  40%, 50% { margin-left: -200%; }
  60%, 70% { margin-left: -300%; }
  80%, 90% { margin-left: -400%; }
}

[quotemsg]Je vais te faire ça à la Coluche : Quuuooooiii, trois images dans un slider ...... y va pas l'mec :lol: :lol: Je plaisante. Sinon, c'était Power Point, mais il n'affiche pas les photos en plein écran(il date de 2007 ...).
Je dirais plutôt qu'apprendre tout ça après 40 ans bien tassés, n'est pas conseillé :lol:
En tout cas, ton explication est la bienvenue; en regardant les éléments, les attributs, les valeurs, "morceau" par "morceau" on ne comprend pas forcément bien comment ça fonctionne. Les explications données sont parfois trop succinctes,
ou trop développées et on s'y perd un peu.
Jouer avec des pixels, des em, des %, et j'en passe ... est un peu perturbant lorsqu'on n'est pas habitué; j'étais habitué au mm, 1/100 de mm, voir micron, ça "parlait" plus, question d'habitude.
Je vais regarder ton code, je vais apprendre quelque chose, c'est sûr.
En fait c'est un peu comme travailler avec des calques superposés, on active ou désactive une photo pour la faire apparaitre, et on la fait défiler pour passer à une autre; ça parait assez simple, encore faut-il trouver les bonnes instructions.
Merci à vous pour le temps que vous m'accordez, c'est sympa.[quotemsg]

MaybeEijOrNot

but someone at least

Harmo88 a écrit :

C'est vrai que c'est intéressant à chercher à comprendre; je ne conçois pas d'appliquer sans comprendre, ça ne sert à rien.

Pour analyser le premier, il faut se rappeler que le CSS n'est que de la mise en forme alors que la sémantique est portée par le HTML. Il faut donc commencer par visualiser le code HTML, pour cela rien de plus simple il suffit de supprimer le CSS. Tu vas alors comprendre à quoi servent les ancres. Ensuite tu peux remettre le CSS qui attrait aux ancres, pour te rendre compte que tout le schmilblick se cache dans le slider-scroll, et si tu connais la propriété "overflow" tu commences à comprendre l'arnaque, et enfin avec "scroll-snap-type" tu finis par saisir la chose.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Citation :

Oui, c'est une bonne manière de décomposer l’algorithme et de comprendre ce qui se passe. overflow: hidden masque tout ce qui dépasse de l'élément, en X ou en Y.
C'est un peu de la magie, on fait disparaître et reparaitre
On commence à y voir plus clair.

Harmo88

Il n\\

Citation :

J'ai regardé les formulaires; essai d'enregistrement des données dans une base de données, en local. Trop complexe avec du SQL, PHP ... on verra plus tard. Après tout le but d'un formulaire n'est pas de servir de carnet d'adresses, Excel ou Access le font aussi bien.
Autre sujet :
https://jsfiddle.net/hyvd9umb/

Harmo88

Il n\\

Citation :

J'attaque les grilles.
https://jsfiddle.net/4qcz8yh7/

MaybeEijOrNot

but someone at least

Le formulaire est un terme "historique" (dans le sens où je ne suis pas certain qu'aujourd'hui on le nommerait pareil) définissant des champs de saisie pour l'utilisateur. Parfois l'amalgame est aussi fait avec les requêtes permettant de transférer ces données.

Le but du formulaire est de faire saisir des données à l'utilisateur, ces données peuvent avoir des destinations bien différentes. Dans celles qui sont les plus communes tu retrouves les données nécessaires à l'identification pour une connexion.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Citation :

On trouve encore ce therme de formulaire dans pas mal de sites; sur le bouquin c'est le therme employé. OK pour l'identification à la connexion, également pour fournir certains renseignements concernant l'utilisateur.
C'est pourquoi l'utilisation que je voulais en faire ne me parait pas adéquate.
Au sujet des requêtes, je me souviens avoir connu ça dans Access(c'est très ancien ...) ou dans Excel, je ne sais plus trop à quoi ça sert, et comment on pratique ... Lorsque j'en aurai terminé avec HTML CSS JavaScript, et autres,
je m'y replongerai peut-être ... :lol: (dans ma 2ème vie :lol: ). Passionnant tout ça.

MaybeEijOrNot

but someone at least

Le terme de formulaire est celui que tu vas retrouver, ce que je voulais dire, c'est qu'aujourd'hui, s'il n'avait pas existé avant, on ne le nommerait probablement pas comme ça.

Les requêtes sont des requêtes au sens propre, simplement on apostrophe le terme d'informatique. Lorsque tu demandes à ton navigateur d'afficher une page web, il a d'abord effectué une requête à un serveur. Ce terme est appréhender pour la partie "dynamique" du web qui s'oppose à la partie "statique" que tu pratiques. Bien que dans les deux cas les requêtes restent le fondement du web, pour le statique cela se fait de manière invisible et tu n'as pas forcément besoin de maîtriser cette notion.

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Citation :

C'était juste pour le fun; je progresse dans les bouquins, et j'examine les sujets au fur et à mesure qu'ils sont présentés, sachant que tous ne seront pas utilisés couramment; il est tout de même bon de les consulter.
Ne serait-ce que pour me remémorer des thermes que je n'ai plus l'habitude d'employer.

Harmo88

Il n\\

Citation :

Utiliser l'unité fraction "fr". Lorsqu'on a les explications, c'est facile ... Je me demandais à quoi correspondait ce "fr", maintenant ça m'est plus familier. J'apprends aussi plus en détail l'inspecteur, pour détailler le code page.
https://jsfiddle.net/Lbnwh8sy/

Harmo88

Il n\\

Citation :

Positionner les enfants dans une grille, après correction de quelques erreurs.
https://jsfiddle.net/q1a5pj9k/

Harmo88

Il n\\

Citation :

https://jsfiddle.net/0dakbf92/

Harmo88

Il n\\

Citation :

Grille responsive.
https://jsfiddle.net/5dpuv2y8/

MaybeEijOrNot

but someone at least

Cela avance bien !

Message cité 1 fois

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Harmo88

Il n\\

MaybeEijOrNot a écrit :

Cela avance bien !

Citation :

:hello: Oui, merci; je profite du beau temps pour avancer. Ça va se compliquer un peu par la suite, en découvrant toutes les possibilités des grilles; pour l'instant j'arrive à suivre.
Je deviens un peu plus autonome au fil du temps.

MaybeEijOrNot

but someone at least

Oui c'est normal, mais tu vas aussi voir qu'à force de voir de nouvelles choses, tu vas finir par en oublier, surtout si tu n'en fais pas régulièrement.

Message cité 1 fois
Message édité par MaybeEijOrNot le 17-01-2023 à 20:11:35

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Publicité

Page : 1 2 3 4 5 .. 14 15 16 17 18 19 20 21

Page Suivante

Page Précédente

Haut de page

FORUM HardWare.fr

Programmation

HTML/CSS

Insertion image en html depuis mon ordi

Sujets relatifs
Signature e-mail en HTML adaptative mode clair/sombre ?	Exercice html, php, mysql, javascript
hébergement de page html	responsive scroll pas quand je glisse l'image
Probleme d'edition d'image dans Django	Envoi image sur blog impossible
Aligner le background au milieu de l'image	un 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

Page générée en 0.153 secondes