Retour a la ligne avec CSS

[LaurentDenis]

Que pensez vous de la taille par defaut des polices? comment se fait il que les polices des liens ne se réduisent pas dans les memes proportions que les polices paragraphe quand je reduis la taille dans IE alors que les tailles definies sont les memes dans la feuille de style (1em)?

Il y a simplement beaucoup trop de "font-size: 1em" répétés dans la feuille de style. Un seul suffit pour couvrir les paragraphes, les listes... et cela règle ton problème dans IE.

D'autre part, inutile de mettre 1.0em : 1em suffit.

[Sebastien]

Laurentdenis, je fais comment? je vire simplement les références les font-size: 1em ?? j'en laisse un seul? ou ca?

[Denis]

Si tu es pour en garder qu'un seul, alors assure-toi qu'il soit dans le body... par effet d'héritance sur les autres objets dans ta page, il affectera tout ce qui s'ensuivra. Évidemment, cela n'est vrai qu'avec les navigateurs récents qui sont capables de pleinement appliquer la force des CSS sur l'ensemble de l'arborescence de ton document.

[Sebastien]

Ce devrait etre tout bien maintenant. Pouvez confirmer?

http://s.billard.free.fr/v2

merci encore pour toute votre aide

[LaurentDenis]

Pour les taille de caractères, c'est OK.

Quatre petites choses encore.

un petit problème d'indentation des listes du menu, facile à régler

- IE, Opera... appliquent par défaut une marge gauche aux éléments <ul>. Ta CSS l'annule comme il faut avec margin-left: 0em;

- Mais les navigateurs basés sur Gecko (Mozilla, FireFox...) n'utilisent pas une marge, mais un padding gauche de 40px par défaut pour les <ul>. Pour éviter que ton menu ne soit décalé vers la droite dans ces navigateurs, il faut ajouter à ta CSS un padding-left: 0; pour les <ul>.

Alléger la feuille de style

Tu n'utilises qu'une seule police de caractère pour toute la page (sanserif). Il te suffit de la déclarer une seule fois pour body, et la règle s'appliquera par héritage à tous les éléments du body (sauf les <code>, <samp> et autres <var> que tu ne risque guère d'utiliser, je suppose).

De même, tu peux simplifier pour les couleurs des liens en déclarant pour a la couleur choisie. Elle s'appliquera par héritage aux a:hover, a:visited....

accessibilité

Pour améliorer la page, tu peux envisager une mesure d'accessibilité très simple : dans un lecteur d'écran par exemple, avant d'accéder au contenu principal de la page, il faut écouter tout le menu de navigation. C'est très pénible et on voudrait pouvoir écouter tout de suite le contenu.

Tu peux facilement y remédier en modifiant ta <div id="header"> pour y ajouter un petit lien vers le contenu :

<div id="header">
    <a class="textheader" href="#contenu">contenu</a> | 
    <a class="textheader" href="http://s.billard.free.fr/">Home</a>
</div>

Par la suite, si tu installes un moteur de recherche du site ou un plan de site, les liens vers les deux pages correspondantes seront également très appréciés dans ce menu d'accessibilité. Voir différents exemples de ces menus :

- sur le weblog de Denis http://www.cybercodeur.net/

- sur le mien http://www.blog-and-blues.com/

- sur le site OpenWeb http://openweb.eu.org/

liens

Et enfin un détail : les liens de ton contenu principal sont clairement soulignés, mais cette info n'est pas renforcée par un changement d'apparence au survol de la souris ou lorsqu'ils sont sélectionnés au clavier (:hover).

Pour une meilleure ergonomie et une meilleure accessibilité, il vaut mieux ajouter un doigt de :hover. Par exemple, une mise en gras, ou passer d'un soulignement pointillé à un soulignement continu, ou à la rigueur un changement de couleur (moins satisfaisant pour l'accessibilité)...

C'est en tout cas un premier essai de CSS très réussi

[Bug]

personellement, j'ai justement un probleme avec mes listes.

css:

ul {

padding-left: 0px;

margin-left: 0px;

}

ul li {

list-style-type: none;

margin-left: 20px;

}

ul li ul li {

list-style-type: none;

margin-left: 25px;

font-size: 9px;

}

html:

<div class="contmenu">

<ul>

    <li><a href="index.html" target="_top">Accueil</a></li>

  <li><a href="statssbk.htm" target="_top">Superbike</a></li>

  <ul>

<li><a href="statspilotes.php" target="_top">Pilotes</a></li>

<li><a href="statsmarques.php" target="_top">Marques</a></li>

<li><a href="statssaisons.php" target="_top">Saisons</a></li>

<li><a href="statscircuits.php" target="_top">Circuits</a></li>

  </ul>

  <li><a href="mangeurcigogne.htm" target="_top">Cigogne</a></li>

  <li><a href="photobis.htm" target="_top">Photos</a></li>

  <li><a href="kocinski.htm" target="_top">Histoires</a></li>

  <li><a href="poupie.htm" target="_top">Poupie</a></li>

  <li><a href="favoris.htm" target="_top">Liens</a></li>

  <li><a href="mailto:b..@de...ug.net">Contact</a></li>

</ul>

</div>

ca fonctionne avec IE mais pas avec firefox et je ne comprends pas pourquoi

voir: http://www.desmobug.net/test/victoirespilo...e=John+Kocinski

au secour !!!

Modifié 4 Mai 2004 par Bug

[jpv]

Ton imbrication de liste n'est pas bonne.

La sous-liste doit être incluse dans un item de la liste superieure :

<ul>
   <li><a href="index.html" target="_top">Accueil</a></li>
  <li><a href="statssbk.htm" target="_top">Superbike</a>
    <ul>
      <li><a href="statspilotes.php" target="_top">Pilotes</a></li>
      <li><a href="statsmarques.php" target="_top">Marques</a></li>
      <li><a href="statssaisons.php" target="_top">Saisons</a></li>
      <li><a href="statscircuits.php" target="_top">Circuits</a></li>
    </ul>
  </li>

Le fait que quelque chose marche sur IE n'est jamais une garantie.

Essaye plutot de verifier ton code sur un browser correct (genre mozilla) et

ensuite de regler les probs propres à IE, tu va gagner un temps fou.

[Bug]

effectivement, ca marche sur les deux maintenant ...

je crois que je n'ai pas fini d'en baver

merci

[Sebastien]

J'ai corrigé le defaut des marge des li, un peu allégé la feuille de style et ajouté le lien "contenu", mis la police en verdana... J'ai également changé le a:over, avec un changement de couleur (subtil mais visible enfin j'espere)

[Denis]

Et le tout me semble très bien !!!

[LaurentDenis]

Bravo !

Allez, encore quelques détails, tout de même :

Accessibilité

Ton lien vers le contenu et ton lien home ne sont séparés par aucun caractère :

<div id="header"> <a class="textheader" href="#contenu">. : Contenu</a><a class="textheader" href="http://s.billard.free.fr/">. : HOME</a></div>

Ceci peut poser des problèmes dans certains lecteurs d'écrans qui énonceront les deux liens à la suite sans permettre à l'utilisateur de les distinguer. D'où le | proposé dans mon exemple ci-dessus. Il suffit que tu déplaces tes petits points pour arriver au même résultat :

<div id="header">
    . : <a class="textheader" href="#contenu">Contenu</a>
    . : <a class="textheader" href="http://s.billard.free.fr/">HOME</a>
</div>

Avec éventuellement une petite précision sur la police/couleur de header en CSS pour que les petits points soient présentés comme le texte des liens.

D'autre part, ton menu comporte deux liens différents ayant le même intitulé "Liens utiles". Dans un lecteur d'écran par exemple, lorsqu'on utilise pour naviguer la fonction listant tous les liens de la page, on se retrouve avec deux liens apparemment identiques sans aucune idée de leur cible. Ils ne sont en effet différentiables que dans le contexte de la page.

Donc, tu pourrais donner deux intitulés plus explicites, par exemple " Liens Musique" et "Liens Photo".

(tes autres liens sont au contraire très explicites et bien libellés).

langue du document

Si celle-ci n'est pas déterminée par l'en-tête HTTP Content-Language, tu devrais signaler la langue de ton document avec :

<html lang="fr">

Et les changements occasionnels de langue, par exemple :

<h2 lang="en">Me, myself, and I</h2>

validité

Le script associé au style doit être balisé avec :

<script type="text/javascript">

Tiens, une remarque amusante : une fois la correction faite pour le javascript, il suffit de quelques secondes pour transformer cette bonne page HTML transitional en... XHTML strict

Modifié 5 Mai 2004 par LaurentDenis

[Sebastien]

Bon, vu que il n'y a plus que des détails à peaufiner, et grace a votre aide precieuse j'ai mis le site à jour :

http://s.billard.free.fr/

Ton lien vers le contenu et ton lien home ne sont séparés par aucun caractère

je vais travailler ca ce soir. Vu que j'ai positionné ces textes dans la classe du lien, ce qui n'est pas lien n'est plus aligné horizontalement

<script type="text/javascript">

Ce script est maquillé en feuille de style, mais c'est en fait un script de statistique. Si je change comme tu dis ca va pas modifier son fonctionnement?

[LaurentDenis]

Ce script est maquillé en feuille de style, mais c'est en fait un script de statistique. Si je change comme tu dis ca va pas modifier son fonctionnement?

Tu peux modifier sans risque de perturber le script.

Au passage, comme la question avait été abordée dans un autre fil, cette modification est tout à fait ladmissible sur un de ces scripts qu'on s'engage à ne pas modifier pour pouvoir utiliser des services de statistiques ou autre : ce n'est pas le contenu du script qui est modifié, mais uniquement sa déclaration.

Cela dit... "maquiller un script de statistique en feuille de style"... là, il y a sûrement une bonne raison, mais elle m'échappe Tu peux nous en dire plus ?

[Sebastien]

euh oui doit y avoir une raison mais elle m'echappe c'est une astuce de notre developpeur. Le script permet de recupere les referers, mots clés tapés etc dans une base de donnée

[Denis]

Ah bon... je vois mal le rapport avec la feuille de style...

[LaurentDenis]

Je retire ce que j'ai dit : il ne peut y avoir aucune bonne raison de faire ce genre de tripotage

[Sebastien]

Quel est le probleme?