Page 1 sur 1
petite question rapide, div arrondi?
Publié : 22 mai 2007, 15:12
par Fabious62
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
Publié : 22 mai 2007, 17:43
par jpbardiau
Pour arrondir les coins :
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
Publié : 22 mai 2007, 17:58
par HP
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)
Publié : 23 mai 2007, 00:50
par Mongo Bob
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
Publié : 23 mai 2007, 11:29
par Fabious62
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