Affichage d'un texte d'aide

[Invité]

Pour le DOCTYPE dans le fichier css, je ne l'ai pas inventé. Je débute. Je l'ai trouvé ici

Eh bien je crois que tu peux le supprimer sans autre forme de procès de tes marque-pages, parce qu'il est littéralement bourré de fautes
À commencer par la première phrase

Les feuilles de style sont un sur-ensemble du langage HTML

Ça ne veut rien dire Tout le reste est dans le même style...
Inspire-toi plutôt de ça : http://www.webmaster-hub.com/publication/article62.html

Et un lien portant sur le javascript pour le problème que j'ai, çà existe ?

[calimo]

Un lien vers ton site ne serait pas superflu. Parce que bon, on est pas Madame Soleil non plus hein

[chinon37]

Un lien vers ton site ne serait pas superflu. Parce que bon, on est pas Madame Soleil non plus hein

On se calme, on se calme: j'ai comme l'impression que notre ami oublie régulierement de s'identifier et son site est en bas du 1er message.
D'aillleurs, images trop grosses, pas de texte alternatif, j'ai quitté le site avant l'affichage de la 1ere photo! je n'ai pas l'Adsl, moi!

[Kazé]

<a title="le texte que tu veux voir">Le texte à survoler</a>

Ca devrait marcher

Effectivment, cela fonctionne. Cependant, le texte ne peut contenir de balise HTML du genre (sup, b, ...). Dommage !
Lorsque je n'en ai pas besoin, c'est cela que j'utilise, mais en cas de besoin d'une balise HTML, j'utilise donc la solution javascript. Et la çà marche nickel.

Nul besoin de javascript pour des balises "inline" comme sup, b (strong), etc. Un simple lien et un <span> suffisent !
Tu peux t'inspirer de la page d'Eric Meyer (cf. le menu à gauche).

Il y a probablement une version francisée chez Alsacréations...

[JujuLand]

Un petit coup de pub bien nécessaire ...

Regarde le code de la page en question ... Affligeant, c'est du pur Nvu

Allez Kaze, refourgue-lui ton extension miracle

Tiens au fait, dans PsPad, y'a un menu Tidy. Hormis quelques modifications de paramètres (longueur de ligne, code page, word-2000), ça semble pas mal...

[Kazé]

Regarde le code de la page en question ... Affligeant, c'est du pur Nvu

Allez Kaze, refourgue-lui ton extension miracle

Je pourrais le faire, ça pourrait être utile notamment pour cette page qui est du pur code Word (oui, Tidy inclut une option spécifique à Word)

Mais avant, il faudrait :

• que je dise que l'utilisation d'une feuille de style éviterait la répétition de <span style="font-family: Arial;">, <big>, <small> et autres styles en ligne
• que je puisse aider pascalh sur son problème de javascript, or je n'ai vu aucune page qui contienne la ligne <script type="text/JavaScript" src="scripts/bulle.js"></script>... et de toutes façons ça gagnerait à être fait en CSS aussi

Un code source bien indenté, ça n'est qu'un "plus", alors que de comprendre l'utilité des CSS, c'est indispensable !

Tiens au fait, dans PsPad, y'a un menu Tidy. Hormis quelques modifications de paramètres (longueur de ligne, code page, word-2000), ça semble pas mal...

Oui, sur mon SciTE-fétiche j'ai configuré la touche F7 pour lancer Tidy, c'est pas mal non plus
Par contre, ça fait un clic de plus qu'en cliquant sur "Source" depuis NsmConText. Partisans du moindre effort de tous les pays, unissez-vous !

[pascalh]

Bien vu, Kaze, pour la page qui est du pur code Word. J'ai effectivement fait un tuto pour configurer la freebox avec divers éléments (en Word, puis converti en pdf). Et on m'a demandé d'en faire une page HTML. J'ai donc utilisé Word pour convertir le .doc en .html. Désolé, le HTML n'est pas vraiement mon domaine de prédilection (je pense que vous avez du vous en apercevoir).
La page qui me pose problème avec le javascript est celle-là.
Tu peux y aller sans crainte, elle ne contient pas de photos, mais simplement que du texte. Au fait, elle ne contient plus de référence à un script java externe, puisque cela ne fonctionne pas. Lorsqu'elle contenait cette référence externe, cela se présentait comme dans un message que j'ai posté précédemment.
Merci de votre aide.

[Kazé]

J'ai bricolé une version avec des styles CSS et un script externe ici : http://fabiwan.kenobi.free.fr/css/pasca ... -2006.html
Le script est là : http://fabiwan.kenobi.free.fr/css/pascalh/bulle.js

Pas de problème particulier pour lier ton script à ta page HTML. En utilisant un script externe, ça permet de garder l'indentation de ton script, ce qui est nécessaire pour que des blaireaux comme moi puissent lire le code...

J'ai modifié ta feuille de style pour qu'elle contienne des classes "exterieur" et "domicile" pour les cellules de ton tableau :

Code : Tout sélectionner

th {
    text-align: center; 
    background-color: rgb(153, 255, 255);
}
td {
    text-align: center; 
    vertical-align: top;
}
td.domicile { background-color: rgb(255, 255, 204); }
td.exterieur { background-color: rgb(255, 204, 153); }

Ca évite les nombreuses répétitions de style en ligne, et ça te permet de modifier la légende et les couleurs en un seul clic

J'aurais aimé te montrer comment remplacer ton info-bulle JS par une version CSS, mais le temps me manque.

[pascalh]

Cà, c'est un vrai lifting pour ma page Web. Je récupèrerai les pages demain.
Merci pour ton aide et tes conseils précieux.

J'ai récupéré les 2 fichiers. Cela marche nickel.
Si j'ai bien compris ce que tu as fait :
- créer un style th (resp. td) fait que lorsque tu utilises la balise html <th> (resp. <td>), le style défini est appliqué
- créer un style td.domicile (resp. td.exterieur) fait que lorsque tu utilises l'attribut class="domicile" (resp. class="exterieur") avec la balise <td>, le style défini est appliqué.

Connais tu la bible du HTML/CSS qu'il faut acheter pour pouvoir se débrouiller tout seul (un peu comme le Kernighan et Ritchie pour le C ANSI) ?

[Elendil]

Bien le bonjour ,

cet énorme up est du a une recherche...
Je voudrais mettre une info bulle sur un bouton , mais n'est pas trouver le tuto approprié....

Merci a vous

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9

[chinon37]

Si le bouton est une image:
dans Kpz/Nvu, double clic sur l'image et servir le champ: vignette
sinon, ajouter dans le code à l'intérieur de la balise concernée (par exemple entre <a> et </a>

Code : Tout sélectionner

title="le texte en infobulle que tu souhaites"

exemple complet de code:

Code : Tout sélectionner

<img style="width: 186px; height: 280px; float: left;" alt="le texte alternatif" title="l'infobulle" src="image/photo.jpg" hspace="10" vspace="15">

[Elendil]

salut et merci , je vais essayer ca , mais le bouton n'est pas une image , mais fait avec photoshop...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9

[chinon37]

sauf erreur de ma part, ce qui est fait avec photoshop s'appelle une image!!!!?!!!! Non?

[Elendil]

oui , mais j'ai lu quelque part , ce qui vient de photoshop ca peut poser probleme ( une histoire html ...)
Sinon , ca ne marche pas le code donné plus haut...
je le met entre <a></a> de l'image ou je veut l'info bulle mais rien ni fait ^^

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.9) Gecko/20061206 Firefox/1.5.0.9

[chinon37]

Chez moi, ça marche. Sur ton site j'ai ajouté une infobulle à ton bandeau et elle s'affiche bien quand on passe la souris dessus:

<td style="vertical-align: middle; text-align: center; width: 100%; background-color: rgb(255, 255, 255);">
<img title="poignée de main entre hommes" style="width: 822px; height: 154px;" alt="" src=
"essai2_fichiers/banniere%2520copier.jpg">
</td>

A noter qu'il faut toujours mettre un texte alternatif sur tes images pour les navigateurs qui n'arriveraient pas à afficher la dite image! ou les gens qui n'ont pas encore l'adsl
si ton image photoshop est enregistrée en jpg, png ou gif, ça marchera... à noter la fonction "enregistrer pour le web" très efficace sur Psp dans le menu fichier.