Problèmes de liens

[mushylex]

Vide

Modifié le 21 mai 2022 par mushylex
Vide

[Dylav]

En réalité, le site en question n'est pas là pour apprendre à faire du [X]HTML/CSS, mais pour faire comprendre que la façon dont sont réalisées les pages WEB a des implications importantes sur l'accès qui en est offert à des handicapés graves (comme les aveugles) par des logiciels qui se chargent de les interpréter pour décrire vocalement (ou en Braille) le tableau le plus explicite possible à l'internaute défavorisé.

 

Au niveau du logiciel d'aide au handicapé, tout repose sur la définition sémantique de chaque balise (bref, sur l'idée qui est derrière). Au niveau du concepteur de la page WEB, tout repose sur le respect des définitions et l'usage approprié desdites balises. Le succès est à la convergence de ces deux efforts.

 

En prenant conscience que, dotés de tous nos sens, nous sommes des privilégiés, nous nous devons de faciliter la vie de ceux pour lesquels elle n'est déjà pas facile...

 

Plus prosaïquement, revenons au langage HTML et à ses balises. Les recommandations du W3C ont fait l'objet d'une traduction méticuleuse sur la-grange.net. Sur cette page, descends tout en bas, et tu trouveras deux annexes précieuses, l'index des éléments (les balises) et l'index des attributs (les paramètres des balises). Quant au sommaire, il est tellement détaillé que tu trouveras rapidement où aller pour faire quoi...

 

Pour CSS (les feuilles de style en cascade), voici également les recommandations du W3C, et leur traduction chez yoyodesign.org.

 

Ceci dit, les recommandations du W3C sont tout de même des documents ardus, et il existe des tutoriaux plus abordables pour débuter, en particulier sur le Site du zérO, très réputé

[saladin]

Salut à tous,

Merci dylav pour tous ces liens très intéressants et utiles.

Mes travaux avancent tout doucement mais sûrement. Depuis mercredi je n'ai pas eu le temps de m'y consacrer à cause de mes révision pour le brevet, donc il n'y a pas eu beaucoup de changement mis à part les boutons pour les liens "retour haut". Je vais m'y remettre demain et je vous tiendrai au courant de l'avancement des travaux

a+

[saladin]

Salut,

Voila, toujours aucun changement, mais je bloque sur un point je voudrais enlever les lignes qui entourent les boutons "Retour Haut" et j'ai beau essayé mais je ne trouve pas ce qui cloche dans ma feuille de style et dans mes pages? Quelqu'un aurait-il une idée?

Merci d'avance.

a+

[Greywolf]

#lien1 {
text-decoration:none;
font-weight:bold;
}

#lien1:hover {
text-decoration:none;
font-weight:bold;

}

 

ton lien 1 est une class affecté à une balise <a href ...>

 

il faut peut-être remplacé ton CSS par

a .lien1 {
text-decoration:none;
font-weight:bold;
}

 

à moins que ce ne soit le cadre qui entoure les images, il faudra donc définir une class pour les images et ne leur affecter aucune bordure

[Dylav]

Exact. Lorsqu'on utilise une image comme lien actif, elle est par défaut entourée d'une bordure.

Il te suffit d'ajouter dans ta feuille de style une classe pour cette image-là

 

.retour {border:0;}
--- et ---
<img class="retour" src="..." alt="..." />

[saladin]

Merci à vous deux pour vos réponse,

J'ai choisi la solution de Dylav par facilité, mais j'ai quand même modifié le "#" à la place du "a."

Donc ce problème est réglé, mais en voici deux autres :

sur la page Internet et réseaux, il y a un espace entre la Photo dans l'en tête et le menu, quel est le problème?

et la barre en bas de la page Définitions ne prend pas toute la largeur, quel est le problème ?

Merci d'avance.

a+

[Dylav]

La <div> en-tete

 

L'espace sous la photo montre tout simplement que la hauteur de ta <div> en-tete n'est pas la même entre les deux pages définition et ir. J'ai mis un moment à trouver pourquoi, et pourtant c'est là comme le nez au milieu de la figure !

 

Tu as choisi, dans la page ir, de traiter ton titre à l'aide d'une balise <h6>, ce qui est tout à fait approprié pour un titre (mais j'aurais plutôt choisi <h1> puisque c'est le titre principal). Et tu ne l'as pas fait pour la page définition. La différence, c'est les options par défaut de la balise <h6>, avec à coup sûr le texte en gras (font-weight:bold;), et très certainement un margin-top qui explique le décalage. Pour t'en faire la démonstration, passe rapidement d'une page à l'autre par le menu...

 

Plus généralement, ton source HTML n'est pas très propre, avec toutes ces clauses de style directement dans les balises, qu'il faudrait vraiment remonter dans la feuille de style : ne fais pas le travail à moitié, c'est trop dommage... Sur l'exemple qui te préoccupe, si tu avais associé un style à la balise <h6> (utilisée dans les deux pages), tu n'aurais pas eu ce problème

h6 {font-family:Comic sans MS, arial;color:#030c60;font-size:48px;text-align:center;}
...
<div id="en-tete"><h6>LeDico de l'Info</h6>...</div>

N'est-ce pas plus simple à écrire... et à relire ?

 

(à suivre : pied de page)

[saladin]

Oui, en effet c'est bien plus simple,

Je viens de rectifier tous ça, à vrai dire j'ignore un peu les multitudes de possibilités qu'offrent les feuilles de style (je les découvre peu à peu)

Je vais approfondir tous ça demain voir si je peux changer quelques trucs de ce genre pour améliorer la lisibilité de mon script.

Aurais-tu une idée pour la résolution de mon deuxième problème?

Merci d'avance

a+

[Dylav]

Pieds de page

 

Je ne suis pas entré dans le détail de l'état actuel de tes pages mais, en matière de pieds de page, je te suggère de retourner lire le message #12 ci-dessus, avec essentiellement l'idée de laisser flotter le pied de page sous le corps de la page (au lieu de tenter de le positionner en fixe, alors que ta page change de hauteur en fonction de ce que tu y ajoutes, mais aussi en fonction de la largeur que ton visiteur donne à la fenêtre de son navigateur, ce qui, là, est imprévisible). D'ores et déjà, en largeur 1024, tu pourras constater que les boutons "retour haut" viennent en surimpression dans tes définitions...

 

Et remonte toutes les clauses style="..." dans la feuille de style : directement en copier/coller !

 

Nota : petite erreur de syntaxe pour les scripts

L'attribut language n'existe plus, et on doit coder la balise script <script type="text/javascript">