Encore des coins arrondis!

(je sais je suis lourd).
Bonjours à tous!
Comme vous le savez il y a deux sortes de boites arrondies, les boites sans bord et les boites AVEC un bord, dans le premier cas l'effet est souvent reussi, la boite se charge avec son fond et des petites images viennent arrondir le tout quelques millisecondes aprés. Dans le deuxiéme cas par contre c'est un peu différent il faut faire des images de la taille maximum du plus grand bloc de votre page à sa plus grande définition en imaginant le contenu le plus long. C'est un peu plus pénible à faire et si les blocs sont hauts et large c'est aussi un peu plus lourd et ça casse un peu l'effet "imédiat" de nos belles pages xhtml/css.
J'ai donc eu une nouvelle idée tordue (je crois qu'elle est inédite tellement elle est tordue) c'est de faire un bloc avec un bord de la couleur du contour et rajouter seulement des petits angles dans les coins par dessus ce bloc.

imaginons un document html:

<div class="box">
<div class="tl"><div class="bl">
<h1 class="tr">Titre</h1>
<p class="br">Content</p>
</div></div>
</div>

et là ou le secret est dévoilé c'est dans les css:

.box{border:2px solid #658EA5}
.tl, .tr, .br, .bl{position:relative}
.tl {background: url(box/tl.gif) no-repeat top left;top:-2px;left:-2px;}
.bl {background: url(box/bl.gif) no-repeat bottom left;bottom:-4px;}
.tr {background: url(box/tr.gif) no-repeat top right;top:-4px;right:-4px}
.br{background: url(box/br.gif) no-repeat bottom right;right:-4px}

cela donne ça:
http://www.smart-com.com.mx/spip.php?page=rounded7&id_article=45

Comme vous le voyer c'est l'utilisation de la position "relative" qui vat me permettre de "masquer" mon cadre et de lui donner l'effet voulu.

Seulement voilà, je me demande si ce ne peut pas être source de problémes, surtout j'aimerais savoir si l'abus de position relative (je l'utilise relativement peu) ne risque pas de dévier mes sites de leurs orbites , donc avant de l'installer sur les deux sites ou j'ai besoin de ces cadres, j'aimerais bien avoir votre avis sur la méthode.
Modifié par matmat (06 Dec 2006 - 01:57)

salut,

matmat a écrit :

Comme vous le savez il y a deux sortes de boites arrondies, les boites sans bord et les boites AVEC un bord,

et dans les boites avec bord il y a celles dont les bords sont des traits et celles où il s'agit d'autre chose (ombres portées, petite dégradé, effet 3D)

matmat a écrit :

c'est aussi un peu plus lourd et ça casse un peu l'effet "imédiat" de nos belles pages xhtml/css.

n'exagérons rien, celà ne concerne que la première ouverture du site, ensuite tout est en cache quand même.

De plus c'est très concrètement je pense qu'il faut étudier les solutions mises en oeuvres. Celle que tu indique peut être finalement peu utile dans le cas d'une boite dont sans connaitre la hauteur on sait néanmoins qu'elle restera limitée (typiquement un menu).

Il s'agirait donc d'une étape concernant des cas particuliers. Je pense qu'avant cela il est bon de se mettre au clair sur le fondamental qui est :

Jusqu'où peut on aller de manière maitrisée sans s'engager à corps perdu dans la multiplication des div vides. Ou, plus généralement de div non utiles.

Et là je trouve que tu mets ce genre de div dans ton code avec un manque de précaution (oratoire s'entend, comme si ça allait de soi) vraiment dommageable.
Modifié par clb56 (06 Dec 2006 - 18:22)

matmat a écrit :
J'ai donc eu une nouvelle idée tordue (je crois qu'elle est inédite tellement elle est tordue) c'est de faire un bloc avec un bord de la couleur du contour et rajouter seulement des petits angles dans les coins par dessus ce bloc.

Et ensuite en décale les petites images de coin grâce au positionnement relatif, etc. Non non, c'est pas inédit. Dommage, hein !

a écrit :
Et là je trouve que tu mets ce genre de div dans ton code avec un manque de précaution (oratoire s'entend, comme si ça allait de soi) vraiment dommageable.

Là question n'est pas là! j'ai dut en mettre un certain nombre car mon exemple ne contient qu'un titre et un paragraphe (tu remarqueras d'ailleur que je l'ai est utilisés). Tu sais toi même qu'il y a souvent plus de balise, ce qui fait moins de divs à ajouter. Par rapport a la méthode classique, il y besoin du même nombres de balises. Ce que je voudrait savoir c'est plus si le fait de mettre 4 position relative l'une sur l'autre n'est pas un peu risqué, l'exemple passe sur FF, IE5+, Opera, Safari j'ai pas testé, mais par exemple j'ai eu une fois un menu au milieu de la page avec IE (résolu avec zoom).

a écrit :
Et ensuite en décale les petites images de coin grâce au positionnement relatif, etc. Non non, c'est pas inédit. Dommage, hein !

Donc si c'est pas inédit, c'est que c'est utilisé et que ça marche?
Modifié par matmat (06 Dec 2006 - 16:38)

matmat a écrit :
(je sais je suis lourd).

Non,non pas du tout !! ca m'aide !!
La solution des images me dérangeait un peu avec le fait de surcharger par rapport au plus grand contenu, et puis j'avais des problèmes pour mettre le haut du cadre en plus foncé,impossible de virer une marge qui me gène etc ... bref ... je vais encore tester ta technique ... voir si elle correspond mieux à mes besoins.

J'espère que tu as enfin trouvé LA solution qui correspond à MES besoins (et au tiens tant qu'a faire lol)

Mense, attends peut-être qu'il y est d'autre avis, parceque c'est expérimental comme méthode, je ne sait pas ce que ça vaut. (Safari, quelqu'un a vu?)