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 :

Coin arrondi IE8 dans un compteur [CSS 2]


Sujet :

CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut Coin arrondi IE8 dans un compteur
    Bonjour

    j'utilise un comteur sur une liste ordonnée "ol" et je voudrais que les coins de l'élément qui affiche le comteur soient arrondis
    j'ai pour tester utiliser le fichier behavior: url(./images/PIE.htc);dans une balise div et cela fonctionne par contre dans la partie
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
     
    li:before
    {
    content:counter(repas);
    padding:0px 15px 6px 15px;
    margin-right:8px;
    vertical-align:top;
    background:#678;
    border-radius: 5px;
    behavior: url(./images/PIE.htc);
    font-weight:bold;
    font-size:0.8em;
    color:white;
    cela ne fonctionne pas j'ai toujours des angles droits
    Quelqu'un a -t-il réussi a mettre des arrondis dans un compteur ?
    Si oui peut-il me donner une solution
    Merci d'avance

  2. #2
    Membre à l'essai
    Profil pro
    Architecte infrastructure
    Inscrit en
    Avril 2009
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Architecte infrastructure

    Informations forums :
    Inscription : Avril 2009
    Messages : 9
    Points : 11
    Points
    11
    Par défaut
    Bonjour voici une petite aide

    border-radius est une propriété CSS3, finalisée (Candidate Recommandation depuis février 2011) et déjà tout à fait utilisable en production dans les navigateurs modernes. Elle permet de manière très intuitive d'arrondir un ou plusieurs angles d'un élément en indiquant la valeur de l'arrondi souhaité

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    il existe également, à défaut de support CSS3
    - Coins arrondis CSS
    - Créer des coins arrondis à l'aide de Sprites CSS

  4. #4
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut
    Merci pour vos réponses mais elles ne sont pas utilisables sur un compteur de liste !!!!!

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    à tout hasard, as tu essayé avec une background-image?

  6. #6
    Membre habitué Avatar de eckerdecker
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    134
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 134
    Points : 185
    Points
    185
    Par défaut
    Après un rapide check du css que tu as utilisé, qui selon ce que j'ai trouvé devrait fonctionner sur IE8, je dirai que ton problème vient surement de ton behavior.
    Le chemin vers PIE.htc doit être relatif au document auquel est liée ta feuille de style et non pas à la feuille elle-même comme tu le ferais pour un background-image.
    Vérifies déjà ça.
    Sinon vérifie que PIE.htc peut être utilisé dans les :before, les fonctionnalités de cette librairie reste, mine de rien, assez limitées.

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut
    bonjour
    comme précisé dans mon premier post je peut obtenir un Div avec coin arrondi avec les valeurs css suivantes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
     
     
    body
    {
    width:8.5in;
    background-color:#ccf;
    letter-spacing:.1em;
    font-family:times,serif;
     
    }
    div 
    {
    height:200px;
    background-color:#EEEEEE;
     
    }
    div.arrondi { 
    border-radius: 25px; 
    behavior: url(./images/PIE.htc);
    height:40px;
    padding-left:20px;
          }
     
     
    a
    {
    color:#000000;	
    }
    ol{
     
    counter-reset:repas;	
    }
    li
    {
    list-style-type:none;
    counter-increment:repas;
    margin-bottom:10px;
    }
     
    li:before
    {
    content:counter(repas);
    padding:0px 15px 6px 15px;
    margin-right:8px;
    vertical-align:top;
    background:#678;
    border-radius: 5px;
    behavior: url(./images/PIE.htc);
    font-weight:bold;
    font-size:0.8em;
    color:white;
    }
    j'ai bien un Div avec 4 coins arrondis
    mais pas dans la balise li

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    oui mais un li:before n'a pas de "consistance", c'est un ajout en début de li, donc le PIE.htc ne peut pas à mon sens s'appliquer dans ce cas.

    à tout hasard, as tu essayé avec une background-image?
    est ce que cela donne quelque chose ?

    As tester sur "tous" les navigateurs pour voir la(es) différence(s) de rendu.

  9. #9
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut
    bonjour
    je n'est pas tester le background-image car je ne sais pas comment faire !!!
    peut-tu me donner quelques explications pour utiliser cette propriété dans mon compteur de liste
    Merci

  10. #10
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2010
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2010
    Messages : 58
    Points : 110
    Points
    110
    Par défaut
    Salut

    Si les solutions présentées plus haut ne marchent pas, je te conseille d'utiliser roundies. C'est un petit script en javascript qui génère des coins arrondis sous IE, et qui a l'avantage d'être très léger (une petite recherche google te dira comment l'utiliser). Je l'utilise sur mon site, et avec IE 7 et 8, aucun problèmes

    Et pour IE 9 et les autres navigateurs, border-radius est maintenant suffisamment bien supportée pour être utilisée en production.

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    en reprennant depuis le début je me rend compte
    - que tu n'as pas mis de border dans ton li:before,
    - que la définition du rayon ne prend pas tous les navigateurs CSS3 en compte, il te faut donc mettre au moins...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    border : 1px solid blue; /* par exemple */
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;

  12. #12
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut
    bonjour
    Pour guilhem91 j'ai le même problème avec Roundies les coins de mon compteur de liste reste carré
    Pour répondre a NoSmoking voici le code Css modifié selon vos instructions
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
     
    body
    {
    width:8.5in;
    background-color:#ccf;
    letter-spacing:.1em;
    font-family:times,serif;
     
    }
    div 
    {
    height:200px;
    background-color:#EEEEEE;
     
    }
    div.arrondi { 
    height:50px;
    padding-left:20px;
    border-radius: 10px;
    behavior: url(./images/PIE.htc);
          }
    a
    {
    color:#000000;	
    }
    ol{
     
    counter-reset:repas;	
    }
    li
    {
    list-style-type:none;
    counter-increment:repas;
    margin-bottom:10px;
    }
     
    li:before
    {
    content:counter(repas);
    border: 1px solid blue; 
    padding:0px 15px 6px 15px;
    margin-right:8px;
    vertical-align:top;
    background:#678 url(./images/bg4.jpg);
    font-weight:bold;
    font-size:0.8em;
    color:white;
    border-radius: 10px;
    behavior: url(./images/PIE.htc);
     
    }
    et voici une image du résultat

    le Div est bien arrondi mais pas les éléments du compteur
    Images attachées Images attachées  

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Citation Envoyé par luchet Voir le message
    Pour répondre a NoSmoking voici le code Css modifié selon vos instructions
    il manque encore
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    sur quel navigateur testes tu ?

  14. #14
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut
    comme le sujet le précise je teste sous IE8

    les deux instructions précitées sont utiles pour les autres navigateurs

    A+

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    sur quel navigateur testes tu ?
    sorry il manque les S.
    les deux instructions précitées sont utiles pour les autres navigateurs
    dans ce cas les navigateurs sont des CSS3 inside, à l'exception de IE8 donc.

    La solution du background sur les OL reste, à mon sens la plus crossbrowser, en mettant une image de fond à bord arrondie.

  16. #16
    Membre régulier
    Profil pro
    Inscrit en
    Octobre 2002
    Messages
    209
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2002
    Messages : 209
    Points : 105
    Points
    105
    Par défaut
    Bonjour
    j'ai suivi votre conseil et j'ai placé une image a bords arrondis en background après plusieurs tâtonnements sur la taille de l'image et les paddings voici en pièce jointe le résultat:

    je pense que cela peut convenir Merci encore d'avoir pris le temps de me répondre
    Images attachées Images attachées  

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

Discussions similaires

  1. Coins arrondis dans des div
    Par francky74 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 02/03/2015, 18h01
  2. coins arrondis en IE8
    Par laurentSc dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/11/2013, 18h46
  3. coins arrondis sous IE8
    Par laurentSc dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 30/06/2013, 17h39
  4. script coins arrondis compatibilité IE8
    Par pierrot10 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 07/06/2010, 17h04

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