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

 


 Mot :   Pseudo :  
  Aller à la page :
 
 Page :   1  2  3  4  5  ..  13  14  15  16  17  18  19  20  21
Auteur Sujet :

Insertion image en html depuis mon ordi

n°2433495
Harmo88
Il n\\
Posté le 26-11-2022 à 18:33:43  profilanswer
 

Reprise du message précédent :

Harmo88 a écrit :


 

Citation :

Euréka ! Il y a tout de même des choses incompréhensibles ... lorsque j'ai modifié le CSS dans le fichier helico.CSS, les modifs ont bien été enregistrées dans le site, mais pas dans le local ... ???
C'est le même fichier.
Il a fallu que j'ouvre le fichier CSS dans Notepad++ comparer le CSS du site et du local, et l'enregistrer sous, pour que les modifs soient inscrites dans le fichier du local. Avec enregistrer ça fonctionnait bien ....
 
C'est le fichier en local qui m'a permis de créer le site ... donc c'est bon ... si les modifs sont bien prises en compte  :lol:  
Heureusement que je ne rencontre pas ce problème dans les fichiers de mes photos; 40 000 photos à reclasser  :cry:  
En tout cas, merci pour ta patience, qui a été mise à rude épreuve; le bon côté c'est que je te fais réviser  :cry:   :hello:  
Bon, qu'est-ce que je vais inventer pour nous triturer les neurones ?




 
 

Citation :

Pour ne plus qu'il y ait de confusion entre les fichiers CSS en ligne et en local, j'ai changé le nom du local; bien sur, il a fallu corriger le nom dans toutes les pages. Ça m'évitera des problèmes.


mood
Publicité
Posté le 26-11-2022 à 18:33:43  profilanswer
 

n°2433496
MaybeEijOr​Not
but someone at least
Posté le 26-11-2022 à 19:02:55  profilanswer
 

Le mieux c'est de n'avoir qu'un même site en local et en ligne, des chemins relatifs afin que les fichiers fonctionnent aussi bien en local qu'en ligne, et éventuellement une copie des fichiers qui sert de sauvegarde.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2433500
Harmo88
Il n\\
Posté le 26-11-2022 à 20:45:36  profilanswer
 

MaybeEijOrNot a écrit :

Le mieux c'est de n'avoir qu'un même site en local et en ligne, des chemins relatifs afin que les fichiers fonctionnent aussi bien en local qu'en ligne, et éventuellement une copie des fichiers qui sert de sauvegarde.


 

Citation :

C'était bien mon intention, n'avoir qu'un seul fichier, ça a posé des problèmes, je ne sais plus pourquoi ... Firefox m'embête... Je ne sais pas si tu as remarqué, j'ai laissé les span, sur le site, de peur d'avoir des problèmes d'affichage.
De cette façon, il affiche bien le site et toutes les images.
 
En local, il n'affiche toujours pas certaines photos, alors que Edge et Google Chrome les affichent bien ... Pour l'instant, c'est bien comme ça; le site fonctionne bien, je le laisse. Tant pis pour le CSS  :lol:  
Pendant trois jours, je n'ai fait que cogiter sur ça ...... je fais une pause, ma mémoire sature. Je ne trouve pas pourquoi Ffox réagit aussi bizarrement, il semble si je me fie à certains commentaires que cela soi coutumier du fait ?
Je reprendrai ce problème plus tard, lorsqu'on insiste trop, on finit par ne plus rien voir ... c'est ce qui m'arrive, je pense, malgré les notes que je prends.
Les fichiers sont en double, et je ferai une copie supplémentaire lorsque tout sera OK.
Pour mes photos, par exemple, je fais une sauvegarde des cartes SIM, une autre où je conserve les bonnes photos avec celles retouchées, et le tout sur un disque externe; ça prend du temps mais c'est efficace, en cas de pépin.


Message édité par Harmo88 le 26-11-2022 à 20:46:04
n°2433503
MaybeEijOr​Not
but someone at least
Posté le 26-11-2022 à 20:57:03  profilanswer
 

MaybeEijOrNot a écrit :

Aucune idée, tout ce que je peux te dire, c'est que si je vais sur ta page d'accueil, et que je modifie à la volée les span en div, tout en mettant les propriétés CSS que je te donne ça fonctionne sur Firefox :
 
https://i.ibb.co/qCzJ3wY/harmo88-index.png


Non mais avec des div ça fonctionne sur Firefox comme je te l'ai montré. Après si ton Firefox a un problème de config ou je ne sais quoi, ça ne change rien, les visiteurs utilisent leur navigateur avec leur config et tu ne peux rien y faire. Mais franchement, je doute d'un problème de configuration de ton Firefox...


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2433504
Harmo88
Il n\\
Posté le 26-11-2022 à 21:25:26  profilanswer
 

MaybeEijOrNot a écrit :


Non mais avec des div ça fonctionne sur Firefox comme je te l'ai montré. Après si ton Firefox a un problème de config ou je ne sais quoi, ça ne change rien, les visiteurs utilisent leur navigateur avec leur config et tu ne peux rien y faire. Mais franchement, je doute d'un problème de configuration de ton Firefox...


 
 

Citation :

Cette copie d'écran ne correspond plus à la page actuelle ... j'ai modifié le footer, la police actuelle n'est plus en jaune, mais en bleu ... @ 2022 H.Fer... BONS VOLS est en bleu sur le site et sur le local.
Demain je t'envoie une copie écran; ce soir la chaudière est en surpression  :cry: 1000 bars je ne peux plus avancer. Je vais regarder un film comique pour me détendre. :lol:  
Firefox affiche bien la page d'accueil, maintenant, mais pas deux autres pages ... Allez, je débraye, excuse moi.


n°2433506
MaybeEijOr​Not
but someone at least
Posté le 26-11-2022 à 22:23:19  profilanswer
 

Oui je n'ai pas refait de copie d'écran, donc j'ai l'ancien "@ 2022 H.Fer... BONS VOLS" mais ça ne change rien au principe. ;)


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2433515
Harmo88
Il n\\
Posté le 27-11-2022 à 11:51:36  profilanswer
 

MaybeEijOrNot a écrit :

Oui je n'ai pas refait de copie d'écran, donc j'ai l'ancien "@ 2022 H.Fer... BONS VOLS" mais ça ne change rien au principe. ;)


 
 

Citation :

Dans le local, pour l'affichage sur la page d'accueil du petit hélico et de la radiocommande, j'avais une "class" qui n'avait rien à faire là ... je l'ai retirée.
C'est bon pour Edge, Google Chrome et Firefox. J'ai diminué la taille du gros hélico de la page d'accueil parce que Firefox(encore lui  :cry: ) me mettait un ascenseur latéral, ce qui m'ennuyait.
En diminuant la taille de l'image, légèrement, il n'affiche plus d'ascenseur.


 

n°2433521
mechkurt
Posté le 27-11-2022 à 13:11:50  profilanswer
 

Tu viens de te confronter à l'un des plus gros problème d'un développeur de site Internet : "faire un site qui soit beau pour le maximum de visiteur" sachant que certain verront ton site avec un téléphone, une tablette, un PC avec un énorme écran ou au contraire une petite fenêtre...
 
Pour ça l'une des meilleurs techniques est de faire des règles css qui ne s’applique que pour certaine taille à l'aide de mediaquery.
https://www.alsacreations.com/artic [...] eries.html
 
(Toi qui te demandait qu'elles pourraient être tes prochaines aventures ^^).


---------------
D3
n°2433536
Harmo88
Il n\\
Posté le 27-11-2022 à 15:07:31  profilanswer
 

mechkurt a écrit :

Tu viens de te confronter à l'un des plus gros problème d'un développeur de site Internet : "faire un site qui soit beau pour le maximum de visiteur" sachant que certain verront ton site avec un téléphone, une tablette, un PC avec un énorme écran ou au contraire une petite fenêtre...
 
Pour ça l'une des meilleurs techniques est de faire des règles css qui ne s’applique que pour certaine taille à l'aide de mediaquery.
https://www.alsacreations.com/artic [...] eries.html
 
(Toi qui te demandait qu'elles pourraient être tes prochaines aventures ^^).


 

Citation :

J'avais survolé le sujet, ayant suffisamment à faire ... je ne lui ai pas accordé la priorité. Afficher correctement un site sur un PC avec plusieurs navigateurs est déjà assez compliqué.
Mais bon, pour la beauté du geste(et parce que les maux de tête vont me manquer  :lol: ), je vais me lancer dans l'aventure ... je sens que je vais encore rire, et encore vous solliciter(vous l'aurez voulu  :D ).


n°2433664
Harmo88
Il n\\
Posté le 29-11-2022 à 12:07:32  profilanswer
 

Citation :

Pour l'instant je me documente sur les media queries ... pour les tablettes, dont la résolution varie de 601 x 962 à 1920 x 1080 et au dessus. Le point d'arrêt est situé à 1049px en largeur(le titre commence à dépasser la bordure. Ce qui veut dire que je dois utiliser les MQ pour cette résolution, je ne sais pas encore trop comment, c'est encore vague. Ensuite il me faudra voir pour les mobiles. Je n'ai pas de tablette, ni de téléphone multimédia pour voir les résultats, mais je peux voir avec Jsfiddle, en faisant varier la largeur de l'affichage.
J'ai trouvé des tutos assez explicites, je vais les visionner pour en savoir plus.

mood
Publicité
Posté le 29-11-2022 à 12:07:32  profilanswer
 

n°2433683
mechkurt
Posté le 29-11-2022 à 15:19:34  profilanswer
 

Tu as des outils de développement dans tous les navigateurs qui permettent de tester le responsive (en tout cas Firefox, Chrome et Edge).
Il faut faire un clic droit inspecter ce qui ouvre une nouvelle fenêtre et ensuite tu as tout un tas d'outils d'aide au développement notamment un inspecteur de propriété css et la possibilité de varier la taille de la fenêtre d'affichage.
https://developer.mozilla.org/fr/do [...] oper_tools
https://consultant-webdesigner.fr/o [...] teurs-web/


---------------
D3
n°2433706
Harmo88
Il n\\
Posté le 29-11-2022 à 16:10:57  profilanswer
 

mechkurt a écrit :

Tu as des outils de développement dans tous les navigateurs qui permettent de tester le responsive (en tout cas Firefox, Chrome et Edge).
Il faut faire un clic droit inspecter ce qui ouvre une nouvelle fenêtre et ensuite tu as tout un tas d'outils d'aide au développement notamment un inspecteur de propriété css et la possibilité de varier la taille de la fenêtre d'affichage.
https://developer.mozilla.org/fr/do [...] oper_tools
https://consultant-webdesigner.fr/o [...] teurs-web/


 

Citation :

Je vais regarder ça.
J'ai tenté un essai de modif de la taille de la police lorsque la résolution passe à 640 px, ça fonctionne pour les anciennes tablettes dont la résolution était moins élevée.
Je me suis limité au titre <h1> et <h2>; pour les autres éléments j'y vais doucement.
 

Code :
  1. <header>
  2. <link rel="stylesheet" media="screen and (min-width: 640px) href="helico-loc.css  type="text/css"/>
  3. </header>


 

Code :
  1. @media screen and (max-width: 640px) {
  2.   .h1 {
  3.     /* display:block;
  4.     clear:both; */
  5. font-size: 140%;
  6.   }
  7. }
  8. @media screen and (max-width: 640px) {
  9.   .h2 {
  10.     font-size: 95%;
  11.   }
  12. }



n°2433878
Harmo88
Il n\\
Posté le 01-12-2022 à 11:18:37  profilanswer
 

Citation :

Après avoir consulté des pages et des pages concernant la résolution des mobiles et des tablettes, je n'arrive pas à déterminer quelles résolutions privilégier ... d'autant qu'elles s'expriment en px, em, %, w ...
en portait, paysage, images adaptives.
Lorsque les images sont accolées, sur plusieurs rangs, même si je les réduis en taille, je ne sais pas comment elles vont s'afficher; il faudra sans doute, pour simplifier, en masquer.
 
J'ai un problème d'identification sur le site, le mot de passe n'est plus reconnu, et je n'arrive pas à changer le mot de passe. J'ai reçu un mail me donnant un nouveau mot de passe et qui ouvre le site, mais si je le mets dans ancien mot de passe(dans la fenêtre cht mot de passe) il n'est pas reconnu; si je mets mon ancien mot de passe il n'est pas reconnu non plus.
 
Je cherche une solution pour réduire la taille du bouton de retour à la page d'accueil, ça doit être possible. Pour l'instant je ne modifie rien dans le site sur Orange pour ne pas risquer de la planter.

n°2433883
mechkurt
Posté le 01-12-2022 à 11:57:55  profilanswer
 

Ne t’embêtes pas trop a gérer finement beaucoup des break points pour X de largeur d'écran différente, deux versions avec genre > 900px et  >= 901 px (par exemple, on est pas 100px prêt ^^, c'est pour distinguer les smartphone visualisé verticalement du reste) seront déjà largement suffisante pour ton usage.
 
As tu penser à mettre la balise viewport aussi (c'est important rapport au zoom et pixel ratio).
Un peu de lecture à ce sujet : https://www.alsacreations.com/artic [...] obile.html
 
Pour ton problème de mot de passe, je supposes que tu parles de ton accés FTP à ta page Orange, tu as surement quelque part dans ton backoffice Orange une façon de le réinitialiser...


---------------
D3
n°2433910
Harmo88
Il n\\
Posté le 01-12-2022 à 13:26:03  profilanswer
 

mechkurt a écrit :

Ne t’embêtes pas trop a gérer finement beaucoup des break points pour X de largeur d'écran différente, deux versions avec genre > 900px et  >= 901 px (par exemple, on est pas 100px prêt ^^, c'est pour distinguer les smartphone visualisé verticalement du reste) seront déjà largement suffisante pour ton usage.
 
As tu penser à mettre la balise viewport aussi (c'est important rapport au zoom et pixel ratio).
Un peu de lecture à ce sujet : https://www.alsacreations.com/artic [...] obile.html
 
Pour ton problème de mot de passe, je supposes que tu parles de ton accès FTP à ta page Orange, tu as surement quelque part dans ton backoffice Orange une façon de le réinitialiser...


 
 

Citation :

Pour la balise viewport, non, je ne l'ai pas encore mise, j'ai lu que c'est le ratio d'affichage pour les smartphones, selon le modèle ??? Je vais approfondir le sujet.
 
Pour le mot de passe, c'est celui de Hardware; j'ai réactivé mon compte Google, ce qui a provoqué quelques modifications même sur Firefox ... bizarre. Je fais un test d'efficacité de mes mots de passe, j'avais deux mots de passe
un peu justes, j'ai voulu les changer. Pour un ça s'est bien passé, mais pas pour Hardware. Possible que j'ai mal géré l'ancien mot de passe lorsque j'ai reçu le mail du site, plus aucun mot de passe n'est reconnu.
Heureusement dans un autre mail, il y a un lien qui active l'ouverture du site directement, je l'utilise, mais je n'ai pas intérêt à perdre ce mail.  Un peu compliqué à expliquer ...


n°2434079
Harmo88
Il n\\
Posté le 02-12-2022 à 11:46:32  profilanswer
 

Citation :

Je voudrais centrer une liste UL en media queries pour l'affichage d'un PC portable de 1366 px de résolution. Le code fonctionne mais le vérificateur de syntaxe m'indique une erreur d'analyse(?) à la ligne 12.
Jsfiddle met #liste en rouge, ça confirme l'erreur.

Code :
  1. <div id="liste"> <!-- Pour centrer la liste à 1366 px PC portable -->
  2. <ul class="multi-colonnes">
  3.  <li class="mquer"><a href="recommandations.html">Recommandations aux débutants</a></li>
  4.  <li class="mquer"><a href="choix.html">Choix du modéle</a></li>
  5.  <li class="mquer"><a href="conseils-achat.html">Conseils lors de l'achat d'un modèle</a></li>
  6.  <li class="mquer"><a href="pilotage.html">Concernant l'apprentissage du pilotage</a></li>
  7.  <li class="mquer"><a href="cyclique.html">Le plateau cyclique</a></li>
  8.  <li class="mquer"><a href="rotor-principal.html">Le rotor principal</a></li>
  9.  <li class="mquer"><a href="pal.html">Les pales</a></li>
  10.  <li class="mquer"><a href="tete-flybar.html">Tête Flybarless</a></li>
  11.  <li class="mquer"><a href="anticouple.html">Le rotor anticouple</a></li>
  12.  <li class="mquer"><a href="radio.html">La radiocommande</a></li>
  13.  <li class="mquer"><a href="prop.html">La propulsion</a></li>
  14.  <li class="mquer"><a href="servos.html">Les servos</a></li>
  15.  <li class="mquer"><a href="gyro.html">Le gyroscope</a></li>
  16.  <li class="mquer"><a href="conseils-mont.html">Conseils de montage</a></li>
  17. </ul>
  18. </div>


 

Code :
  1. @media screen and (max-width: 1366px) { /* 480 */
  2.   .h1 {
  3.     font-size: 140%;
  4.     text-shadow: 2px 2px grey;
  5.     border-radius: 5px;
  6.   }
  7. }
  8. @media screen and (max-width: 1366px) { /* 480 */
  9.   .mquer {
  10.     font-size: 90%;
  11.  #liste {
  12.    text-align:center
  13.      } /* Centre la liste à 1366 px PC portable */
  14.   }
  15. }


J'ai mis en place la balise "viewport"

n°2434092
MaybeEijOr​Not
but someone at least
Posté le 02-12-2022 à 13:37:01  profilanswer
 

Et donc en regardant bien #liste tu ne vois pas d'erreur de syntaxe ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2434127
Harmo88
Il n\\
Posté le 02-12-2022 à 16:35:20  profilanswer
 

MaybeEijOrNot a écrit :

Et donc en regardant bien #liste tu ne vois pas d'erreur de syntaxe ?


 
 

Citation :

Baaaaah ... ça devrait aller mieux ...
 
[code)
@media screen and (max-width: 1366px) { /* 480 */
  .mquer { font-size: 90%;
 }
 #liste {
   text-align: center /* Centre la liste à 1366 px PC portable */
 }
}
[/code]
 :hello:


n°2434130
MaybeEijOr​Not
but someone at least
Posté le 02-12-2022 à 16:45:06  profilanswer
 

Et au passage, tu peux aussi corriger la deuxième, même pas fait attention avant... Il te manque aussi un point-virgule.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2434160
Harmo88
Il n\\
Posté le 02-12-2022 à 19:40:23  profilanswer
 

MaybeEijOrNot a écrit :

Et au passage, tu peux aussi corriger la deuxième, même pas fait attention avant... Il te manque aussi un point-virgule.


 
 

Citation :

Apparemment, ça ne sert à rien les ; ça fonctionne quand même  :D c'est rectifié, merci.
Je vais transférer les fichiers modifiés sur le site, pour visualiser sur un PC portable; j'ai modifié la taille de quelques images qui débordaient.
J'ai commencé à regarder les images adaptives, ça a l'air costaud aussi ... encore un bon moment à passer.


 

n°2434307
Harmo88
Il n\\
Posté le 04-12-2022 à 10:50:23  profilanswer
 

Citation :

J'ai visualisé sur un portable de17" c'est correct, juste un petit scroll horizontal sur deux pages; comme c'est minime je laisse.

n°2434986
Harmo88
Il n\\
Posté le 09-12-2022 à 13:53:07  profilanswer
 

Citation :


https://jsfiddle.net/hqdy1xwv/
Il faut absolument que j'arrive à décortiquer ces satanées flex box; il y a tellement de possibilités. Dans les exercices, c'est facile, il suffit de copier-coller et d'examiner le code pour essayer de comprendre, mais si on veut appliquer dans un code personnel, pas évident. comme je suis saturé par le Lorem ipsum, je mets des commentaires, ça me sera plus utile que des textes en latin.

n°2435446
Harmo88
Il n\\
Posté le 13-12-2022 à 13:54:13  profilanswer
 

Harmo88 a écrit :

Citation :


https://jsfiddle.net/hqdy1xwv/
Il faut absolument que j'arrive à décortiquer ces satanées flex box; il y a tellement de possibilités. Dans les exercices, c'est facile, il suffit de copier-coller et d'examiner le code pour essayer de comprendre, mais si on veut appliquer dans un code personnel, pas évident. comme je suis saturé par le Lorem ipsum, je mets des commentaires, ça me sera plus utile que des textes en latin.



 

Citation :

Dans cet exemple, je voudrais que les items qui débordent du conteneur passent à la ligne. Si j'utilise les propriétés qui sont en commentaire(une ou l'autre), je n'obtiens pas un passage à la ligne,
mais un passage sur une colonne. J'ai oublié quelque chose ?
https://jsfiddle.net/eo1ykbcu/


n°2435481
Harmo88
Il n\\
Posté le 13-12-2022 à 17:38:32  profilanswer
 

Citation :

Dans cet exemple, je voudrais que les items qui débordent du conteneur passent à la ligne. Si j'utilise les propriétés qui sont en commentaire(une ou l'autre), je n'obtiens pas un passage à la ligne,
mais un passage sur une colonne. J'ai oublié quelque chose ?
https://jsfiddle.net/eo1ykbcu/


[/quotemsg]
 
 

Citation :

Voilà qui est mieux. En tout cas ça fonctionne.
https://jsfiddle.net/6okrcv0a/


n°2435766
Harmo88
Il n\\
Posté le 16-12-2022 à 10:43:08  profilanswer
 

Harmo88 a écrit :

Citation :

Dans cet exemple, je voudrais que les items qui débordent du conteneur passent à la ligne. Si j'utilise les propriétés qui sont en commentaire(une ou l'autre), je n'obtiens pas un passage à la ligne,
mais un passage sur une colonne. J'ai oublié quelque chose ?
https://jsfiddle.net/eo1ykbcu/




 
 

Citation :

Voilà qui est mieux. En tout cas ça fonctionne.
https://jsfiddle.net/6okrcv0a/


[/quotemsg]
 
 

Citation :

Je passe du temps à rectifier les erreurs dans le bouquin Flexbox et Grid ...
Exemple, code donné dans le livre:

Code :
  1. #nav-bar {
  2.     display: flex;
  3.     flex-flow: row nowrap;
  4.     justify-content: flex-start;
  5.     width: 420px;
  6.     background-color: #ccc;
  7.     }
  8. #nav-bar a {
  9.     margin-right: 10px;
  10.     padding: 10px;
  11.     text-decoration: none;
  12.     color: #000;
  13.     }
  14. #nav-bar a: hover {
  15.     background-color: #000;  remplacé par #ff9900;
  16.     color: #fff; remplacé par red;
  17.     }


Code HTML:

Code :
  1. <nav id="nav-bar">
  2.     <a href="#">Accueil</a>        remplacé par : <a href="accueil">ACCUEIL</a>
  3.     <a href="#">Projets</a>        remplacé par : <a href="projets">PROJETS</a>
  4.     <a href="#">Réalisations</a>  remplacé par : <a href="realisations">REALISATIONS</a>
  5.     <a href="#">Equipe</a>         remplacé par : <a href="equipe">EQUIPE</a>
  6. </nav>


Si on clique sur un menu, on a bien le survol en couleur; une erreur 404 s'affiche puisque les fichiers correspondants ne sont pas créés. J'ai testé dans un autre essai, avec les fichiers, c'est bon.
https://jsfiddle.net/mu0L8xhd/


n°2435770
MaybeEijOr​Not
but someone at least
Posté le 16-12-2022 à 11:22:10  profilanswer
 

Pas compris, quel est le problème avec ce code du bouquin ?

Message cité 1 fois
Message édité par MaybeEijOrNot le 16-12-2022 à 11:22:22

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2435776
Harmo88
Il n\\
Posté le 16-12-2022 à 11:49:47  profilanswer
 

MaybeEijOrNot a écrit :

Pas compris, quel est le problème avec ce code du bouquin ?


 
 

Citation :

Quand tu cliques sur un menu, il n'y a pas la couleur de survol, et l'ancre n'est pas identifiée ... il ne se passe rien. Le "#" ne semble pas agir ...
<a href="#">Accueil</a> affiche bien le titre du menu, mais l'ancre "pointe où ?" ... Je ne comprends pas son codage.
<a href="accueil">ACCUEIL</A>  fonctionne. Il y a l'ancre et le titre indiqué. Je me trompe ?
La dernière URL Jsfieddle donnée fonctionne après les modifications effectuées; avec le code du bouquin, ça ne fonctionne pas.


Message édité par Harmo88 le 16-12-2022 à 11:52:00
n°2435780
MaybeEijOr​Not
but someone at least
Posté le 16-12-2022 à 12:10:05  profilanswer
 

Ben oui c'est exercice qui te montre comment mettre en forme un menu avec les flexbox. Il ne va pas s'amuser à coder d'autres pages juste pour faire pointer correctement les liens du menu qui n'ont aucun intérêt vis-à-vis de l'objectif de l'exercice.
 
Faut se concentrer sur les objectifs des exercices sinon tu ne vas pas t'en sortir. Puis imagine la taille du livre s'il devait faire le code complet d'un site pour chaque exo...
 
Et juste en remarque, l'utilisation du "#" sert à faire pointer vers une section spécifique d'une page.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2435796
Harmo88
Il n\\
Posté le 16-12-2022 à 12:59:43  profilanswer
 

MaybeEijOrNot a écrit :

Ben oui c'est exercice qui te montre comment mettre en forme un menu avec les flexbox. Il ne va pas s'amuser à coder d'autres pages juste pour faire pointer correctement les liens du menu qui n'ont aucun intérêt vis-à-vis de l'objectif de l'exercice.
 
Faut se concentrer sur les objectifs des exercices sinon tu ne vas pas t'en sortir. Puis imagine la taille du livre s'il devait faire le code complet d'un site pour chaque exo...
 
Et juste en remarque, l'utilisation du "#" sert à faire pointer vers une section spécifique d'une page.


 
 

Citation :

A chaque avancée dans un exercice, il ajoute un nouveau code ... encore faut-il que le début du code soit bon ... et que les fonctions annoncées dans l'intitulé de l'exercice se produisent. Si on te dit que l'affichage doit varier
en fonction de la résolution, et que cela ne se produit pas ... comment veux-tu que moi, qui débute, j'avance ... Si au survol d'un menu il ne change pas de couleur, parce que les couleurs codées ne correspondent pas(si tu mets du texte noir, sur du noir ... je ne vois pas ce qui peut se passer ... ou je suis idiot ? Peut-être ...).
 
Ces deux bouquins, je le répète, et j'assume, comportent trop d'erreurs. J'apprends plus en allant piocher dans des sites sérieux. Ces deux bouquins vont aller directement dans la chaudière, puisque de toute façon, lorsque leur code ne fonctionne pas je dois aller chercher pourquoi sur un site ... double travail, perte de temps, ça me douter, et j'en ai marre.
 
Lorsque j'apprenais l'électronique, j'achetais une revue où l'on trouvait des montages que je réalisais. Au début tous les montages fonctionnaient(si tu respectais l'implantation des éléments, bien évidemment), puis les montages ne fonctionnaient plus, il y avait des erreurs, corrigées dans le N° suivant, ce qui t'obligeait à acheter une nouvelle revue(voir encore une autre), même si les montages ne t'intéressaient pas ... Il n'y a rien de changé aujourd'hui ...
Je suis conscient qu'apprendre en autodidacte n'est pas facile; j'ai suivi des cours par correspondance(payés de ma poche) si il y avait eu autant d'erreurs, j'aurais laissé tomber et je me serais fait rembourser.


n°2435805
MaybeEijOr​Not
but someone at least
Posté le 16-12-2022 à 14:51:35  profilanswer
 

Code :
  1. #nav-bar {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   justify-content: flex-start;
  5.   width: 420px;
  6.   background-color: #ccc;
  7. }
  8. #nav-bar a {
  9.   margin-right: 10px;
  10.   padding: 10px;
  11.   text-decoration: none;
  12.   color: #000;
  13.   }
  14.  
  15.   #nav-bar a:hover {
  16.     background-color: #000;
  17.     color: #fff;
  18.   }


 
Ceci fonctionnait bien et c'était le code donné dans le livre : texte noir sur fond gris, puis au survol texte blanc sur fond noir.
 
Après je ne dis pas, je n'ai jamais lu de livre de programmation, je me démerde avec Internet. Mais en même temps ce n'est pas mon métier et je ne suis pas expert. Cela me semble vraisemblable que les livres soient mieux structurés pour un apprentissage car tu as une construction globale alors que sur Internet tu pioches souvent à droite et à gauche.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2435822
Harmo88
Il n\\
Posté le 16-12-2022 à 16:56:37  profilanswer
 

MaybeEijOrNot a écrit :

Code :
  1. #nav-bar {
  2.   display: flex;
  3.   flex-flow: row nowrap;
  4.   justify-content: flex-start;
  5.   width: 420px;
  6.   background-color: #ccc;
  7. }
  8. #nav-bar a {
  9.   margin-right: 10px;
  10.   padding: 10px;
  11.   text-decoration: none;
  12.   color: #000;
  13.   }
  14.  
  15.   #nav-bar a:hover {
  16.     background-color: #000;
  17.     color: #fff;
  18.   }


 
Ceci fonctionnait bien et c'était le code donné dans le livre : texte noir sur fond gris, puis au survol texte blanc sur fond noir.
 
Après je ne dis pas, je n'ai jamais lu de livre de programmation, je me démerde avec Internet. Mais en même temps ce n'est pas mon métier et je ne suis pas expert. Cela me semble vraisemblable que les livres soient mieux structurés pour un apprentissage car tu as une construction globale alors que sur Internet tu pioches souvent à droite et à gauche.


 
 
[qoutemsg]<a href="#">Accueil</a>  Est-ce que cette ligne d'instructions te parait correcte ? Est-ce qu'elle signifie bien qu'elle va pointer sur le titre de la page et non pas sur l'adresse de la page ?
Avec ou sans livre, tu te débrouilles sans aucun doute mieux que moi. Tu as de l'avance dans beaucoup de sujets concernant le HTML, le CSS, et peut-être le Javascript.  
Pour être certain, je vais recommencer, coder comme dans le bouquin, en vérifiant bien la syntaxe à chaque ligne ...
A la fin de l'exercice, il y a le code complet; vu que par "bribes" ça ne fonctionnait pas, je l'ai édité dans Jsfiddle .... je vais recommencer  :D   :hello: [/quotemsg]

n°2435824
unitedcolo​rs
Posté le 16-12-2022 à 17:37:12  profilanswer
 

Bonjour,
Je prends ton post en cours donc n'ai pas tout suivi.
Mais là,  non ton href="#" ne va mener vers rien.
Je t'invite à faire une recherche Google "ancre html vers un titre".
Mais en gros, si tu veux qu'au clic sur le lien/a, on soit dirigé vers ton titre:
Il te faut donner une id à ton h1.
<h1 id="volEnHeli">blabla ton titre <h1>
En ensuite sur ton lien/a:
<a href="#volEnHeli">.
Et là au clic sur le lien, le user sera dirigé  vers  ton h1.
Ou alors j'ai pas compris ce que tu souhaitais faire.

n°2435827
Harmo88
Il n\\
Posté le 16-12-2022 à 18:39:55  profilanswer
 

unitedcolors a écrit :

Bonjour,
Je prends ton post en cours donc n'ai pas tout suivi.
Mais là,  non ton href="#" ne va mener vers rien.
Je t'invite à faire une recherche Google "ancre html vers un titre".
Mais en gros, si tu veux qu'au clic sur le lien/a, on soit dirigé vers ton titre:
Il te faut donner une id à ton h1.
<h1 id="volEnHeli">blabla ton titre <h1>
En ensuite sur ton lien/a:
<a href="#volEnHeli">.
Et là au clic sur le lien, le user sera dirigé  vers  ton h1.
Ou alors j'ai pas compris ce que tu souhaitais faire.


 
 

Citation :

Bonjour,
Merci pour ta réponse; concernant le site de l'hélico, tous mes liens fonctionnent, ainsi que ceux des sites externes. Je n'y touche plus, sauf le compteur fourni par Orange mais qui ne fonctionne pas correctement(il y a eu plus de 3 visiteurs depuis son installation. Orange, dans les pages perso donne tous les jours le nombre de visiteurs, ça me suffit pour le moment. https://hfervolhelico-rc.pagesperso-orange.fr
 
Je suis d'accord, que dans le dernier exemple affiché, les liens ne mènent nulle part; je vais créer les fichiers des titres dans le menu. Pour cela, j'en suis sûr, je vais être obligé de modifier le HTML.
https://jsfiddle.net/39tdgzn4/
Dans cet autre exemple(recopié du bouquin) le survol fonctionne, c'est OK; j'ai juste changé les couleurs pour que cela soit un peu moins triste que le noir et blanc.
Mais, les liens n'affichent rien dans leur forme actuelle, sinon, comme les fichiers "titres du menu" ne sont pas créés, lorsque je clic sur un titre, je devrais avoir une erreur 404 page inexistante, ce qui n'est pas le cas.
Je suis sûr qu'en codant comme tu l'indiques(ce que je fais habituellement) les liens m'enverront bien sur la page demandée.


Message édité par Harmo88 le 16-12-2022 à 18:48:24
n°2435828
MaybeEijOr​Not
but someone at least
Posté le 16-12-2022 à 19:01:42  profilanswer
 

Harmo88 a écrit :


<a href="#">Accueil</a>  Est-ce que cette ligne d'instructions te parait correcte ? Est-ce qu'elle signifie bien qu'elle va pointer sur le titre de la page et non pas sur l'adresse de la page ?


Non mais on n'est loin de l'objectif de l'exercice, c'est ça que je veux te dire.

 

L'exercice c'est apprendre à manipuler les flexboxes, pas apprendre à créer des liens ou gérer les couleurs par CSS. Parce que sinon, si on continue dans ton sens, il n'y a pas non plus de balise html, pas d'en-tête, etc. Pour que l'exercice soit efficace il évite de tergiverser sur les autres aspects sinon tu ne peux pas t'en sortir si pour chaque exercice tu es obligé de coder un site entier... Et c'est clairement ce que suggère le livre en ne faisant pointer les liens nulle part. ;)

 

Le livre te montre d'abord chaque brique séparément pour que tu puisses les assembler plus tard. Il te propose tes exemples pertinents sur leur utilisation : des flexboxes pour créer ton menu horizontal alors que tu connais probablement déjà la technique des listes (<ul><li> ), comme ça tu peux juger de leur efficacité.

 

Encore une fois, je ne connais pas le livre, je n'ai pas appris avec des livres, mais dans ce que tu me montres rien ne me choque. ;)

 


EDIT : si je te dis ça c'est que ça fait plusieurs fois que tu te plains du livre, mais malgré ça tu avances quand même donc je pense que c'est contre-productif de vouloir te focaliser sur la qualité du livre.

Message cité 1 fois
Message édité par MaybeEijOrNot le 16-12-2022 à 19:07:05

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2435839
Harmo88
Il n\\
Posté le 16-12-2022 à 20:37:09  profilanswer
 

MaybeEijOrNot a écrit :


Non mais on n'est loin de l'objectif de l'exercice, c'est ça que je veux te dire.
 
L'exercice c'est apprendre à manipuler les flexboxes, pas apprendre à créer des liens ou gérer les couleurs par CSS. Parce que sinon, si on continue dans ton sens, il n'y a pas non plus de balise html, pas d'en-tête, etc. Pour que l'exercice soit efficace il évite de tergiverser sur les autres aspects sinon tu ne peux pas t'en sortir si pour chaque exercice tu es obligé de coder un site entier... Et c'est clairement ce que suggère le livre en ne faisant pointer les liens nulle part. ;)  
 
Le livre te montre d'abord chaque brique séparément pour que tu puisses les assembler plus tard. Il te propose tes exemples pertinents sur leur utilisation : des flexboxes pour créer ton menu horizontal alors que tu connais probablement déjà la technique des listes (<ul><li> ), comme ça tu peux juger de leur efficacité.
 
Encore une fois, je ne connais pas le livre, je n'ai pas appris avec des livres, mais dans ce que tu me montres rien ne me choque. ;)  
 
 
EDIT : si je te dis ça c'est que ça fait plusieurs fois que tu te plains du livre, mais malgré ça tu avances quand même donc je pense que c'est contre-productif de vouloir te focaliser sur la qualité du livre.


 
[quotemsg]Je comprends bien ton point de vue qui est celui  de quelqu'un qui a déjà acquis beaucoup de connaissance du sujet; mets toi à ma place, tu vois des liens qui sont faux, mais tu ne le sais pas. Tu crois que c'est une nouvelle façon de les créer, et tu cherches comme un con(excuse ...) sur tous les sites sans trouver ... c'est frustrant et tu doutes de toi, c'est normal. Imagine qu'en électricité je dise à un novice : U=RY  le pauvre gars va se poser des questions ... tu peux toujours exécuter une pirouette, en disant : c'est pour voir si tu suivais ...  :lol:   ou mieux encore: le carré de l'hypoténuse est égal à la somme des carrés des trois autres côtés ... On écrit ce qu'on veut ...
On fait un livre, ou on ne le fait pas, on traite un sujet correctement, ou pas. Ces deux livres, je les avais oubliés pendant un bon moment, ça ne m'a pas empêché de terminer le site de l'hélico. J'ai voulu les reprendre pour les flexbox ....
 
Quant à mes "plaintes" au sujet du livre, que veux tu, je suis né au XIX ème siècle; en ce temps là ... (Jésus dit à ses disciples(mais qu'est-ce que j'dis ...)) la critique était permise  :lol: aujourd'hui, il faut tout accepter, en bêlant en chœur  :lol:  
Nager à contre courant, faire des vagues, ne me gêne pas, j'ai été marin  :lol:  

n°2435844
MaybeEijOr​Not
but someone at least
Posté le 16-12-2022 à 21:01:25  profilanswer
 

Je ne dis pas qu'il ne faut pas critiquer, juste que dans ton cas c'est peut-être contre-productif car ça semble te frustrer plus qu'autre chose.
 
D'autant plus que tu arrives à trouver les erreurs, à trouver des solutions, c'est le moment où tu commences à devenir autonome et où tu ouvres en grand le champ des possibilités. Donc il faudrait éviter de fermer des portes pour des raisons qui ne seraient pas les bonnes. ;)


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2435848
Harmo88
Il n\\
Posté le 16-12-2022 à 21:40:27  profilanswer
 

MaybeEijOrNot a écrit :

Je ne dis pas qu'il ne faut pas critiquer, juste que dans ton cas c'est peut-être contre-productif car ça semble te frustrer plus qu'autre chose.
 
D'autant plus que tu arrives à trouver les erreurs, à trouver des solutions, c'est le moment où tu commences à devenir autonome et où tu ouvres en grand le champ des possibilités. Donc il faudrait éviter de fermer des portes pour des raisons qui ne seraient pas les bonnes. ;)


 
 

Citation :

Ne t'inquiètes pas, ça ne m'empêche pas de dormir  :lol: ça n'est contre-productif que parce-que ça ma fait perdre du temps, à vérifier, re vérifier, là où il n'y a pas lieu.
Quand je regarde le code source de certains sites, je suis bien conscient que je ne parviendrai pas à en faire autant, parce que la mémoire n'est plus aussi performante et que je n'ai pas envie de passer 8 h 00 / jour devant un écran, ça n'est pas un problème. Je n'aurais pas pu devenir ingénieur, je suis resté technicien, parce que j'avais atteint mes limites intellectuelles, c'est la réalité, et que cette activité me plaisait par sa diversité. La routine m'ennuie  :lol:  
Non, je ne ferme pas la porte, pas encore ...lorsqu'il me semblera que je n'avancerai plus, j'arrêterai de me poser des questions ...


n°2435863
Harmo88
Il n\\
Posté le 17-12-2022 à 10:09:47  profilanswer
 

Harmo88 a écrit :


 
 

Citation :

Ne t'inquiètes pas, ça ne m'empêche pas de dormir  :lol: ça n'est contre-productif que parce-que ça ma fait perdre du temps, à vérifier, re vérifier, là où il n'y a pas lieu.
Quand je regarde le code source de certains sites, je suis bien conscient que je ne parviendrai pas à en faire autant, parce que la mémoire n'est plus aussi performante et que je n'ai pas envie de passer 8 h 00 / jour devant un écran, ça n'est pas un problème. Je n'aurais pas pu devenir ingénieur, je suis resté technicien, parce que j'avais atteint mes limites intellectuelles, c'est la réalité, et que cette activité me plaisait par sa diversité. La routine m'ennuie  :lol:  
Non, je ne ferme pas la porte, pas encore ...lorsqu'il me semblera que je n'avancerai plus, j'arrêterai de me poser des questions ...




 
 
[quotemsg]Je reprends le 1er exercice Flexbox et Grid, copier/coller d'un fichier à télécharger(de l'auteur).
Deux conteneurs : un display:  flex et un display:  inline-flex
 
Width dans le livre: 1er conteneur 800px; dans le fichier: 400px   2e conteneur : 800px  on voit que l'affichage entre le 1er et le 2e est différent. Je corrige ...800px pour les deux.
 
Entre le 1er conteneur et le 2e, pour créer un retour à la ligne(pour sépare les deux conteneurs) il utilise un espace insécable: <p>&nbsp;</p>  N'est-il pas plus simple d'utiliser <br> pour le retour à la ligne ? Je pense que oui.
Promis MayEijOrNot, je n'en parle plus; il y a tout de même 270 pages ... :lol:  :bounce:  

n°2435865
MaybeEijOr​Not
but someone at least
Posté le 17-12-2022 à 10:58:37  profilanswer
 

Je ne peux pas te répondre comme ça.
Mais tu dois noter que l'espace insécable n'est pas un retour à la ligne alors que <br> si, il essaye surement de te montrer les conséquences des propriétés utilisées avec des éléments inline.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
n°2435898
Harmo88
Il n\\
Posté le 17-12-2022 à 20:59:25  profilanswer
 

MaybeEijOrNot a écrit :

Je ne peux pas te répondre comme ça.
Mais tu dois noter que l'espace insécable n'est pas un retour à la ligne alors que <br> si, il essaye surement de te montrer les conséquences des propriétés utilisées avec des éléments inline.


 

Citation :

Ben, oui, c'est bien un espace insécable ... Placé dans un paragraphe, je ne sais pas quel est son rôle; en le supprimant j'ai remarqué que les deux conteneurs n'avaient plus d'espace entre eux.
J'ai mis un <br> à la place, et l'espace est revenu; je ne me suis pas posé de question.
Dans la première version de Notepad, j'étais obligé de l'utiliser ainsi que d'autres signes spéciaux, c'était un peu long et ennuyeux.
Avec la dernière version, il n'y a plus ce problème.
 
J'ai toujours un problème pour me connecter; j'ai essayé de changer de mot de passe, un mail m'en envoie un, qui fait effet. Si j'essaie de créer un nouveau mot de passe, je mets le mot de passe envoyé,
je mets un nouveau mot de passe, un message me dit que le mot n'est pas bon. Lequel ? Celui envoyé par mail(si je le rentre manuellement, il n'est pas reconnu), ou celui que je veux créer ?
J'ouvre le site depuis le mail envoyé, ça se connecte et quand je vais sur une de mes pages, ça se déconnecte ... après plusieurs essais ça reste connecté.
J'ai le même problème avec mon assurance, impossible de me connecter à mon compte, et de changer de mp mais là ça vient d'eux ... confirmation par téléphone.


n°2436143
Harmo88
Il n\\
Posté le 20-12-2022 à 16:23:57  profilanswer
 

Citation :

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

mood
Publicité
Posté le   profilanswer
 

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

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


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