Probleme largeur <li>

maxx_psy · 5 Octobre 2005

Bonjour a tous et a toutes !!

Voila j'ai un petit souci sur un menu horizontal css.

Le contenu texte du menu est dynamique, il n'a pas de largeur précise, et ce que je voudrais faire c'est adapter la largeur de mes cellules <li> à la largeur du texte.

Le petit script ci dessous fonctionne sous FF mais pas sous IE :gueule:

<!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>
<title>essai largeur</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#ssmenu{
margin: 0px;
margin:0px;
font :1em arial;
color:#000;}

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */}

#ssmenu li {
float:left;
/* MON PROBLEME EST ICI */
/* #################### */
width:auto;
/* #################### */}

#ssmenu a {
	border: 1px solid #000;
	height: 27px;
	display: block;
	text-align:center;}

-->
</style>
</head>

<body>
<ul id="ssmenu">
  <li><a href="">aaa</a></li>
  <li><a href="">aaaaaa</a></li>
  <li><a href="">aaaaaa aaa</a></li>
  <li><a href="">aaaaaa aaaaaa</a></li>
  <li><a href="">a</a></li>
  </ul>
</body>
</html>

Aidez moi please, le client est sous IE !

en plus je suis sur qu'il s'agit d'un truc tout con !!

MissMonde · 5 Octobre 2005

bonjour maxx_psy,

voilà ce que j'ai trouvé :

<head>
<title>essai largeur</title>
<meta http-equiv="Content-Type" content="text/html; 

charset=iso-8859-1" />
<style type="text/css">
<!--
#ssmenu{
margin: 0px;
margin:0px;
font :1em arial;
color:#000;}

ul {
list-style-type: none;
width:100%; /* précision pour Opera */}

#ssmenu li {

display:inline;/*remplace float:left;*/
/* MON PROBLEME EST ICI */
/* #################### */
width:auto;
/* #################### */}

#ssmenu a {
border: 1px solid #000;
height: 27px;
/*display:block; à enlever*/
text-align:center;}

-->
</style>
</head>

<body>
<ul id="ssmenu">
 <li><a href="">aaa</a></li>
 <li><a href="">aaaaaa</a></li>
 <li><a href="">aaaaaa aaa</a></li>
 <li><a href="">aaaaaa aaaaaa</a></li>
 <li><a href="">a</a></li>
 </ul>
</body>
</html>

- à la place de float:left, tu mets les li en display:inline

- tu enlèves le display:block des liens

si tu veux utiliser le float left, IE a besoin d'une largeur pour les liens (en plus du display: block);

source : livre de Raphaël Goetter "Css2 Pratique du design web" pages 168 et 169.

J'espère que c'est ce que tu voulais. Bonne continuation,

Martine

maxx_psy · 6 Octobre 2005

je teste et je te dis ça !

merci bcp!

maxx_psy · 6 Octobre 2005

C ok !! Merci miss monde!

Je mets mon code pour ceux que a peux interresser !

#ssmenu{
margin: 0px;
padding: 0px;
font :100 normal 9pt/22px "Book Antiqua";
text-transform: capitalize;
text-decoration: none;
color:#0000CC;
height:27px;
/*border:1px solid #000;*/
}

#ssmenu ul {
 padding: 0;
/*border-left: solid 1px;*/
list-style-type:none;
height: 27px;
width:100%; /*precision pour opera*/
}

#ssmenu li {
margin: 0;
padding: 0;
height: 27px;
float: left;
background-image:url(../images/menu/ssmenu-centre.gif);
}

#ssmenu a {
	margin: 0 0px;
	display: block;
	text-align: center;
	text-decoration: none;
	color:#0000CC;
}

#ssmenu a:hover a: active{
border: 1px solid #394C91;
background-color: red;
text-decoration:none;
color:#FFFFFF;
}

il peut etre allegé je pense, mais bon il fonctionne sous IE et FF

MissMonde · 7 Octobre 2005

De rien.

bonne continuation

Connexion

Probleme largeur <li>

Sujets conseillés

maxx_psy

MissMonde

maxx_psy

maxx_psy

MissMonde

Veuillez vous connecter pour commenter

Parcourir

Activité