Aller au contenu

Probleme largeur <li>


maxx_psy

Sujets conseillés

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 !!

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...