Bords arrondis et bordures extensibles
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:
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:
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.
