a:hover s'applique à tous les textes…

Chamyky

Membre expert
Club iGen
11 Mars 2005
1 278
39
ehv.monespace.net
Bonjour !
Je suis actuellement en train de "rénover" cette page, en utilisant le CSS.
J'ai appliqué le "hover" à mes liens, cepedant cette… propriété (euh, quel est le vrai nom ?) s'applique à tous les textes, ainsi que "active" !
Et, vous l'aurez compris, je n'en trouve pas la raison…
 
Ben c&#8217;est facile : c&#8217;est &#224; cause de tes ancres &#171; <a name="qqchose"> &#187; qui ne sont pas ferm&#233;es.
&#171; <a name="qqchose"></a> &#187; devrait arranger les choses.

P.S. : :hover est un &#8220;pseudo s&#233;lecteur&#8221;, ton a:hover concerne toutes les balises <a> survol&#233;es
P.S. 2 : :nailbiting: c&#8217;est du codage <html> old school et pas tr&#232;s propre ce que tu nous a fait quand m&#234;me :eek:
 
Heu… C'est un peu le bordel dans ton html : tu as un paragraphe (<p>) avec une ancre (<a name="chose">) qui contient un tableau :affraid:. Alors comme l'ancre est considérée comme un lien… :siffle:

Il faut bien faire la différence entre les balises blocs et en ligne : tu ne peux pas mettre un tableau dans un paragraphe (et pourquoi un tableau à cet endroit d'ailleurs?).
 
Ben c&#8217;est facile : c&#8217;est &#224; cause de tes ancres &#171; <a name="qqchose"> &#187; qui ne sont pas ferm&#233;es&#8230;

Mince alors, logique ! &#192; l'origine elles &#233;taient, h&#233; bien, "auto-ferm&#233;es". Mais apparemment &#231;a ne se fait pas&#8230; en fait, je suis vraiment en train de refaire la page, enti&#232;rement, &#224; partir de la pr&#233;c&#233;dente (l'index "normal" du dossier).

&#8230;P.S. 2 : :nailbiting: c&#8217;est du codage <html> old school et pas tr&#232;s propre ce que tu nous a fait quand m&#234;me :eek:

Heum, je d&#233;bute justement&#8230; et &#231;a, c'est une vieille page (en plus !) que j'avais mont&#233;e comme j'avais pu, avant de conna&#238;tre le peu de CSS que je connais aujourd'hui.
Donc, oui, c'est un vrai d&#233;tritus, cette page&#8230; c'est pour &#231;a que je suis en train de la refaire enti&#232;rement.

Heu&#8230; C'est un peu le bordel dans ton html : tu as un paragraphe (<p>) avec une ancre (<a name="chose">) qui contient un tableau :affraid:. Alors comme l'ancre est consid&#233;r&#233;e comme un lien&#8230; :siffle:&#8230;

Le tableau va sauter, justement : en ce moment je n'en suis encore qu'au d&#233;but de la "r&#233;paration".

&#8230;Il faut bien faire la diff&#233;rence entre les balises blocs et en ligne : tu ne peux pas mettre un tableau dans un paragraphe (et pourquoi un tableau &#224; cet endroit d'ailleurs?).

Comme dis plus haut, j'avais bidouill&#233; comme je pouvais pour arriver &#224; mes fins&#8230; mais tout cela va dispara&#238;tre !

&#199;a doit vraiment vous faire mal aux yeux :D !


Edit : Ah, et je pr&#233;cise, la liste est g&#233;n&#233;r&#233;e en PHP, ce qui n'ajoute rien en propret&#233; &#224; la page et en lisibilit&#233; au code&#8230; et pour l'Embed, c'est celui fourni par Flash 6, il ne doit pas &#234;tre terrible non plus !
 
Je suppose qu'il vaut mieux que je continue ce topic au lieu d'en créer un nouveau, donc voilà : j'aimerais avoir votre avis sur cette nouvelle version de la page.
Et particulièrement, j'aimerais savoir si la façon dont j'ai monté les titres, avec les images, est correcte.
 
Et particuli&#232;rement, j'aimerais savoir si la fa&#231;on dont j'ai mont&#233; les titres, avec les images, est correcte.

Bloc de code:
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 6.0px Helvetica; min-height: 7.0px}
    p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
    p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
    span.s1 {color: #ffffff}
    span.s2 {text-decoration: underline}
  </style>
</head>
<body>
<p class="p1"><b>Commandes de base</b></p>
<p class="p2"><br></p>
<p class="p3">Sans activer le mode Exp&#233;rience, vous pouvez d&#233;j&#224; effectuer quelques actions :</p>
<p class="p3"><span class="Apple-converted-space">*</span>- Activer le mode "lumi&#232;re" : appuyez sur L.</p>
<p class="p3"><span class="s1"><span class="Apple-converted-space">*</span>- </span>Pour le d&#233;sactiver, enfoncez simultan&#233;ment Shift et L.</p>
<p class="p3"><span class="Apple-converted-space">*</span>- Afficher le curseur : appuyez sur C.</p>
<p class="p3"><span class="s1"><span class="Apple-converted-space">*</span>- </span>Pour le faire dispara&#238;tre, appuyez de nouveau sur C.</p>
<p class="p3"><span class="Apple-converted-space">*</span>- D&#233;placer la nourriture : une fois le curseur affich&#233;, vous pouvez librement d&#233;placer les boules de nourriture en les cliquant-glissant. Vous pouvez m&#234;me les lancer !</p>

Un titre ce doit d'&#234;tre dans une balise <h> ex :
Bloc de code:
<h1> ceci est un titre </h1>
<h2>ceci est un sous titre</h2>
<h3> ect ect ect</h3>

Nous devrions donc avoir :

<style type="text/css">
h1 {margin: 0; font: 14px Helvetica}
h2 {margin: 0; font: 6px Helvetica; min-height: 7.0px}
h3 {margin: 0; font: 12px Helvetica; text-decoration: underline}
h4 {margin: 0; font: 12px Helvetica; min-height: 14.0px}

</style>
</head>
<body>
<h1>Commandes de base</h1>
<h3>Sans activer le mode Exp&#233;rience, vous pouvez d&#233;j&#224; effectuer quelques actions :</h3>
<h3>Activer le mode "lumi&#232;re" : appuyez sur L.</h3>
[/CODE]

Les textes doivent t' &#234;tre dans des balises <p> ex :

Bloc de code:
<p>D&#233;sormais, un clic cr&#233;era une boule de nourriture. Si vous laissez appuy&#233; le bouton de la souris, vous pourrez d&#233;placer la boule cr&#233;&#233;e comme bon vous semble.
Si vous faites Shift-Clic, ce sera un Mankof (de g&#233;n&#233;ration 0, voir plus loin) que vous cr&#233;erez (mais, sans pouvoir le d&#233;placer celui-l&#224;).
Si vous appuyez sur "<" en m&#234;me temps que vous cliquez sur une boule existante, vous la d&#233;placerez simplement.</p>

Pour les retours &#224; la ligne on peut placer des <br/> en fin de phrase ex:

Bloc de code:
<p>D&#233;sormais, un clic cr&#233;era une boule de nourriture. Si vous laissez appuy&#233; le bouton de la souris, vous pourrez d&#233;placer la boule cr&#233;&#233;e comme bon vous semble.<br/>
Si vous faites Shift-Clic, ce sera un Mankof (de g&#233;n&#233;ration 0, voir plus loin) que vous cr&#233;erez (mais, sans pouvoir le d&#233;placer celui-l&#224;).<br/>
Si vous appuyez sur "<" en m&#234;me temps que vous cliquez sur une boule existante, vous la d&#233;placerez simplement.</p>

Un formatage de ce type est correct et valide, ce que tu as fait pour l'instant est du d&#233;tournement de balise ....

Bon courage
 
Il y a du progrès mais ce n'est pas encore ça :
Voici un code xhtml strict valide :

Bloc de code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Animations Flash de Chamyky</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#blocintro {
margin: 0px 30px 0px 30px;
background-color: #88F;
color: #002;
border-color: #66D;
border-width: 3;
border-style: dashed;
padding: 5px;
}
#blocIntro a {
text-decoration: none;
color: #FFF;
text-shadow: #FFF 0px 0px 4px;
}
#blocIntro a:visited {
color: #95B;
text-shadow: none;
}
h2 {
font-size: 115%;
height: 100%;
line-height: 2.75em;
}
a img {
    border: none;
}
-->
</style>
</head>

<body>
<h1>Animations Flash de Chamyky</h1>

<div id="blocintro">
  <p>Bienvenue !</p>
    <p>Ici, vous découvrirez mes récentes animations Flash n'utilisant pas de fichier php.</p>
    <p>Chacune est accompagnée d'une courte description, et, pour les plus compliquées,
    d'une explication détailléee accessible en cliquant sur [+ d'infos]. Certaines
    ont même une vidéo associée ! Si vous appréciez ce que je fais, n'hésitez
      pas à m'envoyer un mail, grâce au lien en bas de page !</p>
    <p>Et n'hésitez pas non plus à visiter mon blog !</p>
</div>

<div class="anim">
    <h2><a href="anims/Mankofs.swf"><img src="anims/Mankofs.png" height="50" width="50" alt="" />Mankofs</a></h2>
    <p>Dans cette animation, vous observez simplement les Mankofs, de charmantes petites bêtes bleues qui mangent, se dupliquent, vieillissent et meurent.Mais si vous voulez allez plus loin, les taquiner, ou faire des expériences, il est possible d'activer le mode "Expériences" qui vous permettra d'agir.Cette animation est destinée à être exécutée en plein écran, alors n'hésitez pas à la télécharger, en faisant un clic droit sur le lien, puis "Télécharger la cible" !Et pour que ce soit encore plus joli, appuyez sur L.</p>
    <p><a href="anims/Mankofs.html">[+ d'infos]</a></p>
</div>

<div class="anim">
    <h2><a href="anims/Mankofs.swf"><img src="anims/Mankofs.png" height="50" width="50" alt="" />Mankofs</a></h2>
    <p>Dans cette animation, vous observez simplement les Mankofs, de charmantes petites bêtes bleues qui mangent, se dupliquent, vieillissent et meurent.Mais si vous voulez allez plus loin, les taquiner, ou faire des expériences, il est possible d'activer le mode "Expériences" qui vous permettra d'agir.Cette animation est destinée à être exécutée en plein écran, alors n'hésitez pas à la télécharger, en faisant un clic droit sur le lien, puis "Télécharger la cible" !Et pour que ce soit encore plus joli, appuyez sur L.</p>
    <p><a href="anims/Mankofs.html">[+ d'infos]</a></p>
</div>

</body>
</html>
;)
 
…Bon courage

Merci :) ! Mais, hem… cette page est une page générée automatiquement par TextEdit… alors, bon, je ne suis pas vraiment sûr de vouloir l'altérer.

…La page n'est pas valide…

Eh bien, ça, j'avais vu, mais le problème c'est que c'est tout ce qui est relatif à l'animation Flash incorporée qui n'est pas valide… je sais qu'il y a un Doctype qui accepte les balises "tierces", mais, il me semblait que c'était celui-là… bon, je me suis dit que pour juste ça, ça ne poserait pas
problème. Évidemment, j'ai eu tort :D .
Mais alors, qu'est-ce que je dois faire ? Il y a quand même bien un moyen d'insérer un .swf, non ?!

…Ça manque de sémantique html…

Pour ça, j'ai regardé la page que tu me proposes : le problème principal est que ça perd l'aspect présent (je tiens assez à l'absence de soulignement, et au centrage vertical de l'image…).
Alors, ne pourrais-je pas garder ma présentation actuelle, mais ajouter des balises <h1> autour du titre ? Et éventuellement, également autour de l'image ?

…Il manque le titre principal dans la page…

Hugg… il n'y a pas un autre moyen qu'en texte comme ça ? Par exemple, ici sur le forum MacGeneration… c'est inclut dans l'image de header ? Ou il n'y en a pas du tout ?..

…L'attribut alt des images devrait être vide…

Hop, rectifié. Quand j'avais procédé à la validation automatique, il m'avait précisé que je devais mettre un alt. Mais en le mettant, je n'ai pas pensé qu'il y avait tant de contraintes…


Et merci pour toute ton aide :love: ! C'est vraiment très sympathique de ta part :) !
 
Il est tout à possible de mettre un flash dans une page et que ça soit valide avec cette méthode. Si object est directement dans body ça ne sera pas valide, la solution est de l'encapsuler dans un div.

Pour le centrage de l'image, la solution est alors d'enlever l'image et de la mettre en fond du h2 avec les css. Ou jouer avec les marges négatives sur l'image.


Pour mettre le titre principal en image, il faut encapsuler l'image dans le h1 comme ceci avec le contenu textuel dans le alt :

Bloc de code:
<h1><img src="titreimage.jpg" alt="Mon titre principal" /></h1>
Rappel : le alt est obligatoire, si l'image est puremment décorative, il suffit de lui donner une valeur nulle :

Bloc de code:
<img src="decorative.jpg" alt="" />
Et n'oublie pas le tuto que tu peux suivre avec l'éditeur de texte smultron (textedit n'est vraiment pas fait pour ça).
 
…Il est tout à possible de mettre un flash dans une page et que ça soit valide avec cette méthode. Si object est directement dans body ça ne sera pas valide, la solution est de l'encapsuler dans un div…

Merci :) !
Mais à propos du div : j'ai mis le code directement dans le body, et le validateur ne m'a rien dit… peut-être qu'il y aurait eu un problème en "strict" ?

…Pour le centrage de l'image, la solution est alors d'enlever l'image et de la mettre en fond du h2 avec les css. Ou jouer avec les marges négatives sur l'image…

Donc je fais un div avec pour image de fond l'image associée à l'animation, y met le texte entouré de <h1>, le tout avec un padding adapté pour que le texte ne se superpose pas, c'est ça ?
Mais, dans ce cas, l'image risque de ne pas être cliquable, je suppose… ce n'est pas essentiel, mais je pense que ça rend plus logique la navigation.
De plus, le texte ne sera verticalement centré que si je règle correctement la valeur line-height, comme j'ai déjà fait ici, ou existe-t-il une solution alternative plus correcte (que je n'ai en tous cas pas trouvée après recherches) ?

…Pour mettre le titre principal en image, il faut encapsuler l'image dans le h1 comme ceci avec le contenu textuel dans le alt :

Bloc de code:
<h1><img src="titreimage.jpg" alt="Mon titre principal" /></h1>
…

Et le cas de figure sans titre principal du tout, ou alors invisible, est-il envisageable ? Je trouve que le fait de ne pas mettre d'en-tête ajoute à la simplicité de la page, la laissant au simple statut de "liste"…

…PEt n'oublie pas le tuto que tu peux suivre avec l'éditeur de texte smultron (textedit n'est vraiment pas fait pour ça).

Pour le tuto, j'en lis un peu de temps en temps, j'en suis actuellement à la page 13.
Et j'utilise déjà smultron :) ! J'étais lassé de TextEdit, je cherchais quelque chose de plus adapté pour coder…
Je suis aussi bien tenté par Coda :love: , mais je ne suis pas vraiment sûr qu'il corresponde à mes attentes.
 
  • J’aime
Réactions: p4bl0
J'ai encore amélioré ma page en suivant les conseils de Gloup Gloup, notamment au niveau des titres…

Voici ce que cela donne : http://ehv.monespace.net/Flash/index3.php

Je pense l'avoir terminée désormais ! J'aimerais juste avoir une ultime validation pour être sur :) !

PS: Oui, j'ai utilisé des propriétés supportées uniquement par Firefox ou certains versions de Safari (enfin, du WebKit). Mais bon, ça n'est pas grave, ça ajoutera un petit plus visuel à ceux qui auront choisi ces navigateurs.
 
J'ai encore am&#233;lior&#233; ma page en suivant les conseils de Gloup Gloup, notamment au niveau des titres&#8230;
Est ce que cela &#231;a veut dire si vous avez quelque chose &#224; redire, c'est sur Gloupgloup qu'il faut taper? :D
Safari 3---->
gloupg10.png
<---Firefox
Perso c'est un peu flou &#224; mon go&#251;t: je pref&#232;re un text shadow (Safari) un peu plus discret ou absent (comme sur Firefox), je pense aussi le text-shadow sur les liens comme par ex. "infos d&#233;taill&#233;es" n'est pas utile
f&#233;licitations pour les animations flash!
 
Est ce que cela ça veut dire si vous avez quelque chose à redire, c'est sur Gloupgloup qu'il faut taper? :D …

:D

…Perso c'est un peu flou à mon goût: je prefère un text shadow (Safari) un peu plus discret ou absent (comme sur Firefox), je pense aussi le text-shadow sur les liens comme par ex. "infos détaillées" n'est pas utile…

Hmm, tu as raison. Je vais réduire (oui, pas supprimer, je suis tenace :D) l'ombre sur les liens des titres, et supprimer (oui, je ne suis pas trop tenace :D) l'ombre sur les mini-liens.

…félicitations pour les animations flash!

Merci :love: !