Sujet Précédent Sujet Suivant

Code Bloc à bords arrondis

Fermé
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 - 17 août 2008 à 22:17
 gronobo - 17 janv. 2011 à 17:32
Bonjour,

Je voudrais savoir comment mettre en place le code pour bloc à angles arrondis qui est sur cette page : http://www.webdemark.fr/webdesign/css/angles-arrondis-en-css/

Avec la méthode "Avec la propriété CSS border-radius".

Merci !
A voir également:

11 réponses

Réponse 1 / 11
gronobo
17 janv. 2011 à 17:32
Pour ceux qui cherchent à faire des bloc aux bords arrondis qui puissent s'animer sans lag et donc sans CSS3 ( j'avoue c'est très spécifique ) je vous recommande ce tuto : http://gronoblog.blogspot.com/2010/12/bloc-de-taille-variable-en-css.html
3
Réponse 2 / 11
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 août 2008 à 22:21
http://www.roundedcornr.com/
0
Réponse 3 / 11
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 10
17 août 2008 à 22:22
Non me donner le code entier parce que je ne sais pas comment l'assembler.
Merci
0
Réponse 4 / 11
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 10
17 août 2008 à 22:23
Merci c'est super ton site !
Merci a vous deux !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 10
17 août 2008 à 22:30
Désolé je ne sais toujours pas comment placer le code css dans le site que tu m'as proposé ...
0
Réponse 6 / 11
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 août 2008 à 22:54
Pour le code donne sur le site
si tu veux le faire avec le css embarque cela doit donner ca par exemple 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>RAD ZONE Webcreation</title>
  <meta name="author" content="http://radservebeer.free.fr" />
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <style type="text/css">
  .roundedcornr_box_312833 {
	background: url(roundedcornr_312833_tl.png) no-repeat top left;
}
.roundedcornr_top_312833 {
	background: url(roundedcornr_312833_tr.png) no-repeat top right;
}
.roundedcornr_bottom_312833 {
	background: url(roundedcornr_312833_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_312833 div {
	background: url(roundedcornr_312833_br.png) no-repeat bottom right;
}
.roundedcornr_content_312833 {
	background: url(roundedcornr_312833_r.png) top right repeat-y;
}

.roundedcornr_top_312833 div,.roundedcornr_top_312833,
.roundedcornr_bottom_312833 div, .roundedcornr_bottom_312833 {
	width: 100%;
	height: 66px;
	font-size: 1px;
}
.roundedcornr_content_312833, .roundedcornr_bottom_312833 {
	margin-top: -19px;
}
.roundedcornr_content_312833 { padding: 0 66px; }
  </style>
</head>
  <body>
   <div class="roundedcornr_box_312833">
   <div class="roundedcornr_top_312833"><div></div></div>
      <div class="roundedcornr_content_312833">
         <p>Lorem ipsum dolor sit amet, consectetur 
         adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim 
         veniam, quis nostrud exercitation ullamco laboris 
         nisi ut aliquip ex ea commodo consequat. Duis aute 
         irure dolor in reprehenderit in voluptate velit esse 
         cillum dolore eu fugiat nulla pariatur. Excepteur 
         sint occaecat cupidatat non proident, sunt in culpa 
         qui officia deserunt mollit anim id est laborum.</p>
      </div>
   <div class="roundedcornr_bottom_312833"><div></div></div>
</div>
 </body>
</html>


tu telecharge les images et c est bon

RAD
0
Réponse 7 / 11
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 10
17 août 2008 à 23:05
Merci, j'ai aussi vu sur le site du zero comment faire avec une page css externe mais j'ai un petit problème concernant le 3eme model avec des bordures où le bloc est a moitié coupé a la fin (essaie et tu verras).
0
Réponse 8 / 11
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
17 août 2008 à 23:29
la taille ne dois pas depasser 1024 px !!!!!!

l image roundedcornr_288242_bl.png ne fais que 1024 px
0
Réponse 9 / 11
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 10
18 août 2008 à 00:10
J'ai essayer une nouvelle méthode qui marche et qui est plus modifiable mais un peut moins design: http://www.webdemark.fr/webdesign/css/angles-arrondis-en-css/
C'est la 4eme methode et je voudrais savoir comment peut on déplacer les blocks car je réussi en changeant la ligne : .examplesGoHere {text-align:center; margin: 3px; } (j'ai changé les 3px) mais lorsque l'on change ça, le bloc se déplace en diagonal et pas horizontalement de gauche à droite.

Merci de votre précieuse aide.
0
Réponse 10 / 11
benji^^ Messages postés 100 Date d'inscription vendredi 4 janvier 2008 Statut Membre Dernière intervention 25 mai 2009 10
18 août 2008 à 08:57
Nouveau problème et ne vous attardez pas sur le précédent ^^
J'ai utiliser la méthode radius et je voudrais savoir si il était possible de déplacer le bloc.

Voila !
Merci !
0
Réponse 11 / 11
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 566
17 août 2008 à 22:19
tu veux qu'on te répète ce qu'il y a de marqué dans ce tuto ?
-1

Discussions similaires

Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
code d'activation GTA 5 steam
ylyes59 -
David -

6 réponses
consultation messagerie vocale refusé : aucun code d'accès configuré free mobile
jedge -
allemande -

5 réponses