28173 sujets

CSS et mise en forme, CSS3

Imbrication de DIVs

Bonjour !

Premier post sur ce magnifique forum !

Mon problème est de faire un cadre à coins arrondi... j'ai vu qu'un livre proposait un tutoriel pour le faire, mais il faut l'acheter...

Je ne demande pas un tuto, rassurez-vous.

J'ai longtemps chercher à faire quelque chose de bien compatible de partout, et pratique.

Mon cadre se compose de 8 images (haut.png, droite.png, hautgauche.png, basdroite.png etc..)

J'ai d'abord voulu faire un truc avec des floats, mais vu que j'avais beaucoup de problèmes à ce que ce soit compatible avec internet explorer, j'ai cherché à faire autrement.

Finalement, je me suis apercu qu'on pouvait très bien imbriquer 8 calques, et mettre en background à chaque fois une image du cadre.

Comme cela :
<html>
	<head>
		<style type="text/css">
body{	background-color:#e6e6f0;	}
.haut{ background:#d3d2cc url(haut.gif) repeat-x top;}
.bas{ background:url(bas.gif) repeat-x bottom;	}
.gauche{ background:url(gauche.gif) repeat-y left; }
.droite{ background:url(droite.gif) repeat-y right;}
.hautdroite{ background:url(hautdroite.gif) no-repeat top right;}
.hautgauche{ background:url(hautgauche.gif) no-repeat top left;}
.basdroite{ background:url(basdroite.gif) no-repeat bottom right;}
.basgauche{ background:url(basgauche.gif) no-repeat bottom left; padding:9px 15px;	min-height:47px;  }
		</style>
	</head>
	<body>
		<div class="haut"><div class="bas"><div class="gauche"><div class="droite"><div class="hautdroite"><div class="hautgauche"><div class="basdroite"><div class="basgauche">
			azeaze<br />aze<br />aze<br />aze<br />aze
		</div></div></div></div></div></div></div></div>
	</body>
</html>


Qu'en pensez vous ? je me demande si c'est bien conforme aux règles (xhtml, css...) et si ca n'entrainera pas de bug/ralentissement... dans certains navigateurs.

Un petit conseil d'un expert ?
Merci ! Smiley lol
Modifié par AlK (10 Feb 2006 - 16:33)
Bonjour,
Ta technique est officiellement valide mais pas officieusement car elle n'est pas sémantiquement correcte.
Celà dit, il est difficile de faire quelque chose de sémantiquement correct avec des cadres arrondis. Le plus pratique étant selon moi d'utiliser au maximum les éléments de la mise en page de base et après seulement de rajouter des divs si necessaire.

Par exemple, pour le menu horizontal de cette découpe : http://libert0.free.fr/testsv5/ , j'ai appliqué ma CSS à mes balises <li> et à mes balises <a> afin de ne pas rajouter de divs inutiles.

Après, si tu veux d'autres techniques pour créer des cadres arrondis, il y en a plusieurs détaillées ici et commentées. Smiley cligne
Sujet clos
Aller à