[Résolu] Bord décollé du cadre

Bonjour,

Existe-t-il une propriété css permettant de décoller le bord d'un cadre du cadre lui même (et de son background) ? Ci dessous l'exemple que je voudrais arriver à faire :
http://free0.hiboox.com/images/3909/04cd08023474010a10268b9fbecfcfdf.png

C'est possible avec une propriété CSS ou alors il faut que j'imbrique 2 cadres, l'un sans fond avec juste un bord, l'autre avec le fond de la bonne couleur et un margin pour le séparer du bord ?

Merci d'avance.
Modifié par vichenze (22 Sep 2009 - 10:28)

Salut,

Tu peux styliser deux éléments imbriqués de cette manière mais cela implique d'imbriquer deux div pour un effet de style, ce qui est valide niveau code, mais incorrect pour alléger le code.
Tu peux éventuellement styliser l'élément à l'intérieur, mais tu seras dépendant de cet élément sur toutes tes pages. Si tu utilise un paragraphe, que ce passe-t-il sur une page avec un tableau ou une liste par exemple ?

Par exemple :

<div style="border: 1px solid blue">
  <div style="margin: 4px; background: blue">
    ici le contenu de ton cadre
  </div>
</div>

Idéalement, il vaudrait mieux que tu crée une bordure en image, avec l'espace que tu veux entre le cadre et le fond du bloc, ça sera plus indiqué.
Modifié par Mikachu (21 Sep 2009 - 18:21)

J'avais pas pensé à l'image de fond, ça peu être une solution effectivement.

Ca confirme on tout cas qu'il n'y a pas de propriété CSS simple pour le faire en une ligne.

Merci
Modifié par vichenze (22 Sep 2009 - 10:28)

Salut,

@Mikachu : Personnellement j'aurais préféré l'utilisation d'un padding sur le conteneur plutôt que d'un margin sur le contenu, pour éviter la fusion des marges.

J'ai mis un code sans réfléchir, je voulais surtout indiquer qu'une image était plus adéquate dans cette situation, plutôt que de rajouter une balise supplémentaire dans le code html.
En général la fusion des marges est pas spécialement un problème, mais dans ce cas précis, c'est vrai que ca peut mettre le cadre en l'air !

Le problème s'il utilise une image de fond, c'est que le bloc sera forcément de taille fixe, et donc impossible à :
1. Adapter à plusieurs éléments dont le contenu est différent ;
2. Adapter à la taille du texte définie par le visiteur dans son navigateur.

Avec 2 images si la largeur est fixe, ou 4 si la largeur est variable, c'est tout à fait possible que le bloc soit extensible, en stylisant les éléments contenus dans le cadre.

Dans tout les cas, ajouter des balises html pour l'intérêt du style graphique, ce n'est pas idéal, mais quasi obligatoire dans la solution codée. La solution en image ne l'oblige pas nécessairement.
Modifié par Mikachu (22 Sep 2009 - 11:38)