Probleme padding et background repeat [Résolu]

Bonjour,

Je débute en css. Je souhaite avoir des images pour faire les bordures des quatres côtés ainsi que les coins.
Je me suis inspiré d'un code css d'un thème de Wordpress, malheureusement, ça ne marche pas aussi bien.

Mon problème c'est que les bordures et les coins épousent la forme de mon contenu mais ne prennent pas en compte le padding.

Voici une image pour mieux comprendre

Et voila mon code :

#main {
position: relative ;
width:600px;
padding:0px 0px 100px 0px;
margin-left: auto;
margin-right: auto;
background:#FFFFFF;
}

#t { background: url(images/onglet_t.gif) repeat-x top }
#r { background: url(images/onglet_r.gif) repeat-y right }
#b { background: url(images/onglet_b.gif) repeat-x bottom }
#l { background: url(images/onglet_l.gif) repeat-y left }
#tl { background: url(images/coin.gif) no-repeat top left }
#tr { background: url(images/coin.gif) no-repeat top right }
#br { background: url(images/coin.gif) no-repeat bottom right }
#bl { background: url(images/coin.gif) no-repeat bottom left }

<div id="main">
<div id="t" >
<div id="r" >
<div id="b" >
<div id="l" >
<div id="tl" >
<div id="tr" >
<div id="br" >
<div id="bl" >

TEST...<br />
sdfqfq<br />
fqfqfqfqsf
qfqsfq

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

J'ai cherché sur la FAQ et le forum, j'ai essayé différentes solutions mais j'ai toujours le même problème sous FF,IE et Safari.

Merci de votre aide.
Modifié par thoral75 (28 May 2008 - 19:03)

Bonjour,

Tes coins sont positionnés en absolu? Auquel cas c'est normal qu'ils ignorent le padding de l'élément (parent ou ancêtre) qui leur sert de référence (div#main dans ton cas).

Cette solution me semble très compliquée et comporter pas mal d'éléments inutiles. Tu es sûr qu'il n'y a pas moyen de faire (sensiblement) plus simple?

Déjà, si tes bordures peuvent être dessinées avec la propriété CSS border et que le seul souci est d'avoir des coins arrondis, tu peux utiliser quatre éléments vides (des SPAN par exemple) positionnés en absolu, et basta.

Autrement, tu peux voir par ici:
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
http://web.covertprestige.info/test/35-boites-fluides-bords-coins-en-images.html

Pour les coins et bordures, je pense qu'ils sont en "relative" car dans "main", il y a "position=relative".

Pour les bordures et les coins, je souhaite faire comme cela, car la bordure droite et celle du haut seront différentes, il ne faut pas tenir compte du graphisme actuel. Ensuite, par la suite, si je souhaite changer l'affichage des bords, il sera tres facile de ne changer que les images (je suis meilleur avec photoshop qu'avec notepad++).

Je trouvais cette solution très "propre".
Modifié par thoral75 (28 May 2008 - 15:09)

J'ai trouvé ! (tout seul)

Il suffisait de mettre le padding dans le dernier id appelé !

Solution :

#main {
position: relative ;
width:600px;
margin-left: auto;
margin-right: auto;
background:#FFFFFF;
}

#t { background: url(images/onglet_t.gif) repeat-x top }
#r { background: url(images/onglet_r.gif) repeat-y right }
#b { background: url(images/onglet_b.gif) repeat-x bottom }
#l { background: url(images/onglet_l.gif) repeat-y left }
#tl { background: url(images/coin.gif) no-repeat top left }
#tr { background: url(images/coin.gif) no-repeat top right }
#bl { background: url(images/coin.gif) no-repeat bottom right }
#br { background: url(images/coin.gif) no-repeat bottom left  ; padding: 0 0 100px 0;}