Discussion :

[dessinateurttuyen]

Bonjour à tous,

Je voudrais créer un bloc et l'encadrer d'un trait et mettre une image en fond.

Cependant comment définir :
1- la largeur du trait
2- est-il possible de définir différents styles de trait (pointillé, double, etc.)?
3- le plus important, comment faire que les coins soient arrondis et non pas carrés?

Merci de vos réponses!

[Candygirl]

1- border-width
2- border-style (IE met des tirets à la place de pointillés...)
3- c'est prévu avec css3 et la propriété border-radius. En attendant il y a par exemple -moz-border-radius, sur Firefox

Pour les border et css3:
http://www.w3.org/TR/2005/WD-css3-ba...-border-radius

[Kerod]

Comme cela a été dit plusieurs fois sur ce forum, et vu ce qui est également dit plus haut, en CSS2 tu ne peux pas le faire comme ca. Tu dois pour le moment te limiter à l'utilisation des images.
Il y a bien une propriété sous FF qui le fait mais c'est pas compatible avec IE

[Oluha]

pour les coins arrondis ca a déjà été dit et redit : http://www.cssplay.co.uk/boxes/krazy.html

Compatible IE et FF, entièrement en CSS sans image

[fallais]

J'arrive pas a extraire le code qui convient ... Celui pour le 3D Raised, tu peux m'aider stp ?

[Oluha]

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
/* Inset 3D Raised */
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}
 
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}
 
 
.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>3D Raised</h1>
<p>Rounded corners with raised borders</p>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

Ca devrait être bon là, non ?

Sinon tu as celui ci : http://www.cssplay.co.uk/boxes/curves.html

[fallais]

merci

[dessinateurttuyen]

Ca a l'air intéressant! c'ets quoi ce truc?


Quelques secondes de test plus tard....

Bah! Ca marche pas!

J'ai copié/collé le code du CSS dans ma feuille de style
et copié/collé le code HTML dans ma page HTML, et il m'affiche que du texte sans bordure ni quoi que ce soit...

[Oluha]

possible que j'ai oublié des trucs dans mon copier coller, suffit de regarder la source du lien

[dessinateurttuyen]

AH non en fait c'était de ma faute.
Je ne sais pas pourquoi mais quand je modifie ma feuille de style et que je sauvegarde, ma page web ne suit pas les modifs, même si je recharge la page ou que je redémarre le navigateur (je suis firefox).

C'est étrange non? c'est pas la première fois que ça m'arrive!

[dessinateurttuyen]

En tous cas merci pour toutes ces informations!