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 :

Arrondir les angles d une DIV


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 250
    Par défaut Arrondir les angles d une DIV
    Bonjour

    J essaye d arrondir les angles d un element mais il se passe que 3 angles sont arrondis


    Nom : 1.jpg
Affichages : 250
Taille : 63,9 Ko


    mon code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .head{
     
     width:70%;
     background: #909090;
     margin: auto;
    border-radius:12px;
    margin-top: 20px;
    margin-bottom: 25px;
     
        }
    mon ami me donne comme element de reponse ca:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    border-radius:12px 12px 12px 12px;
    mais rien n y fait

    Pourrais-je avoir une explication?

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 525
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 525
    Par défaut
    Bonjour,

    Vous utilisez un pseudo :before pour le .head ?

  3. #3
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 250
    Par défaut
    Non
    voici mon code css:

    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
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    *,*::before,*::after{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
     
     
     
     
    body{
        background-color: #696969;
        cursor:url("images/42.svg"),move;
        }
     
    header{
            display:flex;
            justify-content: flex-start;
     
        }
        .head{
          display: inline;
            width:85%;
            height: 5%;
            background:#909090;
            margin: auto;
           border-radius:12px;
           margin-top: 20px;
           margin-bottom: 25px;
           box-shadow: 10px 10px 10px black;
               }  
     
          .day{
           padding: 10px 10px;
          }     
     
      .loupe{
        margin-left:95px;
        position:relative;
     
      } 
     
    .reload{
        position:relative;
        top: 0px;
        right: 0px;
     
    }
     
    .close{
        position:relative; 
        bottom: 0px;
        right: 0px;
    }
     
     
        .container{
     
            display: flex;
     
        }
     
        .cluster{
     
            flex:2;
            order:2;
            min-height: 80vh;
            flex-direction: column;
            background-color:#C0C0C0;
            height:65%;
           padding: 1% 1%;
           border-radius: 12px;
           box-shadow: 12px 12px 12px black;
           margin-bottom: 20px;
     
        }
     
        .left_sidebar{
        display:flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: center;
            flex: 1;
            order:1;
            background-color:#C0C0C0;
            height:7%;
            width:5%;
            border-radius: 12px;
           box-shadow: 12px 12px 12px black;
           margin-left: 8%;
           margin-right:1%;
           padding: 8px;
     
        }
     
        .right_sidebar{
            display:flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        align-items: center;
            flex: 1;
            order:3;
            background-color:#C0C0C0;
            height:7%;
            width:5%;
            border-radius: 12px;
           box-shadow: 12px 12px 12px black;
           margin-right:8%;
           margin-left:1%;
           padding: 8px;
        }
     
        .pictures{
            display: block;
        }
     
    }
     
    .container{
     
        display: flex;
     
    }
     
    .cluster{
     
        flex:2;
        order:2;
        min-height: 80vh;
        flex-direction: column;
     
    }
     
    .left_sidebar{
     
        flex: 1;
        order:1;
    }
     
    .right_sidebar{
        flex: 1;
        order:3;
    }
     
    .pictures{
        display: block;
    }

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 525
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 525
    Par défaut
    Ben si, la première ligne de votre code CSS applique les pseudos :before et :after sur tous les éléments html.

    Essayez de redéfinir le pseudo before sur le .head ou bien l'appliquer un overflow:hidden.

Discussions similaires

  1. Arrondir Les angles d'une image
    Par Flopp dans le forum C#
    Réponses: 11
    Dernier message: 21/05/2009, 10h40
  2. Modifier les propriétés d'une div au survol d'une autre
    Par umeboshi dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/09/2008, 18h02
  3. Arrondir les angles d'un widget gtk.Entry()
    Par Mysti¢ dans le forum GTK+ avec Python
    Réponses: 0
    Dernier message: 19/06/2008, 10h25
  4. Désactiver les CSS dans une div
    Par mouchkar dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 14/05/2008, 12h20
  5. Peut-on arrondir les angles d'un fieldset ?
    Par leroidje dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 07/05/2007, 09h53

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