Aller au menu - Aller au contenu

Cadres arrondis avec des div

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Pseudo Commentaire
Page 1 
Hors ligne Red # Posté le 18/01/2006 à 14:29:27
Avatar

 La question est : comment faire des arrondis ? Si on veut faire des trucs un peu plus élaborés, on passe obligatoirement par photoshop ou autre logiciel d'images assez complexe d'utilisation.

Je pense que le problème réside là, sinon, ça peut sembler évident à certains, mais si la question est récurrente sur le forum, alors bien ! :)
Ich will ein "Site du Zéro" auf Deutsch übersetzt !
 
Hors ligne MadX # Posté le 18/01/2006 à 17:41:24
Debian Powa
Avatar

 Même si le plus difficile reste la création de l'image du cadre, le découpage et la mise en forme sont pas forcément évidents :)

Merci pour la note ;)
Image utilisateur
 
Hors ligne Tsunami # Posté le 22/01/2006 à 12:13:57
Avatar

 Bon tuto, je connais aussi un moyen (mais malheursement utilisant les tableaux...), il s'agit de la propriété
Code : CSS
.tableau
{
   -moz-border-radius:5px;
}

Peut etre marche elle avec les div aussi? Je n'ai jamais essayé

Aussi, cette propriété ne fonction pas sous IE...(donc 2 inconvénients) mais c'est toujours bon à savoir.

Bon tuto, 16/20
Hors ligne Bogoris # Posté le 22/01/2006 à 15:23:50

Mon tuto à moi, ça fonctionne aussi parfaitement sous IE, niark !
:lol:
Hors ligne magikman # Posté le 24/01/2006 à 22:47:21
Avatar

 pas mal quouqe...alourdi fort le code...pour pas grand chose.
-moz-border-radius ok mais seulement compatible mozilla...
Les css3 permettront ce genre de fantaisies de base...et pire encore...vivement qu'elles soient là...mais c'est pas demain la veille
Hors ligne Dokken74 # Posté le 22/02/2006 à 19:19:53
Avatar

 Il y à une erreur dans ton html, tu as oublié de fermer la balise 'commentaire' :

Code : HTML
<?xml version="1.0" encoding="UTF-8"?> <!-- L'encodage dépend de vous, moi je fonctionne en UTF8 mais beaucoup préfèreront l'iso 8859-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
                <title>Cadres arrondis</title>
                <style type="text/css">
               
                       
               
                </style>
        </head>
       
        <body>
        </body>
       
</html>


Il faut faire :

Code : HTML
<!-- L'encodage dépend de vous, moi je fonctionne en UTF8 mais beaucoup préfèreront l'iso 8859-1 -->
Héhé :D Image utilisateur

 
Hors ligne MadX # Posté le 23/02/2006 à 15:53:37
Debian Powa
Avatar

 Merci Dokken !

Je vais apporter la correction tisuite.
Image utilisateur
 
Hors ligne nakata # Posté le 22/04/2006 à 17:47:31
Liberu min je konsumeco
Avatar

Ville : Forcalquier
Pays : France métropolitaine

 Stp fait-nous des jolis angles qu'on ait plus qu'à changer la couleur, car sous Paint c'est galère ça ^^ !
Révolution des Idées.com
Faisons de la Toile un espace de débat démocratique.
Et si nous reconsidérions notre système économique ?
 
Hors ligne baba0076 # Posté le 17/06/2006 à 20:05:19
Qui ne tente rien n'a rien !
Avatar

 C'est nul, c'est pas extensible en hauteur...
VENDS BOITIER ADVANCE XBLADE 8110B - 60 €
VENDS GAMECUBE + 6 JEUX, 3 MANETTE, 4 MEMORY - 150 €
VENDS SONY ERICSSON W550i + SPEAKERS + CD + CABLE - 150 €

PAR MP SVP
 
Hors ligne MadX # Posté le 18/06/2006 à 02:06:59
Debian Powa
Avatar

 J'ai décrit la marche à suivre générale, après pour faire de l'extensible, y'a que quelques trucs à modifier, mais ce n'est pas le sujet de ce tuto, alors ne vient pas dire que c'est nul, car tu n'as sûrement que fait suivre à la lettre le tuto ...
Image utilisateur
 
Hors ligne Galéop # Posté le 11/07/2006 à 18:04:09
Avatar

 bien que la méthode ne permette pas de faire des blocks extensibles, le tuto est clair est bien expliqué. 15/20 ;)
Hors ligne Dreepser # Posté le 20/11/2006 à 22:21:27
私はエルです。
Avatar

 Merci beaucoup, c'est vai quand on y pense, c'est tout con^^

Mais petite question : Commetn faire lorsque noter fond dd'ecra n'est pas blanc ? parce la dans tes coins tu as une partie marron et une partie blanche donc ....
Cordialement,

Dreepser.


Citation du moment : "'Faith' that's another word for ignorance, isn't it? I never understood how people could be so proud of believing in something with no proof at all. Like that's an achievement."
 
Hors ligne MadX # Posté le 21/11/2006 à 23:27:43
Debian Powa
Avatar

 Tu peux soit changer le blanc (mais les images que j'ai données sont uniquement des exemples à adapter pour vos sites), ou bien utiliser des images avec un fond transparent (attention, IE ne supporte pas la transparence du PNG, du moins quand on utilise pas de hack javascript (une petite recherche google "hack png ie" devrait pouvoir t'aider là dessus)

Bon codage !
Image utilisateur
 
Hors ligne bastoune46 # Posté le 04/03/2007 à 20:04:19
Avatar

 Facile, facile...c'est vite dit! C'est sans compter sur la fooorrrrmidable faculté à faire tout foirer d'IE...ahlala...et dire que le commun des mortels ignore l'existence de firefox...boring...
--
Quoi un vibromasseur sur l'iPod? et qui vibre au son de la musique? c'est sur Hall 'O vieW
 
Connecté Nesquik69 # Posté le 04/03/2007 à 20:25:50
Slave of the Rythm
Avatar
Flux RSS
close

Ville : Tassin-la-demi-lune
Pays : France métropolitaine
études : SUPINFO Rhône-Alpes à Lyon

 Bastoune46 -> Troll (+5%)
Mes tutos : Ajax | Code::Blocks
Mes projets : Sliding Menu v1.3.1 | zUploader (Alpha 2.4.2)
Articles : Débugger un code JS | Breakpoint 2007 / 2008 / 2009
Useless : Mangas | Caramelldansen | Tydax | Ubuntu Satanic (LAWL) | BEST POST EVAR §
 
Hors ligne Taiotoshi # Posté le 14/03/2007 à 10:32:53
Hey mon ami !
Avatar

études : Université Paris Dauphine

 C'est clair, sans prétention et ça fonctionne (mise à part cette balise de commentaire toujours pas fermée ^^ ). Bref, ce qu'on demande à un tuto.
Quant à l'histoire de l'étirement vertical, quelques recherches sur le SdZ, et hop ! Tu auras ta réponse !
Projet actuel :
Site Familial avec une belle généalogie dynamique, présentable sur une page internet et facilement adaptable à tout type de situation, et qui sert le café, et qui fait la vaisselle...
Commandement # 32 :
Pour assurer aux dépanneurs, une lecture sans heurt,
Ton code, tu indenteras; et leur bonheur, tu feras. :-°
La suite
 
Hors ligne Mobman02 # Posté le 14/10/2007 à 10:27:35
Super Geek
Avatar

Ville : Paris
Pays : France métropolitaine

 Même si c'est bien expliqué je trouve cette technique barbare et inutilisable en production...

De plus ajouter des divs comme ça, c'est pas bien...
Il existe des techniques beaucoup plus sexy et pas forcement plus compliqué : http://www.alistapart.com/articles/customcorners/ par exemple...

Cette dernière mériterait un tuto d'ailleurs.
Driver-Dimension - Portfolio Blog.
Programmation Xhtml, CSS, Javascript, PHP (BDD Mysql)
Respect des normes W3c, application des recommandations Opquast.
Roxor de l'intégration. It's not a bug, it's a feature !
 
Hors ligne Caim # Posté le 22/02/2008 à 11:18:40

sa marche aussi avec un tableau non ?

en plus chaque partie du cadre reste a proximité des autres (les div ne sont pas "acrocher ensemble" y peuvent aller se balader on ne sait où)
Hors ligne Mandi # Posté le 12/08/2008 à 14:36:07
C'est en forgeant...
Avatar

 Citation : Mobman02
Même si c'est bien expliqué je trouve cette technique barbare et inutilisable en production...

De plus ajouter des divs comme ça, c'est pas bien...
Il existe des techniques beaucoup plus sexy et pas forcement plus compliqué : http://www.alistapart.com/articles/customcorners/ par exemple...

Cette dernière mériterait un tuto d'ailleurs.


Le problème de cette dernière est qu'elle ne permet que partiellement un design extensible. Quelqu'un avec une grande résolution se retrouvera avec des "trous" entre les différentes images de l'article...

Pratique tout de même, mais à utiliser avec prudence...

Malgrés la surcharge de divs, le tuto est utile et avec 2 ou 3 modifs permet de faire un designe 100% extensible ;)

Donc, félicitations! ^^
SdZ Addict!
Non au langage SMS!!
 
Hors ligne Nisaea # Posté le 25/05/2009 à 15:44:06
Hippie inside.
Avatar

études : Université de Bordeaux

 J'ai fait des arrondis sur mon site d'une manière un peu différente, qui a l'avantage d'être 100% extensible, et peut-être plus légère:

- On met le block qu'on veut arrondir en position: fixed; (attention à IE!!) ou en position: relative;.
Cette partie est essentielle pour positionner les coins à l'intérieur du block. En effet, s'il est en absolute ou en static, les coins seront positionnés par rapport à la fenêtre entière, allez savoir...

- On crée un div par coin qu'on met en vrac dans le block à arrondir. Par exemple pour un menu:
Code : HTML
1
2
3
4
5
6
7
<div id="menu">
	<div class="hg"></div>
	<div class="hd"></div>
	<div class="bg"></div>
	<div class="bd"></div>
	code du menu......
</div>


- On crée les classes correspondantes à chaque coin, en prenant soin de les dimensionner à la taille des images, et en les "collant" dans les coins du bloc parent en position absolue:
Code : CSS
 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
.hg
{
	height: 10px;
	width: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	background: url("hg.png") no-repeat;
}

.hd
{
	height: 10px;
	width: 10px;
	position: absolute;
	top: 0px;
	right: 0px;
	background: url("hd.png") no-repeat;
}

.bg
{
	height: 10px;
	width: 10px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: url("bg.png") no-repeat;
}

.bd
{
	height: 10px;
	width: 10px;
	position: absolute;
	bottom: 0px;
	right: 0px;
	background: url("bd.png") no-repeat;
}


Et paf, ça fait des chocapics! :lol:

Comme ça pas besoin de se soucier de la taille du bloc, ni de créer quintouze div.
Le seul inconvénient, c'est que ce système ne peut pas gérer les transparences, et les images-coins doivent reprendre les couleurs exactes du bloc et du fond.

Voilà, j'espère que ça aura aidé certains! ^^
Hors ligne cetheph # Posté le 25/06/2009 à 14:01:20
Avatar

 Ca ne serait pas plus simple, au lieu de s'embêter à créer des coins, et des tas de divs, de mettre carrément le cadre arrondi déjà dessiné en background-image?

En plus, dès lors les cadres deviendraient extensibles.
Image utilisateur
 
Hors ligne oliverpool # Posté le 28/06/2009 à 19:52:44
Vive les citations !
Avatar

 une petite coquille à la fin du tuto :
Citation : tuto
IE, ce n'est pas étonnant que ça rendre mal.


sinon, bon tuto même si je trouve la mise en place un peu lourde....
- Si le destin est contre moi : tant pis pour lui !
:) Toi aussi tu veux devenir membre de Lockerz et gagner des cadeaux : en-moi un MP !
 
Hors ligne Nisaea # Posté le 30/06/2009 à 16:25:27
Hippie inside.
Avatar

études : Université de Bordeaux

 @ceteph: Un cadre arrondi déjà dessiné n'a rien d'extensible... ou je n'ai vraiment pas compris ce que tu voulais dire. Das la méthode que j'explique juste au-dessus de ton commentaire, il n'y a que 4 divs, je te défie de trouver une solution plus simple, aussi propre et extensible. ;)
Hors ligne blister # Posté le 09/10/2009 à 00:35:29
Avatar

études : SUPINFO Normandie à Caen

 Sinon j'ai appris qu'on pouvais mettre plusieurs background sur un div en les séparant avec des virgules
Code : CSS
1
2
3
background:url(tonimage),url(tadeuxiemeimage);

background:url(tonimage,tadeuxiemeimage);


je sais plus la quelle des deux est la bonne syntaxe mais j'ai vu ça quelque part et ensuite on positionnes les images avec des top-left ect ...
Image utilisateur
 
Hors ligne Specifik # Posté le 27/10/2009 à 17:30:23

Jolie tuto et merci ! Je cherchais comment faire, mais maintenant, j'ai la réponse ! =)
Hors ligne zéro de moselle # Posté le 06/12/2009 à 12:50:27
Avatar

Ville : Thionville
Pays : France métropolitaine

 Super tuto! Dommage que cela ne soit pas extensible... :(
Mais pourquoi utiliser autant de divs? ça ne marcherait pas avec un pôur le haut, un pour le bas et un au milieu ou on mettrait le texte
:) "Il fait trop chaud froid pour travailler" :)
 
Hors ligne aspiownyou # Posté le 14/01/2010 à 08:18:15
Avatar

 Pour réaliser des blocs arrondis il existe l'instruction CSS "border-radius".Le problème c'est qu'elle ne semble pas être prise en compte par les navigateurs actuellement en tant que telle (c'est une propriété Css 3.0 faut dire :-° ).Chaque navigateur a néanmoins implanter son border-radius (en théorie :-° ).Je vais vous montrer comment cela fonctionne sous mozilla par exemple,essayer ;)


Commençons par le code html,tout ce qu'il y'a de plus classique

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cadres arrondis</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</body>
</html>


Passons maintenant au CSS

Code : CSS
1
2
3
4
5
6
7
8
p {
   background-color: #0F0;
   margin: 10px;
   width: 300px;
   float: left;
   border-radius : 10 px; /* Balise facultative pour que ca fonctionne sous Mozilla */
   -moz-border-radius : 10px;
  }


Pour mon border-radius sous mozilla j'ai choisi comme valeur 10 px.Plus la valeur est importante,plus l'arrondis est important.Pour que ca fonctionne sous Mozilla on a donc placé "-moz-" avant "border-radius".A noter que border-radius tout court fonctionne sous le navigateur Safari,par contre cela n'est pas prit en compte par IE,Opéra,etc...Pour appliquer l'effet border-radius à tous les navigateurs,il faudra donc rentrer les balises border-radius précédés par l'initiale du navigateur (si celui-ci a implanter un border-radius :-° ).
Pour le moment je vous propose "que" Mozilla Firefox mais dès que j'aurai trouver pour les autres navigateurs,je rajouterai promis :-°
Pour accéder à cette section
Connectez-vous !
connexion_rpx