Options de publication NVU

[Kazé]

Mais avec les url relatives, qui sont ok maintenant, la mise en forme n'est pas comme avant.

Le fait que l'URL soit relative ou absolue n'a pas d'incidence sur le positionnement de l'image. La DTD du document, par contre, peut avoir une grande incidence sur le rendu.

Mets la page en ligne pour qu'on puisse t'aider STP (ou au moins la page d'accueil).

PS: il faudra également revoir le positionnement de tes images. Sur cette page par exemple, les images chevauchent le texte. Le positionnement absolu est une mauvaise idée pour positionner tes images...

[DanielSorbier]

je ne sais pas si nos deux derniers msg se sont croisés. J'ai mis une page en ligne avec les exemples. Pour le fait que les boutons n'apparaissent pas en ligne cela vient surement du fait que j'avais encore les adr. pc et non relatives. Pour ce qui est du DTD j'en ai parlé plus haut. mon msg de 15h12 Bloqué pour l'instant aussi.


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[Kazé]

Quand je parlais de la page d'accueil, en fait je parlais de celle-là : http://www.wfit.ch/wfit/wfit.html
Or cette page utilise toujours des URLs locales, donc je ne peux rien voir sur mon poste.

J'ai mis une page en ligne avec les exemples.

Où ça ?

[DanielSorbier]

Désolé j'ai mis ma toque de cuisinier quelques instants. Bientôt fini. la page demandée est en ligne.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[Kazé]

la page demandée est en ligne.

Elle contient toujours des URLs locales :
background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/images/bt.gif);
background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/images/bt.gif);
background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/images/bt1.gif);

[DanielSorbier]

J'ai revérifié plusieurs fois aussi bien l'url de liaison de la feuille style2 que l'image, tout est en relatif. J'ai écrasé l'ancien fichier wfit et retransféré la feuille style2
Donc si ça ne passe pas je comprends plus rien


Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[Kazé]

J'ai écrasé l'ancien fichier wfit

C'est mieux. (l'ancien fichier utilisait une feuille de style interne...)
AMHA il manque un "display: block;" dans ta feuille de style. Il y a des éléments redondants, tu peux la simplifier :

Code : Tout sélectionner

.a {
    font-family: Arial;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    width: 190px;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 1px;
    height: 23px;
    max-height: 23px;
    color: #ffcc33 ! important;
    background-repeat: no-repeat;
    background-image: url(../images/bt.gif);
    display: block;
}
.a:hover {
    color: #3333ff ! important;
    background-position: left bottom;
}

AMHA toujours, il vaudrait mieux simplifier le code HTML de tes menus comme suit (et en profiter pour arrêter d'essayer d'aligner à coups de barre d'espace...) :

Code : Tout sélectionner

<ul class="navlist">
  <li><a href="../coach/coach.html">Personal trainer</a></li>
  <li><a href="../maigrir/maigrir.html">Perte de poids</a></li>
  <li><a href="../physique/physique.html">Préparation physique</a></li>
  <li><a href="../detente/detente.html">Bien-être Détente</a></li>
  <li><a href="../references/references.html">Témoignages</a></li>
  <li><a href="../sandrine/sandrine.html">Et moi . . .</a></li>
</ul>

et utiliser une feuille de style du genre :

Code : Tout sélectionner

.navlist {
    margin-top: 0px;
    margin-left: 0px;
    list-style: none;
}
.navlist a {
    font-family: Arial;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    width: 190px;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 1px;
    height: 23px;
    max-height: 23px;
    color: #ffcc33 ! important;
    background-repeat: no-repeat;
    background-image: url(../images/bt.gif);
    display: block;
}
.navlist a:hover {
    color: #3333ff ! important;
    background-position: left bottom;
}

(à peaufiner, je n'ai pas testé).

De même, ton code est plein d'attributs de style, tu gagnerais à virer tous les styles de texte et à les remplacer par une feuille de style. C'est un investissement de temps vite rentabilisé.

tout est en relatif

Presque :

Code : Tout sélectionner

<td
 style="border-style: none; border-width: 0px; vertical-align: top; text-align: left; background-image: url(file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/WFit/images/image328.gif); background-repeat: repeat;">

D'où l'intérêt de Outils > Nettoyeur de balises > Relativiser les URLs locales...

[DanielSorbier]

j'étais justement en train de regarder l'image 328.gif. C'est l'image de fond . J'ai le même problème avec une autre image de fond pour une cellule d'un tableau. Lorsque je demande le nettoyeur, il ne change pas l'url contrairement au reste. merci pour tous ces conseils il faut que je prenne le temps de lire le tout en détail. Au boulot MERCI

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[DanielSorbier]

GENIAL TU EST GENIAL
le display block.. fallait connaître merci
Et puis je pensais qu'il fallait reécrire le code pour tout ce qui concerne le "hover" (pourquoi faire simple quand on peut faire compliqué ... )
Pour les espaces/barres, je sais, à la fin au lieu de faire un tableau j'ai aligné les 3 lignes manuellement. Promis je vais corriger.
J'ai regardé le code "navlist" Je ne l'ai pas encore repris mais à la lecture, ce que je ne VOIS pas, c'est quel est l'ordre pour que mon menu soit placé horizontalement et puis comment espacer chaque bouton l'un de l'autre.
Pendant que j'y pense, dans un de tes précédents msg tu dis qu'il ne faut pas utiliser de position réelle fixe pour les images ??? alors que dans le tuto j'avais justement lu qu'on utilisait la punaise pour pouvoir faire cela. Alors si j'ai un bloc DIV txt placé au milieu de page et que je veux une image à la droite de ce bloc alignée sur le haut du txt par ex. Je crée un tableau ? Cela me semble pas conforme à tout ce que j'ai lu de votre part à tous, puisque vous êtes "contre" l'utilisation des tableaux ??

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[Kazé]

le display block.. fallait connaître merci

En fait je suis un adepte de longue date des menus en liste, donc j'ai quelques exemples sous la main : http://fabiwan.kenobi.free.fr/css/NestedLists.html
J'ai prévu d'en faire une page type tutoriel mais voilà, entre le manque de temps et la flemme...

J'ai regardé le code "navlist" Je ne l'ai pas encore repris mais à la lecture, ce que je ne VOIS pas, c'est quel est l'ordre pour que mon menu soit placé horizontalement et puis comment espacer chaque bouton l'un de l'autre.

Pour faire une liste horizontale, tu devras utiliser le menu modifié que je t'ai proposé plus haut. Tu peux garder le même code HTML pour toutes tes pages, il suffit de rajouter un "float: left;" dans la section ".navlist" pour les pages qui affichent ce menu horizontalement.
Tu peux t'inspirer de la feuille de style du menu "Rollover Navbar" : http://fabiwan.kenobi.free.fr/css/menus ... Navbar.css

Pendant que j'y pense, dans un de tes précédents msg tu dis qu'il ne faut pas utiliser de position réelle fixe pour les images ???

Le positionnement absolu (la punaise) n'est pas souhaitable dans ton cas. Si tu changes la taille du texte, tu verras que les images vont se décaler par rapport au texte. Sur mon PC (Linux / Firefox), les images masquent du texte.

Alors si j'ai un bloc DIV txt placé au milieu de page et que je veux une image à la droite de ce bloc alignée sur le haut du txt par ex. Je crée un tableau ? Cela me semble pas conforme à tout ce que j'ai lu de votre part à tous, puisque vous êtes "contre" l'utilisation des tableaux ??

Je préfère les <div> aux tableaux, c'est net, mais ça suppose de positionner les images en relatif par rapport au texte. Dans les propriétés des images, tu as un champ "adaptation du texte", qui attribue une propriété "float" à l'image. Utilise plutôt ça.
C'est un peu plus technique que de faire des tableaux, c'est bien pour ça que les tableaux ont la vie dure ! Note aussi que j'ai vu des codes HTML très sales avec des <div>, et des codes propres avec des tableaux (au risque de fâcher pas mal d'utilisateurs de Geckozone)...

Pour la page d'accueil (la "vraie"), par contre, la punaise est à préférer aux tableaux sans aucune hésitation. Ca sera plus propre et c'est plus facile pour positionner des éléments.

AMHA l'essentiel est de préférer les feuilles de style aux styles en ligne (= ceux qu'on crée avec les boutons de la barre d'outils), ça rend le code HTML très propre, et le site devient facile à maintenir ; après quoi la mise en page "moderne" en div + css vient tout naturellement.

PS: j'ai aussi quelques gabarits de mise en page en <div>, j'en ferai un tutoriel prochainement : http://fabiwan.kenobi.free.fr/css/PageLayout.html

[DanielSorbier]

Kaze, je ne sais comment te remercier de prendre tout ce temps pour moi. T'es le meilleur. Sans rire.
Juste une chose: Le champ dans les propriétés images, c'est ce qui se trouve dans Apparence/Placement du texte ?
En effet je me souviens quand j'ai commencé à étudier NVU d'avoir fais un exercice avec ce placement G D H ou Bas
Je vais attaquer cela tout à l'heure, parce que ça fait plus de 24h que j'ai pas dormi et mes yeux fatiguent. De plus je viens de me rendre compte que mon autre site (le mien)n'est pas non plus correct avec Mozilla ou Netscape et personne ne m'a rien dit jusqu'à présent. Tous mes menus sont faux ou invisibles et l'entête n'apparaît que sur la première page. bouh... Pas grave j'ai au moins appris plein de choses aujourd'hui grâce à toi. Si je passe un jour en Isère je t'appelle avant et tu choisi le resto pour que je te paie une bonne table. Merci encore et bonne nuit.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[DanielSorbier]

Après une matinée à corriger toutes mes erreurs, cela commence à prendre une forme qui est plus dans le style de ce que vous les spécialistes préconisez. La seule chose chose pour l'instant qui ne fonctionne pas corrrectement est le "float: left;" J'ai repris la liste plus haut et j'ai ajouté ce code, mais il place les boutons les uns en dessous des autres en les décalant chaque fois vers la droite. (comme un escalier qui descend de gauche à droite) Comme s'il y avait un <br> après chaque ligne de liste alors qu'il n'y en a pas. J'ai tenté de placer le code à plusieurs endroits : (.navlist, .navlist a, et même .navlist a:hover) à chaque fois même résultat. ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[Kazé]

Lorsque je demande le nettoyeur, il ne change pas l'url contrairement au reste.

Je confirme : ça ne marche pas sur les fonds de cellule dans ta page.
C'est un bug de KaZcadeS, à corriger.

Le champ dans les propriétés images, c'est ce qui se trouve dans Apparence/Placement du texte ?

Oui. Désolé, je bosse sur une version anglaise là...

La seule chose chose pour l'instant qui ne fonctionne pas corrrectement est le "float: left;"

Effectivement, j'ai écrit n'importe quoi plus haut : il faut affecter le "float: left;" à <li>, pas à <ul>, sinon ça ne sert absolument à rien...
Avec le code HTML que j'ai proposé plus haut, ça donne :

Code : Tout sélectionner

ul.navlist {
  margin-top: 0px;
  margin-left: 0px;
  list-style-type: none;
}
ul.navlist li {
  float: left;
  text-align: center;
}
ul.navlist a {
  margin: 0 0 0 10px;
  display: block;
  width: 80px;
  height: 42px;
  max-height: 42px;
  font-family: Arial;
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
  color: #ffcc33 ! important;
  background-repeat: no-repeat;
  background-image: url(../images/bt1.gif);
}
ul.navlist a:hover {
  color: #3333ff ! important;
  background-position: left bottom;
}

Fait rapidement avec KaZcadeS, testé avec Firefox, je n'ai pas IE sous la main.

Si je passe un jour en Isère je t'appelle avant et tu choisi le resto pour que je te paie une bonne table.

C'est noté !
"Patron, à manger pour deux et à boire pour dix !"

[DanielSorbier]

Bonsoir,
après toute la journée passée à corriger mon premier site, j'ai réussi en partie à faire en sorte que celui ci s'affiche aussi bien sous IE6 que sous Netscape et Mozilla. Les menus horizontaux et verticaux c'est ok ou presque, j'y reviendrai. Par contre il y a une chose sur laquelle je bute depuis deux heures c'est un problème avec la liaison d'une page avec la feuille de style. L'entete de cette page est comme les autres, je nettoie, j'enregistre, je rouvre la page avec NVU je contrôle que la liaison est en relatif. Tout est ok. Quand je transfère sur le serveur, CETTE page remet le code interne de mon pc.
Voilà ce qu'il y a sur NVU:
<link rel="stylesheet" href="../style/style2.css"
type="text/css">
et ce que je retrouve sous Mozilla:
<link title="feuille interne1" rel="stylesheet" href="file:///C:/Documents%20and%20Settings/HP_Propri%E9taire/Mes%20documents/Mes%20eBooks/MoneyTurf/Style/Style1" type="text/css">

Je précise que sous IE je n'ai pas le problème
La page s'appelle DESCRIPTIF et est accessible depuis la page principale de www.money-turf.com
QuoiTèsque ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; FunWebProducts; .NET CLR 1.1.4322; InfoPath.1)

[Ymai]

Je parie à 25 contre 1 que tout est normal dans cette page.
En tous les cas, au niveau de la feuille de style externe.

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr-ch">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>descr</title>
  <meta content="Daniel" name="author">
  <meta
 content="courses de chevaux, jeu pmu, jeu simple, coupl&eacute; gagnant, coupl&eacute; plac&eacute;, tierc&eacute;, quart&eacute; quint&eacute;, pronostics, syst&egrave;mes de jeu pour les courses de chevaux,"
 name="description">
  <link rel="stylesheet" href="../style/style2.css" type="text/css">
</head>....

Bon, évidemment, si la course est truquée...