Geckozone

Oui et merci a toi. Mais je tiens à mes petits dégradés. Alors j' ai refais la page à partir d' une autre, c' est redevenu comme avant.
Alors la page avec le code que tu as nettoyé est ici
http://chrisllers.free.fr/azer.html
tu peux me faire une capture de cette page SVP ?
Je voudrai voir l' apparence des photos, merci.
Je vois que sur tes captures précédentes, tu n' as pas du tout la même chose que sur la mienne.
As tu une idée d' ou vient ces différences d' affichage ?
Les tableaux ? Car le code nettoyé n' a pas l' air de changer grand chose.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Pas pour te vexer, krystof, mais je n'arrive pas à lire ton code...

J'ai tenté de décoder

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>traitement vidéo</title></head>
<body style="color: rgb(192, 192, 192); background-color: rgb(0, 0, 0);" alink="#ff0000" link="#ff0000" vlink="#ff0000"><table style="text-align: left; width: 949px; height: 32px;" border="0"><tbody><tr><td style="font-style: italic; font-weight: bold; text-align: center; color: rgb(255, 0, 0); width: 97px;"><a href="../index.html"><span style="text-decoration: underline;">Accueil</span></a></td> <td style="text-align: center; text-decoration: underline; font-style: italic; font-weight: bold; width: 121px;"><a href="traitementvideo.html">Vidéo</a></td> <td style="text-align: center; text-decoration: underline; font-style: italic; font-weight: bold; width: 101px;"><a href="traitementaudio.html">Audio</a></td> <td style="text-align: center; width: 207px;"><a href="commentcamarche.html"><span style="font-style: italic; text-decoration: underline; font-weight: bold;">Comment ça marche</span></a></td><td style="text-align: center; width: 108px;"><a href="lexique.html"><span style="font-weight: bold; font-style: italic; text-decoration: underline;">Lexique</span></a></td><td style="text-align: center; width: 135px;"><span style="text-decoration: underline; font-style: italic; font-weight: bold;"></span><a href="problemes.html"><span style="font-weight: bold; font-style: italic; text-decoration: underline;">Les problèmes</span></a></td><td style="text-align: center; width: 134px;"><a href="astuces.html"><span style="font-weight: bold; text-decoration: underline; font-style: italic;">Astuces diverses</span></a></td> </tr> </tbody> </table></body></html>

J'ai repris l'entête et j'ai traduit:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Le titre</title>
  <style type="text/css">
#entete a {
color: red;
font-weight: bold;
}
#entete li {
margin: 0 20px;
display: block;
float: left;
}
  </style>
</head>
<body>
<ul id="entete">
  <li><a href="index.html">Accueil</a></li>
  <li><a href="traitementvideo.html">Vidéo</a></li>
  <li><a href="traitementaudio.html">Audio</a></li>
  <li><a href="commentcamarche.html">Comment ça marche</a></li>
  <li><a href="lexique.html">Lexique</a></li>
  <li><a href="problemes.html">Les problèmes</a></li>
  <li><a href="astuces.html">Astuces diverses</a></li>
</ul>
</body>
</html>

Ca fait le même boulot avec quelques rectifications en prime.
mais le reste, c'est vraiment trop fort pour moi.

[edit]Fier de moi: j'ai grillé Chinon dans les grandes lignes[/edit]

cette page, avec tous ses styles redondants, mériterait une belle feuille de style.
Ainsi par exemple un

Code : Tout sélectionner

 <style type="text/css">
td {
    text-align: center;
    }
    a {
    color: #cccccc;
    }

    </style>

éviterait de mettre à chaque cellule qu'il faut centrer le texte et à chaque lien qu'il faut qu'il soit gris.
Il serait ainsi plus facile de voir où sont les (éventuelles) erreurs de mise en page.
Et surtout, ne pas se faire une montagne des feuilles de style: c'est simplement regrouper les éléments de mise en forme.

Ymai, dans ton code, qu' est ce qui dit au menu d' être horizontal, et avec tel ou tel espacement entre les titres ?

Chinon, ton code est une feuille de style ? Je ne sais pas ce que je dois en faire.

Je vais peut être devoir finir par me pencher sur le css.......pas envie.....c 'était pourtant bien parti.
et ces codes, vous les écrivez à la main, caractère par caractère ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

ce code est créé directement par Kazcades en suivant certaines règles très simples.
Et il est intégré (feuille interne) automatiquement au code source de ta page html...

@ Ymai:

Et est ce que je pourrai faire la même chose que ce que j' ai fait jusqu' à présent ?
Des titres sur les dégradés par exemple .

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

krystof a écrit :Ymai, dans ton code, qu' est ce qui dit au menu d' être horizontal, et avec tel ou tel espacement entre les titres ?

Il fallait lire (il y a une grosse faute que je vois en relisant): [nota: mais j'étais pressé de griller Chinon.]
#entete li {
float: left;
margin: 0 20px;
list-style-type: none;
}

Ca dit que les balises <li> qui sont de type "bloc" doivent être présentées en mode flottant plutôt que les unes en dessous des autres. Chaque bloc présente une marge de 20 px à droite et à gauche. Les puces sont enlevées.

Chinon, ton code est une feuille de style ? Je ne sais pas ce que je dois en faire.

Oui, mais ma mienne est plus complète

. Celle de Chinon est une ébauche.

Je vais peut être devoir finir par me pencher sur le css.......pas envie.....c 'était pourtant bien parti.
et ces codes, vous les écrivez à la main, caractère par caractère ?

Très honnêtement, je vais avouer avoir écrit tout ça à la main. Mais:
- c'est parce que je commence à maîtriser un peu
- ce n'est pas nécessaire si l'on travaille avec KaZcadeS (Editeur CSS de KompoZEr) qui est un excellent outil didactique
* on voit ce que l'on fait en temps réel
* on peut voir le code formé en cochant les cases et en sélectionnant les options,...
* on peut aussi chipoter le code et expérimenter quand on prend un peu d'assurance.

Avec mes plus vifs encouragements à foncer dans cette direction.

krystof a écrit :Et est ce que je pourrai faire la même chose que ce que j' ai fait jusqu' à présent ?
Des titres sur les dégradés par exemple .

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

J'espère bien que non!!

Les CSS permettent de faire bien mieux plus simplement.

J'espère bien que non!!
Les CSS permettent de faire bien mieux plus simplement.

ce que je voulais dire c' est : est ce que visuellement parlant je peux faire avec du CSS ce que j' ai fait jusqu' à présent ?
Vous auriez un tuto ( simple !! )pour Kascades et ses feuilles de styles ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

Krystof a écrit :ce que je voulais dire c' est : est ce que visuellement parlant je peux faire avec du CSS ce que j' ai fait jusqu' à présent ?

Oui 1000 fois. La seule différence, c'est que tu allèges ton code puisque tu n'as plus à répéter 15 fois la même chose.
ainsi, si tu veux que les liens soient en gris, tu dis une seule fois au début de ta page que <a> (balise html des liens) doit être en gris.
Si tu veux que dans toutes tes cellules, le texte soit centré avec un fond vert, tu dis une seule fois au début de ta page:
je veux que <td> (la balise pour cellule) soit à fond vert avec texte centré.
Et tu n'as plus besoin d'y revenir.
Cela nécessite uniquement d'avoir une liste des balises html (Google est ton ami) et de comprendre ce que sont les classes (.class) et les identificateurs (#id)

Krystof a écrit :Vous auriez un tuto ( simple !! )pour Kascades et ses feuilles de styles ?

ça c'est une insulte à Ymai

(paf, bien fait!!)
http://info.sio2.be/kpz/2/index.php par Ymai soi-même! (à ce qui se murmure)
Autre tuto: http://www.gtalbot.org/NvuSection/Guide ... 4.html#s41 moins rigolo mais bien fait, il me semble

Merci, je vais jeter un oeil....la théorie....j' ai vraiment du mal.
Croyez vous que ce soit la cause de cette différence d'affichage sur les images comme on le voit sur les captures ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

de toute façon, avec une mise en page en tableaux, il y aura obligatoirement une différence entre IE et FF.
En effet, les 2 navigateurs interprètent différemment la somme largeur du tableau + bordures.
Pour l'un, la largeur du tableau est la largeur du tout (cellules + bordures).
Pour l'autre, la largeur du tableau est la somme de toutes les cellules hors bordures.

<vidéo>par divx j'entendais pas le codec lui-même, mais le format, moi aussi, j'encode avec Xvid, ça fait des divx aussi!</vidéo>

Ceci dit, ne surestime pas le "challenge" qu'il y a à s'attaquer aux css, surtout avec un éditeur css comme Kazcades, inclus dans Kpz (en haut, en cliquant sur la palette de peintre marquée "css").

bon, ben je vais laisser tomber le CSS.
J' ai lu les liens que tu m' as donné Chinon. Pour être franc, ça ne m' a pas vraiment éclairé.
J' ai jeté un oeil sur alsace création, mais vu je j' aimerai utiliser kazcades, à part à recopier les codes, le site ne m' est pas d' une grande utilité.
Alors bien sûr j' ai réussi à créer quelques règles de styles pour les paragraphes ou titre, mais j' ai rien vu qui m' éclairait réellement.
Par exemple : impossible de créer le menu qu' a fait Ymai.
Si il y a quelqu'un dans la région de Chambéry, je suis partant pour des cours particulierssur Kompozer et Kazcades !!!!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Maxthon; .NET CLR 1.1.4322)

krystof a écrit :bon, ben je vais laisser tomber le CSS.
....
Si il y a quelqu'un dans la région de Chambéry, je suis partant pour des cours particulierssur Kompozer et Kazcades !!!!

T'as tort!
Jette un oeil là:
http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html
Cela vaut le vraiment le détour, c'est presque du cours particulier!

Geckozone

Problème d' apparence sous IE uniquement