Code propre et texte format

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateurs : chinon37, Kazé, Ymai, bobo

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Code propre et texte format

Message par Ymai » 09 juin 2016, 21:29

Et je me permets de faire un peu de ménage dans le code-source (ce qui était quand même la question initiale)

Avant

Code : Tout sélectionner

<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"><br>
<big><font><big><big><font size="+3"><big><span
style="color: rgb(255, 102, 0);"><span
style="color: rgb(153, 255, 153);"></span><big><span
style="color: rgb(255, 39, 214);"></span><span
style="color: rgb(103, 100, 255);"></span><span
style="color: rgb(0, 0, 153);"><span style="color: rgb(255, 255, 51);"></span></span></big></span></big></font></big></big></font></big></h1>
Après

Code : Tout sélectionner

<h1 style="text-align: center; background-color: transparent; height: 219px;">
   <img style="width: 269px; height: 272px;" alt="ascane" src="images/signature.png">
</h1>
J'ai simplement supprimé chaque couple de balises ne contenant rien. Du type <span style="..."></span>
Sans être sûr que

Code : Tout sélectionner

<div style="text-align: center">
	<img style="width: 269px; height: 272px;" alt="ascane" src="images/signature.png">
</div>
ne serait pas encore mieux. Une image en tant que titre... Je suis dubitatif.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 11 juin 2016, 14:03

oui c'est ce que je te dis, quand je fais insérer image, rien ne se passe et ça n'apparaît même pas dans le code source ?
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Code propre et texte format

Message par Ymai » 11 juin 2016, 14:46

Et en ajoutant, manuellement, quelque part dans le texte (juste derrière <body>, par exemple:

Code : Tout sélectionner

<img src="images/resultat.jpg" alt="resultat"> 
Si cela ne donne pas plus de résultats, c'est sans doute que le fichier source est protégé en écriture. La seule hypothèse qui me reste.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 11 juin 2016, 17:36

J'ai ajouté manuellement la ligne de code mais rien ne se passe. L'image est pourtant non protégée ni même en lecture seule ??

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>resultat</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style>
<meta content="ASCANE" name="description">
</head>
<body style="height: 272px; background-image: url(images/terrain.jpg);">
<img src="images/resultat.jpg" alt="resultat">
<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"><br>
<big><font><big><big><font size="+3"><big><span
style="color: rgb(255, 102, 0);"><span
style="color: rgb(153, 255, 153);"></span><big><span
style="color: rgb(255, 39, 214);"></span><span
style="color: rgb(103, 100, 255);"></span><span
style="color: rgb(0, 0, 153);"><span style="color: rgb(255, 255, 51);"></span></span></big></span></big></font></big></big></font></big></h1>
<br>
<br>
<ul id="menu">
<li><a href="Accueil.html">Accueil</a> </li>
<li><a href="resultat.html">Résultat</a> </li>
<li><a href="Nous%20contacter.html">Nous
contacter</a> </li>
</ul>
<marquee style="font-size: 24pt; color: rgb(255, 0, 0);">Prochain match
Lundi 13 juin à 20h00 au gymnase Paul Fort contre RAS1</marquee>
<div style="text-align: left; margin-top: 0px; height: 93px;"><big
style="font-weight: bold;"><big><big><span
style="color: rgb(25, 16, 99);">&nbsp;<span style="color: red;">
</span></span></big></big></big></div>
</body>
</html>
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Code propre et texte format

Message par Ymai » 11 juin 2016, 17:40

Rien ne se passe? Cela veut-il dire qu'il n'apparaît rien à l'écran à l'endroit de l'image (tout en haut à gauche), même pas le mot "resultat".
Serait-il possible de nettoyer la ligne

Code : Tout sélectionner

<body style="height: 272px; background-image: url(images/terrain.jpg);">
en

Code : Tout sélectionner

<body>
Est-il possible d'avoir tout cela en ligne, quelque part?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 12 juin 2016, 18:49

Quand je fais ton changement sur body, je perds mon image de fond :-(
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:46.0) Gecko/20100101 Firefox/46.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Code propre et texte format

Message par Ymai » 13 juin 2016, 23:08

Effectivement. Mais l'idée est de simplifier au maximum pour trouver la source du problème.
Remettre l'image de fond ne doit pas être compliqué.

Donc, "rien ne se passe" est-il toujours le diagnostic?
Le mot "resultat" apparaît-il à la place de l'image? Sinon, en quoi consiste exactement ce "rien"?
Il n'y a vraiment pas moyen d'accéder à une version en ligne? Même sur un hébergement temporaire?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 14 juin 2016, 07:05

bonne nouvelle, j'ai retiré l'image de fond comme tu me l'as dit puis je suis aller voir en ligne.
L'image résultat apparait bien, tu peux voir ici : http://ascane.free.fr/resultat.html
Donc l'image resultat.jpeg devait être en second plan, cachée par le fond.
Sous Kompozer, en mode normal rien ne se passe, en mode aperçu il y a le mot resultat qui s'affiche en haut à gauche

Donc comment faire pour l'image resultat.jpeg en dessous de ma barre menu et qu'elle apparaisse par dessus l'image de fond ?
Voici le code actuel :

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>resultat</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style>
<meta content="ASCANE" name="description">
</head>
<body>
<img src="images/resultat.jpg" alt="resultat">
<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"><br>
<big><font><big><big><font size="+3"><big><span
style="color: rgb(255, 102, 0);"><span
style="color: rgb(153, 255, 153);"></span><big><span
style="color: rgb(255, 39, 214);"></span><span
style="color: rgb(103, 100, 255);"></span><span
style="color: rgb(0, 0, 153);"><span style="color: rgb(255, 255, 51);"></span></span></big></span></big></font></big></big></font></big></h1>
<br>
<br>
<ul id="menu">
<li><a href="Accueil.html">Accueil</a> </li>
<li><a href="resultat.html">Résultat</a> </li>
<li><a href="Nous%20contacter.html">Nous
contacter</a> </li>
</ul>
<marquee style="font-size: 24pt; color: rgb(255, 0, 0);">Prochain match
Lundi 13 juin à 20h00 au gymnase Paul Fort contre RAS1</marquee>
<div style="text-align: left; margin-top: 0px; height: 93px;"><big
style="font-weight: bold;"><big><big><span
style="color: rgb(25, 16, 99);">&nbsp;<span style="color: red;">
</span></span></big></big></big></div>
</body>
</html>

Merci par avance
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Code propre et texte format

Message par Ymai » 14 juin 2016, 15:57

desatan a écrit :bonne nouvelle, j'ai retiré l'image de fond comme tu me l'as dit puis je suis aller voir en ligne.
L'image résultat apparait bien, tu peux voir ici : http://ascane.free.fr/resultat.html
Donc l'image resultat.jpeg devait être en second plan, cachée par le fond.
Sous Kompozer, en mode normal rien ne se passe, en mode aperçu il y a le mot resultat qui s'affiche en haut à gauche
Si le mot "resultat" apparaît et non l'image, c'est que l'image pointée dans la balise "<img src='images/resultat.jpg' alt='resultat'>" ne se trouve pas dans le répertoire "/images"; au moins localement puisque sur le serveur web, elle semble être présente.
Autre possibilité, tout ou partie du nom du fichier image est en majuscules (genre "resultat.JPG")
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 14 juin 2016, 19:22

Re, j'ai nettoyé le code avec ce que tu as mis précédemment.

J'ai remis une image de fond et j'ai vérifié le nom de l'image, pour voir le résultat c'est ici : http://ascane.free.fr/resultat.html
Cette fois ci, l'image apparaît mais pas au bonne endroit. Comment faire pour qu'elle vienne sous mon menu ?

2 Autres questions :

1) j'aimerai que mon image de fond ne se répète pas et qu'elle prenne la place de l'écran, c'est possible ?

2) J'ai un texte qui défile sur chaque page, c'est le même texte que j'ai mis dans toutes les pages. Y a t il une solution pour que si je le modifie sur la page index, il se modifie automatiquement sur toutes les autres pages ?

Merci par avance.

Voici le code

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>resultat</title>
<style type="text/css">
#menu ul {
padding-left: 0;
}
#menu li {
border: 1px solid #cc0000;
text-align: center;
float: left;
margin-right: 5px;
margin-left: 5px;
list-style-type: none;
width: 120px;
}
#menu a:visited {
color: #99ff99;
font-weight: bold;
text-decoration: none;
}
#menu a {
color: white;
font-weight: bold;
text-decoration: none;
background-color: #663333;
display: block;
}
#menu a:hover {
color: #000099;
background-color: #ffcccc;
}
</style>
<meta content="ASCANE" name="description">
</head>
<body style="height: 272px; background-image: url(images/terrain.jpg);">
<img src="images/resultat.jpg" alt="resultat">
<h1
style="text-align: center; background-color: transparent; height: 219px;"><img
style="width: 269px; height: 272px;" alt="ascane"
src="images/signature.png"></h1>
<br>
<br>
<ul id="menu">
<li><a href="Accueil.html">Accueil</a> </li>
<li><a href="resultat.html">Résultat</a> </li>
<li><a href="Nous%20contacter.html">Nous
contacter</a> </li>
</ul>
<marquee style="font-size: 24pt; color: rgb(255, 0, 0);">Prochain match
Lundi 13 juin à 20h00 au gymnase Paul Fort contre RAS1</marquee>
<div style="text-align: left; margin-top: 0px; height: 93px;"><big
style="font-weight: bold;"><big><big><span
style="color: rgb(25, 16, 99);">&nbsp;<span style="color: red;">
</span></span></big></big></big></div>
</body>
</html>
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Code propre et texte format

Message par Ymai » 15 juin 2016, 13:55

Désolé, suis un peu débordé professionnellement, là.
Quelques informations là: http://www.alsacreations.com/astuce/lir ... sible.html
et là http://josar.free.fr/tutoKompozer/MenuM ... nclus.html
Retour aux affaires dans quelques jours. J'espère... :o)
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5308
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Re: Code propre et texte format

Message par chinon37 » 16 juin 2016, 09:16

Bonjour,
J'arrive nettement après la bataille, mais El Professor a eu toute la patience requise pour tenter de résoudre les problèmes soulevés.
- 1 - Je me suis permis de mettre en forme les messages de l'honorable questionneur, afin de ne pas avoir les dits messages longs comme des jours sans bière (ou vin, selon la culture !).
- 2 - Il me semble, mais sans doute me trompais-je, que notre ami Desatan s'est jeté à corps perdu dans KompoZer sans même prendre le temps de consulter un tutoriel lié à ce logiciel. il en existe pourtant quelques-uns de très bien faits et qui éviteraient de cliquer à tout va sur les boutons d'outils. Je ne pourrais que conseiller de remettre les compteurs à zéro à partir d'une page blanche. Puis à l'aide de l'excellent http://josar.free.fr/index.html ou du non moins excellent http://info.sio2.be/kpz/1/index.php (directement anoté du clavier de El Professor), refaire une magnifique page illustrée de belles photos qui s'affichent. Les rustines sur du mauvais code ne pourront qu'être sources de problèmes futurs( futur proche ou futur éloigné lors de mises à jour)
Ymai a écrit :Désolé, suis un peu débordé professionnellement, là.
Je suis tout compatissant, le mois de juin a toujours été un mois très difficile dans ta respectueuse profession :wink:
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 16 juin 2016, 20:38

Chinon, a aucun moment tu te dis que si je viens demander de l'aide c'est que je ne m'en sors pas avec le tutoriel ?

Non parce que si j'y arrivais tout seul, de une je ne viendrai pas vous embêter et de deux je ne perdrais pas mon temps sur le forum à écrire des messages.

D'ailleurs je trouve toujours décevant le type de réponse que tu fais. A quoi sert un forum si tu es là pour dire "va lire ceci et débrouille toi" ?

Bref, je me serai bien passé de ton intervention pour me dire finalement que je suis un gros nul.

Et oui désolé, je ne suis qu'un bénévole imbécile qui veut rendre service à une association...
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0

desatan
Gecko
Messages : 81
Inscription : 29 mars 2009, 18:46

Re: Code propre et texte format

Message par desatan » 16 juin 2016, 20:48

Ymai,

Merci pour tes liens, pour l'image de fond je suis les instructions et mon code et çà :

Code : Tout sélectionner

<html>
<head>
<meta charset="UTF-8">
<title>Fond extensible - version CSS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<img src="images/terrain.jpg" class="superbg">
<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/background.js" type="text/javascript"></script><br>
<br>
html { margin:0; padding:0; background: url(images/terrain.jpg
no-repeat
center
fixed; -webkit-background-size: cover; /* pour anciens Chrome et Safari
*/ background-size: cover; /* version standardisée */
}
</body>
</html>
Mais ca ne fonctionne pas :-( au lieu d'avoir une image qui s'affiche, j'ai mon texte de code qui s'affiche :-(

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5308
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Re: Code propre et texte format

Message par chinon37 » 17 juin 2016, 17:04

Inutile de le prendre mal. Simplement, vu le code présenté, il est clair que tu n'as pas suivi très scrupuleusement les tutos !! Si tu avais légèrement survolé ce forum, tu aurais remarqué que je ne me contente pas de ce type de message, et que je suis capable d'aider quand il y a un blocage. Mais je me refuse de répéter ce que disent les tutos. Moi aussi, je suis bénévole. Si tu bloques sur un point (voir ci-dessous), je serais toujours prêt à donner un coup de main.

Concernant le dernier problème, il est normal que l'image ne s'affiche pas, le code étant incorrect. En effet, tu n'as pas fermé la parenthèse après l'adresse de l'image (pour terrain.jpg). Ce n'est pas avec KompoZer que ce code a été produit? car il ne me semble pas que KompoZer fasse ce type d'erreur. Ne s'agit-il pas d'un code récupéré ailleurs?

Edit: il semble que ce soit tout une partie du code qui soit perdu et pas seulement la parenthèse fermante. Ainsi la balise img n'est pas fermée, etc. Où as-tu pris ce code?
--
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités