Version imprimable
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!
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
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
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
J'arrive pas a extraire le code qui convient ... :oops: Celui pour le 3D Raised, tu peux m'aider stp ? :)
Code:
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;}
Ca devrait être bon là, non ?Code:
2
3
4
5
6
7
8
Sinon tu as celui ci : http://www.cssplay.co.uk/boxes/curves.html
merci :)
Ca a l'air intéressant! c'ets quoi ce truc? :aie:
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...
possible que j'ai oublié des trucs dans mon copier coller, suffit de regarder la source du lien
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! :(
En tous cas merci pour toutes ces informations! :D