CSS, inline, espaces [ok]

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
arno.
Varan
Messages : 1347
Inscription : 19 août 2004, 12:26

CSS, inline, espaces [ok]

Message par arno. »

Bonjour,

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

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>
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.
Dernière modification par arno. le 01 nov. 2005, 23:50, modifié 1 fois.
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

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> 
arno. sans ses cookies

Message par arno. sans ses cookies »

ah oui c'est vrai. :shock:
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).
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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 :P
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 :wink:

Sinon tu les mets en bloc et tu les fait flotter !
arno.
Varan
Messages : 1347
Inscription : 19 août 2004, 12:26

Message par arno. »

ok , je comprends un peu mieux le truc.
Enfin bon, c'est pas simple le positionnement en CSS :? :lol:
hdbx
Arias
Messages : 5
Inscription : 14 sept. 2005, 21:10

Message par hdbx »

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
arno.
Varan
Messages : 1347
Inscription : 19 août 2004, 12:26

Message par arno. »

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.
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

Dommage pour la sémantique alors qu’on avait bien là une liste de liens.
« La vie d’un geek est un combat perpétuel contre l’imperfection »
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Commeçatuasunesuitedelienslesunsderrièrelesautresnonséparés ? :?
Invité

Message par Invité »

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.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

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 :lol: [/quote]
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité