28234 sujets

CSS et mise en forme, CSS3

Disparition puce des listes avec float:left

Bonjour,

J'essaie de mettre une liste sur plusieurs colonnes pour cela j'ai mis mes li avec un float:left et un width:200px

J'obtiens bien plusieurs colonnes, mais sous IE les puces ont disparus alors que sous FF c'est OK

J'ai mis un Exemple ici

Voici le code utilisé


    <style type="text/css">
        li {
            float: left;
            width: 200px;
        }
    </style>




    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
    </ul>


Comment faire pour que les puces apparaissent aussi sous IE ?
Salut,

Je te conseil de jeter un petit coup d'oeil dans la FAQ du site à la rubrique : Décalages, marges, bugs divers.

Tu devrais trouver des pistes.
J'ai déjà regarder dans la FAQ et je n'ai rien trouvé qui puisse m'aider Smiley decu

De plus je n'arrive pas à trouver de bon mot clés qui décrivent mon problème, pas évident de faire une recherche là dessus Smiley murf

Merci quand même Smiley smile
Je n'ai pas le temps de chercher en profondeur mais j'ai eu le même effet en chipotant un peu.
Tu as essayé avec des pourcentages au lieu de pixel? Joue aussi avec les padding et margin, peut-être que ca peut jouer?!


P.S.:

J'ai essayé un peu de chercher la solution mais pas encore trouvé. C'est sans doute dû au "float:left"

En attendant, si tu fais de cette manière, ta puce est sous forme d'image et tu peux la rendre donc plus agréable à l'oeil(un tour chez photoshop s'impose Smiley smile )


ul{
margin:0;
padding:0;
}
		
li {
float: left;
width: 200px;
padding:0 0 0 15px;
margin:0;
background: url(/images/puce.jpg) center left no-repeat; 
}


En mettant l'image en background, attention à mettre un padding-left pour qu'elle ne soit pas derrière le texte dans le li
Modifié par Oryo (13 Sep 2007 - 12:26)
Bonjour,
tu n'as malheureusement pas de solution à ma connaissance pour pallier à
ce problème. Je te conseil donc (si tu en a la possibilité) de diviser ta liste en
plusieurs ul imbriqués dans des div flottant.
Modifié par Hermann (13 Sep 2007 - 13:31)
Oui c'est lorsque je met mes li en float que les puces disparaissent.

J'avais aussi pensé à la solution de mettre la puce via un background mais je voulais m'assurer qu'il n'existait pas une solution magique pour corriger ce bug Smiley smile

Hermann, je trouve que l'idée de découper la liste n'est pas une bonne solution, car d'une part cela ne reproduira pas le meme comportement, c'est à dire un nombre de colonne variable en fonction de la largeur de l'écran, et ensuite en terme de sémantique c'est vilain Smiley langue , modifier la structure du code HTML pour du design ... Smiley cligne

Merci quand même à tous les deux.
CyrilCS a écrit :

Hermann, je trouve que l'idée de découper la liste n'est pas une bonne solution, car d'une part cela ne reproduira pas le meme comportement, c'est à dire un nombre de colonne variable en fonction de la largeur de l'écran
Ok

CyrilCS a écrit :

et ensuite en terme de sémantique c'est vilain Smiley langue , modifier la structure du code HTML pour du design ... Smiley cligne


Smiley rolleyes Non ce n'est pas "vilain", sinon je ne t'aurais pas donné cette solution... Les div peuvent parfois pallier à certaines limitations, quand cela n'est pas faisable autrement. C'est seulement que cela ajoute du balisage (non sémantique justement > div) et que cela divise ta liste.
Modifié par Hermann (13 Sep 2007 - 14:20)
Sujet clos
Aller à