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 :

Faire un div arrondi en CSS


Sujet :

CSS

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2008
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2008
    Messages : 20
    Par défaut Faire un div arrondi en CSS
    Bonjour,

    Je souhaite faire des bords arrondis a mon div:

    J'ai copié/collé le code de ce site (pour ne pas me casser la tete) mais il ne fonctionne pas sur mon div. Quelqu'un aurait la solution?

    http://www.html.it/articoli/nifty/index.html


    Code CSS : 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
     
     
    #corps 
    { 
    color: red; 
    font-size: 14 px; 
    font-family: "Comic Sans MS"; 
    border: none; 
    width: 800px; 
    height: 400px; 
    margin-top: 200px; 
    margin-left: 225px; 
    position: absolute; 
    padding-top: 10px; 
    padding-left: 10px; 
    overflow: auto; 
    background-color: #FF9900; 
    } 
     
    .rtop, .rbottom{display:block} 
    .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden} 
    .r1{margin: 0 5px} 
    .r2{margin: 0 3px} 
    .r3{margin: 0 2px} 
    .r4{margin: 0 1px; height: 2px}

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
     
    <div id="corps"> 
    <b class="rtop"> 
    <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> 
    </b> 
    <!--content goes here --> 
    <b class="rbottom"> 
    <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> 
    </b> 
    </div>

    Qu'est-ce qui ne va pas?? Y'a t-il des erreurs? parce que cela ne marche pas...

    Merci de vos reponses

  2. #2
    Membre chevronné Avatar de desert
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    414
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mai 2007
    Messages : 414
    Par défaut
    Salut,
    tu as simplement oublié de spécifier les couleurs :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .rtop, .rbottom {
        display: block;
        background-color: #FFF;
    }
    .rtop *, .rbottom * {
        display: block; 
        height: 1px; 
        overflow: hidden;
        background-color: #F90;
    }
    La prochaine fois, pense à écrire ton code dans la balise CODE.

  3. #3
    Membre chevronné Avatar de GihefBey
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    366
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Avril 2006
    Messages : 366
    Par défaut
    Bonjour,

    Et puis
    It fails on element with fixed height, or with padding.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #corps { 
      color: red; 
      font-size: 14px; /*         sans espace */
      font-family: "Comic Sans MS"; 
      border: none; 
      width: 800px; 
      /*height: 400px; */
      margin-top: 200px; 
      margin-left: 225px; 
      position: absolute; 
      /*padding-top: 10px; 
      padding-left: 10px; */
      overflow: auto; 
      background-color: #FF9900; 
      }

    -

  4. #4
    Membre confirmé
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    moi j'utilise les effets scriptaculous j'ai donc ceci en en-tête :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
    <script src='/js/scriptaculous/lib/prototype.js' type='text/javascript'></script>
    <script src='/js/scriptaculous/src/scriptaculous.js' type='text/javascript'></script>
    Mais comme toi je voulais avoir des calques arrondi.. ..j'ai trouvé un "addon" pour scriptaculous http://nurey.com/corners.html. J'ajoute donc ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <script src='/js/nurey_on_scriptaculous/corners.js' type='text/javascript'></script>
    puis dans mon code (ce n'est pas une erreur, l'appel javascript est bien juste après le div) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <div id="div_a_arrondir">
    blabla
    </div>
    <script type='text/javascript'>
    new Effect.Corner('div_a_arrondir', '12px')
    </script>
    Ce code m'évite de me casser la tête juste pour arrondir les bords (on perd déjà assez de temps avec le CSS). Note : La prochaine mouture CSS devrait inclure les bord arrondis (j'ai peur quand même..).

    Attention, le code précédent triche (dailleurs comme les autres) pour simuler les bords arrondis :
    le coin arrondi n'est pas réellement transparent. En réalité il est coloré avec la couleur du Background parent. Par exemple si l'on place le coin sensé être transparent sur un élément, il sera masqué avec la couleur background.

    Conséquence : éviter les gros arrondis.

    En espérant t'avoir aidé.. (cliquer "résolu" dans ce cas).

  5. #5
    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 : 39
    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
    Par défaut
    Bonjour,

    Citation Envoyé par gomodo Voir le message
    Ce code m'évite de me casser la tête juste pour arrondir les bords (on perd déjà assez de temps avec le CSS). Note : La prochaine mouture CSS devrait inclure les bord arrondis (j'ai peur quand même..).
    C'est sûr, sauf que tu inclus toute une librairie pour faire juste des simples coins arrondis ...

    Pourquoi ne pas faire des simples images ?
    Je te propose :
    http://www.developpez.net/forums/d60...i-css-sous-ie/
    http://www.developpez.net/forums/d54...oins-arrondis/

  6. #6
    Membre chevronné Avatar de desert
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    414
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Mai 2007
    Messages : 414
    Par défaut
    Citation Envoyé par Macmillenium Voir le message
    C'est sûr, sauf que tu inclus toute une librairie pour faire juste des simples coins arrondis ...
    Pourquoi ne pas faire des simples images ?
    +1
    C'est un peu comme utiliser une voiture pour écraser une fourmi.
    De plus, si le JS est désactivé... C'est un peu comme utiliser une voiture qui n'existe pas pour écraser une fourmi.

    EDIT: A prendre au second degré bien entendu !

  7. #7
    Membre confirmé
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Par défaut
    premier lien interessant, merci.

    Disons que dans mon cas, souvent on commence a chercher des effets graphique soigné (des bord arrondis par exemple..), mais on ne sait pas avec quoi ça va se terminer (effet de masquage, fondus, etc). je préfère tout de suite utiliser des solutions de type boite à outils qui permettent toute sorte effets avec un minimum de code sur la page.

    (le javascript désactivé... j'aimerais connaitre le nombre de navigateur qui le désactive)

Discussions similaires

  1. [CSS 3] Centrer balise div et créer des coins arrondis en CSS et sans images
    Par scoubi77 dans le forum Mise en page CSS
    Réponses: 17
    Dernier message: 10/12/2011, 18h13
  2. faire des div arrondis
    Par woresa dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 02/11/2009, 22h02
  3. [CSS] Comment faire un div qui ne s'étend pas ?
    Par tuxout dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 16/08/2006, 14h23
  4. Faire des coins arrondi avec un DIV
    Par dessinateurttuyen dans le forum Balisage (X)HTML et validation W3C
    Réponses: 10
    Dernier message: 02/08/2006, 09h33
  5. aide pour faire une Div
    Par nebil dans le forum Mise en page CSS
    Réponses: 21
    Dernier message: 31/07/2006, 18h51

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