Geckozone

Bonjour,

j'aimerais faire un menu horizontal avec des bordures autour :

<html>
  <head>
      <style type="text/css">
      li {
         display: inline;
         border: solid;
         }
      </style>
  </head>
  <body>
    <ul>
       <li>un</li>
       <li>deux</li>
      <li>trois</li>
    </ul>
  </html>

Le pb, c'est qu'il y a des ecarts pas tres jolis entre les cases :
http://ffsearchplugins.free.fr/divers/marchepas.html

j'ai trouve par hasard qu'en faisant ca :

Code : Tout sélectionner


<html>
  <head>
      <style type="text/css">
      li {
         display: inline;
         border: solid;
         }
      </style>
  </head>
  <body>
    <ul>
       <li>un </li>
       <li>deux </li>
      <li>trois </li>
    </ul>
  </html>

ca marchait :
http://ffsearchplugins.free.fr/divers/marche.html

La seule difference, c'est qu'il y a des espaces a la fin de mes <li>
Du coup je me demande si c'est normal un truc comme ca, le fait que des espaces dans le code change la mise en page, ou si c'est juste quelque chose qu'il faut appliquer sans le comprendre ?

merci,

PS : avec Opera et Konqueror, ca fait pareil que Firefox, mais avec IE, ca marche a tous les coups.

Sinon tu obtiens la même chose sans mettre d'espaces en évitant d'aller à la ligne pour chaque <li>

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
li {
display: inline;
border: solid;
}
</style>
</head>
<body>
<ul>
<li>un</li><li>deux</li><li>trois</li>
</ul>
</body>
</html>

ah oui c'est vrai.

Mais bon, c'est pas tres pratique quand on a beaucoup de choses dans les balises li (comme un lien par exemple, ce qui prend beaucoup de place).

En fait, quand tu as un retour à la ligne, une tabulation, un espace, c'est toujours interprété comme un espace (et un seul). Donc dans le cas 1, l'espace est entre les li, donc c'est logique de voir un espace entre les li

Dans le cas 2 visiblement vu qu'il y a déjà un espace et que c'est inline, il ne compte pas les suivants, vu que tout est égal à un espace (je ne sais pas trop comment se fait ce choix par contre)

Tu pourrais peut-être chercher du côté de white-space

Sinon tu les mets en bloc et tu les fait flotter !

ok , je comprends un peu mieux le truc.
Enfin bon, c'est pas simple le positionnement en CSS

si c'est pour faire un menu, c'est li a et li a:hover que tu utiliseras me semble-t-il.
pour l'espace entre les item, tu peux utiliser le margin, et padding pour le fond des liens

finalement, je n'utilise plus les li, mais seulement des liens purs.
Ca me permet de les faire apparaitre en ligne pour les navigateurs qui ne supportent pas les CSS, et comme ils sont en debut de page, c'est beaucoup plus agreable.

pour le padding et margin, justement, je n'y arrive pas sans rajouter d'espace.

Dommage pour la sémantique alors qu’on avait bien là une liste de liens.

Commeçatuasunesuitedelienslesunsderrièrelesautresnonséparés ?

comme ca, j'ai une suite de liens separes par un signe |
et ce signe, je le rends invisible via CSS.
C'est une astuce que j'ai trouve sur openweb.

Parceque franchement, un menu vertical en debut de page sur un navigateur sans CSS, c'est franchement desagreable.

Est-ce que vous pensez quand meme qu'il vaut mieux mettre une liste pour la semantique au detriment de l'accessibilite dans les navigateurs, ou est-ce qu'il existe une solution meilleure ?

merci de votre aide.

Ben disons qu'un lecteur d'écran va probablement lire quelque chose comme

lien 1 barre verticale lien 2 barre verticale lien 3 barre verticale

Bref, c'est moyen moyen.

Remarque que je peux me tromper

[/quote]

Geckozone

CSS, inline, espaces [ok]

CSS, inline, espaces [ok]