[Résolu] Liste + elements en float

Salut,

Je souhaite réaliser une liste non ordonnée avec pour chaque élément, un nom avec une image qui se situera à gauche et 2 liens qui se situeront à droite. Jusqu'ici pas de problème. Voici le code html d'un li :

<ul id="menu">
 <li>
  <div class="nom">
   <img src="..." alt="..." />
   Nom de l'élément
  </div>
  <div class="boutons"
   <a href="..." title="...">Modifier</a>
   <a href=".." title="...">Supprimer</a>
  </div>
 <li>
</ul>

J'aurais aimé tout d'abord savoir si cela vous paraissait syntaxiquement correcte.
Ma deuxième question concerne la mise en forme. Voici ma feuille de style pour la liste :

ul { list-style: none; margin: 0; padding: 0; }

li {
  border: 1px solid #d9e5f6;
  background: #f4f7fb;
  height: 26px;
  padding-top: 8px;
  margin: 2px 24px;
}

li .nom {   
  float: left;
  margin-left: 8px;
  font-weight: bold;
}

li .boutons a { 
  float: right;
  margin-right: 8px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

Mon problème vient du fait que ma liste n'a pas la même apparance sous firefox et ie. En effet, il y a un espace plus important entre chaque li sous IE, mais je ne sais pas d'où cela vient.
Si quelqu'un pouvait donc m'aider et me conseiller sur les style à appliquer ca serait vraiment sympa.

Merci d'avance pour votre aidre .
Modifié par ymhotepa (12 Apr 2006 - 16:56)

Bonjour ymhotepa,

ymhotepa a écrit :

Mon problème vient du fait que ma liste n'a pas la même apparance sous firefox et ie. En effet, il y a un espace plus important entre chaque li sous IE, mais je ne sais pas d'où cela vient.
Si quelqu'un pouvait donc m'aider et me conseiller sur les style à appliquer ca serait vraiment sympa.

Cette réponse de la faq ne répond-elle pas à ton problème, par hasard ?

1) Je te proposerai une écriture un peu épurée:

 
<ul id="menu">
 <li>
   Nom de l'élément
   <a href="..." title="...">Modifier</a>
   <a href=".." title="...">Supprimer</a>
 </li>
</ul>

Cette écriture résulte d'un petit traitement anti "divite"

Tu places ton image en arrière plan comme expliqué à la fin de cet article:
http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html
dans le chapitre "Custom bullet" (à la fin de l'article). Il faut placer un padding-left qui laisse la place à l'image.

Tu n'as pas besoin de class pour ta mise en forme. Dans ta feuille de style, tu peux écrire:

ul.menu li {
padding-left: 20px;  /* la valeur 20 est un exemple */
/* tu as déjà spécifié list-style: none; */
background: url(ton-image.png) no-repeat 0 50%;
  }

ul.menu li a {
  display: inline;
  padding-left: 10px;  /* 10px est un exemple */
  } 

Tout cela est bien sûr à affiner.


2)

Vero a écrit :
Cette réponse de la faq ne répond-elle pas à ton problème, par hasard ?

Je ne crois pas, je pense qu'il s'agit d'un cas où IE double les marges associées à un élément flottant du côté où cet élément flotte: quand ymhotepa écris "float: left; margin-left: 8px;", IE va appliquer "margin-left: 16px;". Quand ymhotepa écris: "float: right; margin-right: 8px;" IE va appliquer "margin-right: 16px;":
http://positioniseverything.net/explorer/doubled-margin.html

@mitiés

Philippe (phdm)
Modifié par phdm (10 Apr 2006 - 11:31)

Salut,

Merci à vous deux pour vos réponse.

@ Véro > Malheureusement, cet article ne répond pas à mon problème car la différence entre IE et FF se situent au niveau de l'espacement vertical entre les li.
Voici une image de mon problème :


@ phdm > La version html que tu me donnes était celle que j'avais créé en premier mais elle pose quelques problèmes. En effet, pour l'image qui se situe à côté du nom, ce n'est pas une image fixe, elle varie dynamiquement en fonction d'un paramètre présent dans une bdd. Il me faut donc la possibilité de la modifier à la volé.
Le second problème est que si je ne met pas les liens dans un bloc je ne pourrais pas les alignés à droite de mon li.
Voici un exemple de ce que je voudrais réaliser :


Pour le doublement de marge, je n'y avais pas pensé. Je vais jeté un coup d'oeil pour voir si ca vient de là.

En tout cas, un grand merci à vous deux .
Modifié par ymhotepa (10 Apr 2006 - 12:16)

Dans ce cas, pourquoi affecter le float:right aux liens et pas simplement au div ?

  li .boutons  { 
  float: right;
  margin-right: 8px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

Modifié par Vero (10 Apr 2006 - 12:21)

Véro a écrit :
Dans ce cas, pourquoi affecter le float:right aux liens et pas simplement au div ?

Oui.
ou bien:

 ul.menu li a {
  display: block;
  float: right;
  } 

Les 2 éléments "a" devront alors précéder le nom de l'élément (et celui de l'image).

Si cela te pose problème, tu insères le nom de ton élément dans une balise <p></p> telle que:

 
ul.menu li p {
  float: left;
  } 
ul.menu li p img {
  display: inline;
  } 

et tu positionnes les éléments dans ton code dans l'ordre que tu veux.

Tu notes que si un élement flotte et pas l'autre, tu peux avoir un problème d'alignement vertical, les marges verticales fusionnent dans le flux normal.

@+

Philippe (phdm)
Modifié par phdm (10 Apr 2006 - 12:50)

Tu essayer de retirer les div, mettre tes link en block et aligner a droite ton texte
Pour les espace verticaux sous IE tu rajoute _height: 1%; zoom: 1 ;

Ca devient :

ul a { 
	_height: 1%; zoom: 1; 
	display: block;
	text-align: right;

}

A+
Modifié par gege71 (10 Apr 2006 - 13:49)

Vero a écrit :

Dans ce cas, pourquoi affecter le float:right aux liens et pas simplement au div ?

C'est ce que j'ai fait, mais j'ai fait une erreur en mettant mon code dans mon message , mais c'est bien sur le bloc boutons que j'applique la propriété float.

@ phdm > Ta première solution (les éléments a précédants le nom) était une des solutions que j'avais envisagé, qui fonctionne très bien mais qui m'oblige comme tu le dis à inverser les éléments (a et nom) dans le code. Je vais donc essayer ta deuxième solution pour voir. Par contre, quelle différence y a t il entre le fait d'utiliser un bloc divpour englober le nom et l'image plutot qu'un bloc p ?

@ gege71 > Je ne suis pas sûr que le text-align fonctionne sur des éléments de type bloc. Mais je vais quand même essayer. Par contre, je ne comprend pas très bien l'utilisation de zoom:1;. Je suppose que height: 1%; permet de corriger le bug de texte qui disparait quand un élément est flottant, c'est ca?

Merci à vous pour votre aide. Je vais essayé vos solution et vous tiendrais au courant .

Et en jouant avec text-align : c'est une suggesion comme cela (je n'ai pas testé)

ul { list-style: none; margin: 0; padding: 0; }

li {
  border: 1px solid #d9e5f6;
  background: #f4f7fb;
  height: 26px;
  padding-top: 8px;
  margin: 2px 24px;
  text-align : right;

}

li .nom {   
  text-align: left;
  margin-left: 8px;
  font-weight: bold;
}

li a { 
  margin-right: 8px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}

<ul id="menu">
 <li>
  <div class="nom">
   <img src="..." alt="..." />
   Nom de l'élément
  </div>

   <a href="..." title="...">Modifier</a>
   <a href=".." title="...">Supprimer</a>
 </li>
</ul>

ymhotepa a écrit :

Par contre, je ne comprend pas très bien l'utilisation de zoom:1;. Je suppose que height: 1%; permet de corriger le bug de texte qui disparait quand un élément est flottant, c'est ca?

Je ne connais pas exactement le pourquoi du comment, mais les deux servent a corriger l’espace vertical dans les liste, height: 1%; serait pour IE5 et IE 6, zoom:1; serait pour IE 6 et 7

J'ai fait un essai avec :

#menu { list-style: none; margin: 0; padding: 0; }
#menu li {
  border: 1px solid #d9e5f6;
  background: #f4f7fb;
  height: 26px;
  padding-top: 8px;
  margin: 2px 24px;
}

#menu img {   
  float: left;
  margin-left: 8px;
  font-weight: bold;
}

#menu a {
	float: right;
	margin-right: 8px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	display: block;
}

<ul id="menu">
	<li>
		<a href=".." title="...">Supprimer</a>
		<a href="..." title="...">Modifier</a>
		<img src="..." alt="" />
		Nom de l'élément
	</li>
	<li>
		<a href=".." title="...">Supprimer</a>
		<a href="..." title="...">Modifier</a>
		<img src="..." alt="" />
		Nom de l'élément
	</li>
</ul>

OK sou FF et IEk, et je n'ai aucune erreur

Par contre tu a une erreur dans ton exemple tu ne ferme pas ton <li> mais tu en ouvre un autre

A+
Modifié par gege71 (10 Apr 2006 - 21:48)

ymhotepa a écrit :
Par contre, quelle différence y a t il entre le fait d'utiliser un bloc divpour englober le nom et l'image plutot qu'un bloc p ?

Rien de fondamental. Cela me semble plus propre du point de vue sémantique. L'important est plus d'être au clair sur ce qui est "bloc" et "en ligne" (une image étant soit l'un soit l'autre par défaut suivant le navigateur.

Mon souci était aussi de simplifier le balisage au maximum.

ymhotepa a écrit :
Par contre, je ne comprend pas très bien l'utilisation de zoom:1;. Je suppose que height: 1%; permet de corriger le bug de texte qui disparait quand un élément est flottant, c'est ca?

Attribuer height: 1% à IE s'appelle le "holly hack". Cela permet de forcer la valeur d'une propriété interne à IE appelée "haslayout" à true, ce qui fait disparaître toutes sortes de problèmes.

Voir les liens sur le "haslayout" à partir de cet article:
http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage
et de ce lien: http://css-discuss.incutio.com/?page=HasLayout
(le billet d'IEBLOG contient le lien vers l'article consacré au "holly hack").
Enfin: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/haslayout.asp

height: 1% est déclaré par Microsoft comme un bug, donc IE7 le corrigera peut être. zoom: 1 est une propriété spécifique IE qui force également le haslayout à true, mais ne marche que depuis IE5.5, et devrait continuer à le faire sous IE7.

Je suis par ailleurs partisant d'appeler tous ces éléments depuis des commentaires conditionnels plutôt que d'utiliser des hacks condamnés à disparaître selon Microsoft (via IEBLOG)
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

@mitiés

Philippe (phdm)
Modifié par phdm (12 Apr 2006 - 09:06)

Re salut,

phdm a écrit :

 ul.menu li a {
  display: block;
  float: right;
  } 

Les 2 éléments "a" devront alors précéder le nom de l'élément (et celui de l'image).

Ceci marche très bien sous firefox mais pose le problème comme tu l as dit de décalage vertical sous IE. En effet, le nom et l'image se situe plus bas que les liens. Pour résoudre ce problème, il faut que positionne le nom et l'image en float: left pour éviter la fusion de marge.

gege71 a écrit :

Tu essayer de retirer les div, mettre tes link en block et aligner a droite ton texte
Pour les espace verticaux sous IE tu rajoute height: 1%; zoom: 1 ;

Avec cette technique les liens sont bien aligné à gauche mais ils se superposent l'un sur l'autre sous firefox et se mettent l'un sous l'autre sous IE (application du display: block).

Vero a écrit :

Et en jouant avec text-align : c'est une suggesion comme cela (je n'ai pas testé)

Sous firefox, les liens se situent hors de l'élément li alors que sous IE ils sont bien présent dans le li mais ne sont pas alignés verticalement avec le nom .

@gege71 > Tout marche parfaitement, merci beaucoup . J'ai juste modifier 2-3 trucs. Mon problème donc résolu.

@ phdm >Merci pour tes liens. Je ne savais pas qu'on pouvait aussi résoudre le problème de "haslayout" avec la propriété zoom. D'habitude, j'utilise height: 1%.

Voici donc le code final :

#menu { list-style: none; margin: 0; padding: 0; }

#menu li {
  border: 1px solid #d9e5f6;
  background: #f4f7fb;
  margin: 2px 24px;
  padding: 8px 0;
}

ul#menu li img {
  vertical-align: middle;
  margin-left: 8px;
}

ul#menu li a {
	float: right;
        display: block;
	margin-right: 8px;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}

<ul id="menu">
  <li>
    <a href="#" title="Modifier">Modifier</a>
    <a href="#" title="Supprimer">Supprimer</a>

    <img src="info-note.png" alt="&nbsp;" />
    Nom de l'élément
  </li>
</ul>

à vous tous pour votre aide.
Modifié par ymhotepa (12 Apr 2006 - 17:03)