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

HTML Discussion :

coins arrondis=image noire


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut coins arrondis=image noire
    Bonjour,

    je souhaite réaliser des coins arrondis ; j'ai pour cela utiliser ce tuto : http://www.astanos.ch/fr/blog/2-css-...ille-fixe.html

    Mon code est le suivant :
    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
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    <!DOCTYPE html>
    <html>
      <head>
        <meta content="text/html; charset=windows-1252" http-equiv="content-type">
        <title></title>
        <style>#bloc {
    width: 100%;
    background-color: transparent;
            background:url("/images/5.gif") repeat-x left top;
    }
     
    #bloc .bord_bas {
    background:url("/images/7.gif") repeat-x left bottom transparent;
    }
     
    #bloc .haut_droite {
    display: block; 
    float: right; 
    width: 46px; //remplacer XX par la largeur de votre bord
    height: 45px; //remplacer YY par la hauteur de votre bord
    background:url("/images/2.gif") no-repeat right top transparent;
    }
     
    #bloc .haut_gauche {
    display: block; 
    width: 46px; //remplacer XX par la largeur de votre bord
    height: 45px; //remplacer YY par la hauteur de votre bord
    background:url("/images/1.gif") no-repeat left top transparent;
    }
     
    #bloc .bord_gauche {
    background:url("/images/8.gif") repeat-y left top #000000; //la couleur correspond à la couleur de l'élément n°9
    }
     
    #bloc .bord_droit {
    background:url("/images/6.gif") repeat-y right top transparent;
    }
     
    #bloc .bas_gauche {
    display: block; 
    width: 46px; //remplacer XX par la largeur de votre bord
    height: 45px; //remplacer YY par la hauteur de votre bord
    background:url("/images/3.gif") no-repeat left top transparent;
    }
     
    #bloc .bas_droit {
    display: block; 
    float: right; 
    width: XXpx; //remplacer XX par la largeur de votre bord
    height: YYpx; //remplacer YY par la hauteur de votre bord
    background:url("/images/4.gif") no-repeat right top transparent;
    }</style>
      </head>
      <body>
    <div id="bloc">
     
    <div class="bord_bas">
    <div class="haut_droite"></div>
    <div class="haut_gauche"></div>
    <div class="bord_gauche">
    <div class="bord_droit">
            <h2>Lorem ipsum</h2>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
              vulputate laoreet urna. Integer magna. Donec facilisis lectus sed
              quam. Curabitur sit amet lacus id lacus facilisis venenatis. </p>
    </div>
    </div>
    <div class="bas_droit"></div>
    <div class="bas_gauche"></div>
    </div>
     
    </div>
     
     
     
      </body>
    </html>
    Mais au lieu de placer le texte dans un cadre aux coins arrondis, ça crée une image noire ; pourquoi ?

  2. #2
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Et border-radius plutôt que d'utiliser un procédé vieux comme Hérode.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour Laurent,
    je n'arrive pas à croire ce que je lis : tu utilises un tuto daté de... 2008 !!!

    Il serait grand temps que tu APPRENNES les "bonnes pratiques" RECENTES !
    Et/ou que tu LISES des tutos et/ou bouquins RECENTS.

    => Les bordures en CSS3 (tu aurais pu/dû faire TOI-MEME une recherche sur DVP !)
    => http://www.w3.org/TR/css3-background/#the-border-radius
    => CSS border radius generator for lazy people

    @rodolphebrd : Je ne suis même pas sûr qu'Hérode était né quand ce tuto a été écrit...
    Il date plutôt de la jeunesse de Mathusalem !
    Dernière modification par Invité ; 25/07/2013 à 15h12.

  4. #4
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 493
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 493
    Billets dans le blog
    1
    Par défaut
    C'est en faisant une recherche sur DVP que je suis tombé sur ce vieux tuto. Et border-radius ne marche pas sous IE8 (alors que ça marche sous Firefox) ni aucun des exemples de http://debray-jerome.developpez.com/...dures-en-css3/...C'est pourquoi je cherche autre chose....

  5. #5
    Invité
    Invité(e)
    Par défaut
    Dans ce cas, fais une recherche Gogole sur : "border radius hack ie"
    On trouve notamment :
    => Hack CSS3 pour IE6, IE7 et IE8 (arrondie et ombre)
    => CSS Rounded Corners In All Browsers (With No Images)

    Cela dit, il s'agit ici d'un effet esthétique.
    On peut aussi très bien s'en passer sur IE(<9)

    Inutile donc de se prendre la tête, et d'alourdir (tout aussi inutilement) son code...

  6. #6
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    jreaux62 d'autant que IE8 c'est 8% environ d'utilisateurs en Europe.

Discussions similaires

  1. Cadres à coins arrondis à partir d'images
    Par Squalthor dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 12/05/2011, 18h04
  2. Cadre avec coins arrondis sans image
    Par stefsas dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 26/04/2010, 12h52
  3. Lien en image avec coin arrondi
    Par yooyoo dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 27/01/2010, 23h42
  4. Image avec coins arrondis
    Par cjacquel dans le forum MFC
    Réponses: 6
    Dernier message: 08/05/2006, 21h20
  5. [CSS] Tableau aux coins arrondis (Sans images)
    Par FrankOVD dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 01/12/2005, 10h45

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