Image draggable sur site Web

[ceylia_6438]

Bonsoir Dylav,

Merci pour ta réponse et pour ton aide,

Concernant les lignes avec les chemins ok, il me semble que c'était déjà juste;

Avant d'insérer la petite main dans le mini tableau, j'essaye de centrer la main et la faire bouger, tu regarderas

où il n'y a pas ce "flop" s'il te plait, ça ne fonctionne pas ? merci et excuse-moi de te déranger.

https://www.cjoint.com/c/LBCtPEqnzpg

Bonne soirée,

Ceylia

 

 

[Dylav]

Bonsoir Ceylia,
Je regarde ça demain...

[ceylia_6438]

Ok Dylav,

Merci et Bonne soirée,

Ceylia

[Dylav]

Bonjour Ceylia,

Remarque préliminaire : j'écris ci-dessous toutes les balises en majuscules juste pour ne pas avoir à les encadrer de chevrons (exemple <p>), car mon message serait refusé par le gestionnaire IPB du forum.

• Ton image n'apparaissait pas parce que son extension est PNG et non pas GIF
• Ton image doit impérativement être dans le bloc DIV, c'est lui qui détermine son comportement. J'ai donc déplacé le bloc DIV au bon endroit, et y ai placé l'image
• Le comportement ne pouvait s'exercer, parce que dans la balise SCRIPT tu avais affecté au fichier l'extension SCRIPT et non pas JS

J'ai par ailleurs plein de remarques sur la rédaction de ta page HTML

• les balises non fermantes comme META, LINK ou IMG, n'ont plus besoin d'un slash avant le chevron final. C'était nécessaire en XHTML (basé sur XML), mais maintenant on est en HTML5 depuis un paquet d'années
• en revanche, des balises comme P, TABLE, TR, TD demandent obligatoirement une balise de fin (exemple </p>)… même si les navigateurs ferment trop souvent les yeux sur ces erreurs de syntaxe
• depuis de très nombreuses années ont été inventées les feuilles de style, pour séparer le contenu de la page (HTML) de sa présentation (CSS). Tout est ainsi plus clair. C'est pourquoi j'ai effectué cette sorte de séparation en ajoutant dans la feuille de style le comportement des balises P (police, marge), et leur centrage éventuel (classe CENTER)
• il faut oublier définitivement le vieux travers qui consistait à détourner l'usage de la balise TABLE pour faire de la mise en page. C'est pourquoi j'ai remplacé ta table d'id table14 par un bloc DIV de même id, dont j'ai décrit l'apparence en CSS (border, largeur, marge interne). À noter que tu avais oublié de refermer tes balises TD, TR et TABLE.

Le résultat n'est-il pas plus clair et facile à lire ?

Un dernier clin d'œil pour terminer : ta main_droite est en fait une main gauche. Tu devrais d'ailleurs la retourner (symétrie horizontale) pour en faire effectivement une main droite que l'utilisateur pourrait déplacer dans la marge droite de ta page.

Je te renvoie ton dossier compressé après aménagements. Volià

[ceylia_6438]

Bonsoir Dylav,

Je vais voir ceci à partir de demain car "je suis vraiment surbookée" malgré que je veux à tout pris apprendre et savoir tout bien correctement ^^

Alors la main oui, effectivement, c'est celle de gauche, il faudra que je vois ça, mais je n'ai pas dû te donner le fichier main en .gif, car la mienne était bien en gif, je la voyais sans qu'elle bougeait !
Je prendrais une autre image sinon... en améliorant l'image.
Comme j'avais plein de pages et faisais des essais, j'ai dû confondre.

Tu essayes ton code sur quoi exactement ? Je regarde sur NotePad mais je prends souvent justement Dreamweaver et je prends comme fichier html et html 5 au lieu de xml ?

Je file, je regarde le plus vite possible,
Merci à Toi,
Bonne soirée,
Ceylia

[Dylav]

Il y a 12 heures, ceylia_6438 a dit :

Je prendrai une autre image sinon... en améliorant l'image.

Pour la main, je te suggère quelque chose de plus sobre (que ta gravure à l'encre de Chine qui fait plutôt XIXème siècle), comme par exemple le curseur main standard de CSS (à gauche), ou un autre plus original (à droite).

       

Il y a 12 heures, ceylia_6438 a dit :

Tu essayes ton code sur quoi exactement ? Je regarde sur NotePad mais je prends souvent justement Dreamweaver et je prends comme fichier html et html 5 au lieu de xml ?

Pour éditer le code HTML, j'utilise indifféremment le BlocNotes de Windows ou NotePad++ (mais pas Adobe Dreamweaver, que je ne connais pas et qui, à ma connaissance, est payant). Et je teste directement avec mon navigateur, Firefox en l'occurrence.

[nthor]

Juste un petit mot à propos de l'éditeur de code.

Personnellement, j'utilise Visual studio Code, que ce soit pour le HTML ou un autre langage, c'est sans doute l'éditeur de code le plus populaire aujourd'hui.
Léger, performant, quelques outils qui simplifie la vie (par exemple "! + entrée" qui génère un squelette HTML), les balises fermantes sont automatiquement créées et emet est intégré.

Et pour me faciliter la vie pour tester le code j'utilise selon les cas l'une ou l'autre de ces deux extensions.
Quick HTML Previewer permet de voir en live les modifications effectuées dans le code dans une section de la fenêtre de Visual studio code.
Live Server permet de visualiser de la même manière le résultat du code dans son navigateur sans avoir à effectuer de rafraichissement, ça se fait automatiquement.

Dreamweaver, je ne connais que de nom, jamais utilisé, mais il me semble que ça fonctionne sur le principe du WYSIWYG, on crée les sites, sans avoir à toucher au code.
Quand ça marche, c'est bien, mais quand ça ne veut pas faire ce qu'on veut, bon courage.
Et généralement ce genre de logiciel fait de base, un code dégueulasse.

[Dylav]

Bonsoir Ceylia,

Le 01/03/2022 à 19:26, Dylav a dit :

Le résultat n'est-il pas plus clair et facile à lire ?

J'ai oublié de préciser que le fichier HTML à regarder est fed.html (à comparer à ton filtres_exe_dad.html). Et, bien sûr, la feuille de style DragAndDrop.css (qui s'est un peu enrichie)...

[ceylia_6438]

Bonsoir,

J'étais très "surbookée", et je voulais donner une réponse "claire".

Ok, ça a l'air de fonctionner  et je me sens moins  "à l'ouest"

Oui Dylav, j'ai pensé que c'était le fichier fed.html à comparer avec le mien, du coup j'ai "scruté", j'ai bien zieuté etc...

Il me reste deux choses à faire, j'aimerai mettre un script de trois lignes pratiquement, est-ce que je groupe le script dans celui présent ? ou bien je remets une ligne pour cela dans le fichier .html afin d'indiquer encore un fichier .script, ce qui me semble un peu "neuneu" ?

Aussi, si je veux mettre un fond motif, puis un tableau de couleur sur ma page .html je vais mettre des liens dans le fichier .css ? si tu as un bel exemple sans que ça te prenne du temps, je veux bien, donc je devrais intégrer un tableau avec à l'intérieur une couleur et dans le background un motif. 

@Nthor, j'ai entendu parler de Visual Studio Code et c'est vrai que comparé à Dreamweaver il a l'air vraiment très bien et clair. Je le connais juste de nom par contre. Je vais étudier la chose, mais avant il faut que je sois plus "sûre", plus "sereine"

Merci en tous les cas pour tous vos renseignements.

Bon week-end,

Ceylia

 

Modifié le 5 mars 2022 par ceylia_6438

[Dylav]

Il y a 2 heures, ceylia_6438 a dit :

[…] j'aimerai mettre un script de trois lignes pratiquement, est-ce que je groupe le script dans celui présent ?

Si ton script fait juste 3 lignes, mets-le directement dans la page HTML, dans la section HEAD, sous l'appel du script externé.

<script>
    blablabla
</script>

En tout cas, je te déconseille de le grouper avec le script drag-and-drop, ce serait un mélange difficile à décortiquer plus tard...

Il y a 2 heures, ceylia_6438 a dit :

Aussi, si je veux mettre un fond motif, puis un tableau de couleur sur ma page .html je vais mettre des liens dans le fichier .css ? si tu as un bel exemple sans que ça te prenne du temps, je veux bien, donc je devrais intégrer un tableau avec à l'intérieur une couleur et dans le background un motif.

Là-dessus, je te réponds demain…