Discussion :

[aasensuio]

Bonjour...

Je reprensd le taf sur mon site et je souhaiterais faire des cadres avec des bords arrondis...
Je dois dire que l'on trouve de nombreux tutoriels HTML sur le sujet mais après avoir essayé trois méthodes différentes, j'ai finalement opté pour une méthode trouvée sur le site

La méthode marche très bien, cependant pour mes besoins il me f aut l adapter car les bordures sont des images qui se repètent (repeat-x etc) or moi il me faut une image fixe mais étirable. Je sais pas si c 'est très clair alors avec le code ce devrait être mieux.

XHTML

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
<div id="corps">
        <div class="coin_hg">
                <div class="coin_hd">
                        <div class="bordure_h"><img src="./images/haut.png" width=100% height=19px alt="">
                        </div>
               	</div>
        </div>
 
        <div class="cote_gauche"><img src="./images/gauche.png" width=19px height=100%  alt="">
                <div class="cote_droit"><img src="./images/droite.png" align=right width=19px height=100%  alt="">
                        <div class=contenu_cadre >    yooo test
                        </div>
                </div> 
       	</div>
 
        <div class="coin_bg">
                <div class="coin_bd">
                         <div class="bordure_b"><img src="./images/bas.png" width=100% height=19px alt="">
                         </div>
                </div>
        </div>
</div>

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
div.coin_hg
{
        background: url('../images/hautgauche.png') left top no-repeat;
        padding-left: 19px;
	margin-left: 13%;	
        border: 1px solid #ff0707;
}
 
div.coin_hd
{
        background: url('../images/hautdroit.png') right top no-repeat;
        padding-right: 19px;
        margin-right:15%;
        border: 1px solid #ff0707;
}
 
div.bordure_h
{
        height:19px;
        border: 1px solid #ff0707;
}
 
div.cote_gauche
{
        margin-left:13%;
	border: 1px solid #00f7f7;
}
 
div.cote_droit
{
        margin-left:19px;
        margin-right:15%;
	border: 1px solid #00f7f7;
}
 
div.contenu_cadre
{
        margin-left:19px;
        margin-right:19px;
	border: 1px solid #00f7f7;
}	
 
div.coin_bg
{
        background: url('../images/basgauche.png') left top no-repeat;
        padding-left: 19px;
        margin-left: 13%;
}
 
div.coin_bd
{
        background: url('../images/basdroit.png') right top no-repeat;
        padding-right: 19px;
	margin-right:15%;
}
 
div.bordure_b
{
        height: 19px;
}

Voila deux jours que je bosse sur ce problème et je suis à court d'idée, alors j'aimerais bien savoir déjà, si mon idée est réalisable, et si elle l'est si quelqu'un a une idée pour m'éclairer.
Afin que vous vous rendez mieux compte de ce que je souhaite et surtout de ce que j'obtiens:

http://aasensuio.isa-geek.net/Aasensuio/cadre1.php (Visualisez l'effet sous un navigateur gérant la transparence sinon vous ne verrez pas les images.)

Soyez indulgent mon site n'en est qu'à ses débuts. Merci pour vôtre aide.

[mimagyc]

J'avais ce problème aussi , mais âpres une tres grande aide de ce forum, j'ai réussi a faire ce que je voulais ( http://www.aeris-online.com/sitero/ ).

lien du topic : http://www.developpez.net/forums/sho...d.php?t=387476

a toi de voir si tu veus des angle fait par une image (donc plus propre niveau design) ou bien un effet d'optique en faisant plusieurs div . (j'ao opter pour les div pour une raison personnel).

J'ai utiliser ce code pour les arrondis : http://developpez.net/forums/showpos...7&postcount=14

[aasensuio]

Merci pour ces infos, je vais m'y attarder pour savoir si ça correspond a mon problème.

[alexp]

pour eviter d'utiliser les images, tu peux regarder du coté de la propriété css3 moz-border-raduis qui permet d'arrondir les angles d'un cadre tres simplement. Seul probleme, elle n'est compatible qu'avec firefox/netscape et epiphany. Opera et internet explorer ne gere pas cette propriété et affiche un angle à la place.