28172 sujets

CSS et mise en forme, CSS3

Création d'un cadre auto extensible en hauteur et en largeur

Bonjour à tous,

Voilà maintenant 3 jours que je suis dessus et je ne trouve pas de solutions à mon problème, s'il en est un.
J'ai besoin de créer un cadre de largeur et de hauteur extensible en fonction du contenu s'y trouvant. A priori ça parait simple.
Seulement, ce cadre a un contour arrondie qui prend sa forme en image.
Pour corser le tout, ces images sont transparentes (.png) de manière à pouvoir intégrer ce cadre dessus n'importe quel type de style (autre cadre de couleur par exemple).

Mon plus gros soucis étant les partie topales et bottomales (top et bottom si vous préférez).
J'ai tenté 3 div flottants dans le div top, j'ai tenté 3 div imbriqués dans le div top avec des largeurs à 100% pour certains, etc. Je ne trouve pas de solutions.

J'ai joint un fichier image pour illustrer mes propos.
Si quelqu'un a une idée, je suis preneur.

Merci d'avance.

Cordialement,

Scorpinou upload/14346-cadre.jpg
Le document cité n'est déjà plus en ligne Smiley decu Et une recherche sur "bordure" ne donne quasiment rien. Quelqu'un a-t-il un autre lien ?
Merci !
Bonjour,
Ceci pourrait éventuellement te dépanner : un vieux truc qui fonctionne - Je prévois un autre exemple avec une seule image pour les 4 coins et une seule image pour le contenu… tout en "élastique" mais je n'ai pas le temps.

Note : Ninj n'a pas tort, le lien ne mêne nulle part…
Modifié par Aureance (30 Mar 2010 - 19:50)
Une image d'arrière-plan reste à l'heure actuelle le meilleur moyen d'obtenir ce que tu désires pour plusieurs raisons :
1/ CSS3 n'est pas valide de nos jours. Purement et simplement, il faut attendre encore un peu et de pas mettre la charrue avant les bœufs.
2/ Le javascript recrée tout le code à chaque ouverture de page.
3/ L'image chargée est mise en cache et s'affiche à la vitesse de l'éclair.

La meilleure solution me semble être la troisième.
Aureance a écrit :
CSS3 n'est pas valide de nos jours.

Ah tiens, une bêtise. Smiley smile
(Une feuille de styles CSS3 peut être valide ou non. CSS3 ne peut être ni l'un ni l'autre.)

On peut dire plus prosaïquement que les propriétés CSS3 qui nous intéressent (et ici à priori c'est juste border-radius ne sont pas supportées par les versions actuelles d'Internet Explorer (versions 6 à 8, pour prendre large). Ce sera supporté dans IE9, mon on n'y est pas encore.

Les techniques avec des images de fond sont intéressantes mais ici il faut voir qu'on a des contraintes assez velues: largeur variable, hauteur variable, et pas de possibilité de faire se recouvrir des images de fond (coins arrondis transparents). On arrive vite à des solutions pas mal compliquées.

Dans le genre solution compliquée, je verrais bien quelque chose comme ça pour des coins de 20px de rayon, avec une image de fond qui serait un cercle de 40px de diamètre:
<div class="box-top"><span></span><span></span></div><!--.box-top-->
<div class="box-content">
  Tout le contenu par ici.
</div><!--.box-content-->
<div class="box-bottom"><span></span><span></span></div><!--.box-bottom-->

.box-top, .box-bottom {
  position: relative;
  height: 18px;
  margin: 0 20px;
  border: solid black;
  background: #DDD;
}
.box-top {
  border-width: 2px 0 0 0;
}
.box-bottom {
  border-width: 0 0 2px 0;
}
.box-top span, .box-bottom span {
  position: absolute;
  left: -20px;
  top: 0;
  width: 20px;
  height: 20px;
  background: url(box-corners.png) no-repeat left top;
}
.box-top span + span {
  left: auto;
  right: -20px;
  background-position: right top;
}
.box-bottom span {
  background-position: left bottom;
}
.box-bottom span + span {
  left: auto;
  right: -20px;
  background-position: right bottom;
}
.box-content {
  padding: 0 18px;
  border: solid black;
  border-width: 0 2px;
  background: #DDD;
}

Modifié par Florent V. (30 Mar 2010 - 22:02)
Florent V a écrit :
Ah tiens, une bêtise.
montre moi une page avec le carré vert telle que mon client l'exige en utilisant les CSS3. (un standard n'existe que s'il est est accepté comme standard sinon c'est juste un truc indigne)
Sujet clos
Aller à