IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

list style position inside et margin left


Sujet :

Positionnement en CSS

  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut list style position inside et margin left
    voilà tout est dans le titre ou presque,

    j'ai des li avec une image en puce en position inside, masi j' n'arrive pas à leur coller un margin-letf, le texte des li se trouve directement collé à l'image sous IE
    je voudrais eviter d'avoir à bidouiller la puce pour lui coller du blanc à droite ...

  2. #2
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Points : 3 748
    Points
    3 748
    Par défaut
    Citation Envoyé par SpaceFrog Voir le message
    le texte des li se trouve directement collé à l'image sous IE
    Les valeurs de margin/padding appliquées par défaut sur l'élément UL différent d'un navigateur à l'autre.

    Fais un reset à 0 et applique plutôt un padding-left :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    ul { list-style-position:inside; margin:0; padding:0 0 0 100px; }

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 665
    Points
    66 665
    Billets dans le blog
    1
    Par défaut
    ça passe pas

    en fait je suis passé par :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    ul {list-style-position: outside;}
    li {margin-left:50px}

  4. #4
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Points : 3 748
    Points
    3 748
    Par défaut
    La solution que je recommande :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    ul { list-style-position:inside; list-style:none; margin:0; padding:0; }
    li { padding-left:50px; background:url(url-de-ton-img.gif) no-repeat left .4em; }

    Plus facile à maintenir.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Compatibilité list-style-position outside sur tablette
    Par thais781 dans le forum Mise en page CSS
    Réponses: 12
    Dernier message: 18/12/2013, 09h36
  2. En position absolute, doit-on faire margin-left ou left ?
    Par Alexandrebox dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 23/01/2010, 20h06
  3. Décalage dans IE avec list-style-image
    Par creatchy dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 01/02/2007, 13h54
  4. list-style-image riquiqui a l'impression
    Par speedev dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/10/2006, 13h57
  5. Problème margin-left sous IE !
    Par finalfx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 14/04/2006, 18h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo