28172 sujets

CSS et mise en forme, CSS3

Je voudrai arrondir mes bords sous IE mais je n'y arrive pas.
J'ai trouvé ce code où je remplace tous les class par des id car je veux m'en servir plusieurs fois.

<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">
texte
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>


Le CSS est le suivant:

.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;}


Quelles sont les modifications à apporter pour que ça fonctionne avec des id?
J'ai remplacé .raised par #raised et enlevé tous les points (.b1 devient b1) mais ça ne fonctionne pas.

Merci de votre aide.
Administrateur
_Moi_ a écrit :
et enlevé tous les points (.b1 devient b1)


b1 : cela suppose que tu utilises un élément <b1> => err0r§
.b1 : cela suppose que tu utilises un élément quelconque, de classe "b1"

_Moi_ a écrit :
où je remplace tous les class par des id car je veux m'en servir plusieurs fois


euh... justement non. les id sont destinés à être uniques.
il est préférable de conserver les classes pour s'en resservir plusieurs fois.
ok merci pour les class Smiley smile
Donc à quoi doit ressembler mon css?

Edit:
les bords sont arrondis maintenant mais il existe un espace en haut et en bas du cadre.
boxcontent n'est pas collé avec top
Modifié par _Moi_ (02 May 2008 - 15:19)