petite question rapide, div arrondi?

Fabious62 · Message par **Fabious62** » 22 mai 2007, 15:12

Bonjour,

Alors voilà j'aimerais avoir des blocs <div> arrondis pour donner + d'effet à mon site !

Quel commande rentré dans les styles ccs ?

J'ai cherché je trouve pas

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

jpbardiau · Message par **jpbardiau** » 22 mai 2007, 17:43

Pour arrondir les coins :

Code : Tout sélectionner

{ -moz-border-radius: 10em;
}

10em est un exemple, on pourrait mettre à la place 15px etc.
Fonctionne uniquement avec les navigateurs gecko.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

HP · Message par HP » 22 mai 2007, 17:58

existe aussi pour khtml

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.4pre) Gecko/20070426 Firefox/2.0.0.4pre (Mac Community Build, ElFurbe)

Mongo Bob · Message par **Mongo Bob** » 23 mai 2007, 00:50

Pour être compatible partout, tu ne peux que mettre des images de coins arrondis en fond de quatre div en css, dans les quatre coins du div principal.
html :

Code : Tout sélectionner

<body>
<div id="divprincipal">
      <div id="divhautdroit"></div>
       <div id="divhautgauche"></div>
C'est ici le div principal :  Lorem ipsum dolor bla bla bla patati patata... Images etc...
        <div id="divbasdroit"></div>
        <div id="divbasgauche"></div>
</div>
</body>

css :

Code : Tout sélectionner

body {
background-color :#999999
}
#divprincipal {
background-color :#ffffff;
}
#divhautdroit {
  background-repeat: no-repeat;
  background-position: right top;
  height: 40px;
  width: 40px;
  float: right;
  background-image: url(img/motifhautdroit.png);
}
#divhautgauche {
  background-repeat: no-repeat;
  height: 40px;
  width: 40px;
  background-image: url(img/motifhautgauche.png);
}
#divbasdroit {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: right bottom;
  float: right;
  background-image: url(img/motifbasdroit.png);
}
#divbasgauche {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-image: url(img/motifbasgauche.png);
}

4 images de coins arrondis adéquats -les dimensions et couleurs sont là pour l'exemple- dont les codes couleurs sont identiques à ceux des conteneurs #divprincipal et <body> pour donner l'illusion visuelle des coins.
Par exemple, ici c'est des images pour un div principal au fond blanc (#ffffff) dans un <body> au fond gris (#999999), les gris et blancs ont les mêmes codes bien sûr, adaptes avec tes couleurs et dimensions à toi.

Les images doivent avoir les mêmes dimensions que les divs qui les contiennent. Le div haut gauche n'a pas besoin de background-position pour son image et lui et le div bas gauche n'ont pas besoin de float:left, enfin, ça dépend aussi de si le div principal est en float ou pas, faut tâtonner, après tout...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Fabious62 · Message par **Fabious62** » 23 mai 2007, 11:29

Merci pour vos réponses,

Je vais donc essayer de créer mes propres "angles"

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Geckozone

petite question rapide, div arrondi?

petite question rapide, div arrondi?

Qui est en ligne ?