Cadre extensible aux coins arrondis avec bordure

Bonjour,

j'ai suivi le tutoiral http://www.alsacreations.com/articles/cadre/
afin de pouvoir construire un cadre arrondi extensible sans l'utilisation de tableau.

J'ai bien compris comment intégrer les coins, par contre, dans mon cas, en plus des coins arrondis, j'ai une bordure qui se compose d'une ligne de 1 px rmaron puis une ligne blanche de 1px puis une nouvelle ligne beige clair de 1px et enfin le fond du cadre beige.

Je ne vois pas comment traiter cette bordure autrement qu'avec des images que ce soit les coins ou les côtés du cadre. Dans ce cas, comment intégrer les bordures en dehors des coins afin que le cadre soit extensible.

Je sais bien evidemment le faire avec un tableau, mais cette méthode est semble t'il a proscire

merci de votre aide
Modifié par epeichette (11 May 2007 - 11:17)

Salut,

Tu peux t'inspirer de cette page , il te suffit d'utiliser ce procédé, et d'adapter tes images avec le graphisme de bordure+coin arrondi que tu veux.
Modifié par Florent V. (11 May 2007 - 16:28)

Merci de ta réponse, je viens d'analyser cette page.
Je comprend comment elle peut être extensible verticalement puis qu'il y a répétition de l'image droite et gauche dans le contenu, mais la largeur me semble fixe et je ne vois pas comment je pourrais l'a rendre variable.

En fait, je n'ai pas de texte à mettre en en tête et pied de page.
Si on peut mettre une image haute et droite répétable pour faire la bordure haute et basse du cadre,dans les div entete et pied de page, je ne sais pas comment dire à ces div d'en tête ou de pied de page qu'il faut qu'elles prennent la largeur de la div de contenu.

epeichette a écrit :
mais la largeur me semble fixe

Elle ne l'est pas. Tester en réduisant ou agrandissant la fenêtre du navigateur.


Sinon, une solution relativement simple serait d'adapter les techniques avec des images de coin.

<div id="conteneur"><div id="conteneur-bis">

<div id="haut">
<img class="gauche" src="..." alt="" />
<img class="droite" src="..." alt="" />
</div>

... Ici tout ton contenu ...

<div id="bas">
<img class="gauche" src="..." alt="" />
<img class="droite" src="..." alt="" />
</div>

</div></div>

Le premier conteneur a pour image de fond l'image répétable en hauteur pour le côté gauche, le conteneur bis a pour image de fond l'image répétable en hauteur pour le côté droit.

div#haut et div#bas ont pour image de fond les images répétables en largeur pour le haut et le bas.
Et enfin les images font les coins.

Salut,

ce n'est pas très clair, il faudrait une image. Et puis aussi du code html, sans code html natif ça ne veux pas dire grand chose de parler de css.

Par code html natif j'entend une page avec du contenu balisé.
Modifié par Christian Le Bouler (11 May 2007 - 19:40)

Bonjour,

De retour de vacance, j'ai essayé la methode de flrent V. Mais ça ne marche pas chez moin .
Les 4 images sont dans les coins mais je ne vois pas les images se répéter sur les côtes.
voila ce que j'ai fait :

<div id="child_actu"  class="nav_child nav_actu_pos" onmouseover="ctIE();" onmouseout="iaIE();" style="visibility: hidden">
	<div class="conteneur"><div class="conteneur_bis">
		<div class="haut">
			<img class="gauche" src="images/cadre_HG.jpg" alt="" />
			<img class="droite" src="images/cadre_HD.jpg" alt="" />
		</div>
		... Ici tout ton contenu ...
		... Ici tout ton contenu ...
		<div class="bas">
			<img class="gauche" src="images/cadre_BG.jpg" alt="" />
			<img class="droite" src="/mages/cadre_BD.jpg" alt="" />
		</div>
	</div></div>
</div>

le premier div, me permet de positionner mon calque dans la page et de le faire apparaitre et disparaitre grace à du javascript

voici mainteanant mon fichier css :

.nav_child{font-size : 1.05em;  color:#000000; font-weight:bold; background-color: #e8ddc6; border: 1px #C0A261;position:absolute;}
.nav_actu_pos{left:70px;top:59px; z-index:10; }
.conteneur, .conteneur_bis {padding :14px }
.conteneur {background:white url(<?= $_SESSION['path_css_img_sess']?>cadre_G.jpg) top left repeat-y;}
.conteneur_bis{background:white url(<?= $_SESSION['path_css_img_sess']?>cadre_D.jpg) top left repeat-y;}
.bas {height: 13px;background:white url(<?= $_SESSION['path_css_img_sess']?>cadre_B.jpg) bottom left repeat-x;} 
.haut {height: 7px;background:white url(<?= $_SESSION['path_css_img_sess']?>cadre_H.jpg) bottom left repeat-x;} 
/* propriétés des 4 coins */
.gauche, .droite{width: 14 px;background-repeat: no-repeat;font-size:1px; /* correction d'un bug IE */}
.gauche{position : absolute;left: 0;}
.droite{position : absolute;right: 0;} 

Je précise que si j'utilise des classes de Css c'est qu'a terme plusieurs calques seront construit avec cet encadrement.

Merci de me dire ce qui pourrait clocher
Modifié par epeichette (29 May 2007 - 20:08)

personne ne peut m'aider?

Ton problème vient à vue de nez du fait qu'à chaque fois, pour un nouveau bloc, tu demandes une couleur de fond blanche. Or, ce nouveau bloc en question est censé laisser apparaitre l'image de fond de son parent, par exemple.

.conteneur {background:white url(cadre_G.jpg) top left repeat-y;}
.conteneur_bis{background:white url(cadre_D.jpg) top left repeat-y;}

Ici, les deux blocs sont imbriqués. C'est très bien que div.conteneur ait un fond blanc, mais div.conteneur_bis doit avoir un fond transparent à l'exception de l'image de fond qui dessine la deuxième bordure verticale. D'ailleurs, je ne vois pas trop pourquoi les deux images de fond sont alignées à gauche. Il devrait y en avoir au moins une à droite, non ? De plus, il faut préciser dans l'ordre : d'abord le positionnement horizontal, puis le positionnement vertical. Exemple avec correction :

[code].conteneur {background: white url(cadre_G.jpg) left top repeat-y;}
.conteneur_bis{background: url(cadre_D.jpg) right top repeat-y;}

me revoila avec mon problème de cadre

J'ai fait quelque modification sur les css tenant compte de vos remarques et intégrant le décalage du texte.
Voici le code :

.test {width:80px; height:80px; align:center}
.conteneur {background: url(<?= $_SESSION['path_css_img_sess']?>cadre_G.jpg)  left top repeat-y;z-index:15;}
.conteneur_bis{background: url(<?= $_SESSION['path_css_img_sess']?>cadre_D.jpg) right top repeat-y;z-index:20;margin-left:14px;padding-right:14px}
.bas {height: 13px;background: url(<?= $_SESSION['path_css_img_sess']?>cadre_B.jpg) left bottom  repeat-x;z-index:50} 
.haut {height: 7px;background: url(<?= $_SESSION['path_css_img_sess']?>cadre_H.jpg) left top repeat-x;z-index:30;} 
/* propriétés des 4 coins */
.gauche, .droite{width: 14px;background-repeat: no-repeat;font-size:1px;}
.gauche{position : absolute;left: 0; margin: 14pxleft }
.droite{position : absolute;right: 0;}

le résultat est parfait avec Firefox la preuve :


par contre sous IE j'ai eu de drôle de surprise,
voila ce que cela donne avec IE7


Je ne comprend pas pourquoi les images ne sont pas répéter horizontalement alors qu'elles le sont verticalement. En plus il semble que la couleur de l'image n'est pas la même que celle du css ???

et avec IE6 c'est pire



avec IE 6, le calque prendre toute la largeur du navigateur

merci pour l'aide que vous m'apporterez pour rectifier cela

Heu... c'est pour arriver à faire cette petite bordure avec un coin arrondi que tu utilises plein d'élément HTML dans tous les sens ? Parce qu'il y a tout de même dix fois plus simple à faire...

Bonjour,

C'est cela pour ce jeux de templates, mais ce n'est pas le seul jeux que j'utilise. Et pour les autres effectivement, il y a les 4 coins arrondi. Maintenant les images n'étaient pas encore prêtes.... D'où mon test sur ce jeux.

Donc y a t'il une solution a mon problème? Sinon je vais reprendre la méthode des tableaux, ce qui serait dommage...

Merci par avance

Salut,

histoire de me répéter :

a écrit :

sans code html natif ça ne veux pas dire grand chose de parler de css.

Par code html natif j'entend une page avec du contenu balisé.

Sinon

epeichette a écrit :
je vais reprendre la méthode des tableaux, ce qui serait dommage...

Mais non, mais non, ce n'est plus qu'une question de mois avant que ça redevienne tout à fait à la mode.
Modifié par Christian Le Bouler (05 Jun 2007 - 20:34)

Bonjour, j'ai déjà posté mon code HTML suite aux différentes réponses que j'ai eu, mais le revoilà

côté HTML

<div id="child_actu"  class="nav_child nav_actu_pos" onmouseover="ctIE();" onmouseout="iaIE();" style="visibility: hidden">

	<div class="conteneur"><div class="conteneur_bis">

		<div class="haut">

			<img class="gauche" src="images/cadre_HG.jpg" alt="" />

			<img class="droite" src="images/cadre_HD.jpg" alt="" />

		</div>

		... Ici tout ton contenu ...

		... Ici tout ton contenu ...

		<div class="bas">

			<img class="gauche" src="images/cadre_BG.jpg" alt="" />

			<img class="droite" src="/mages/cadre_BD.jpg" alt="" />

		</div>

	</div></div>

</div>

et en ce qui concerne mes css

.conteneur {background: url(<?= $_SESSION['path_css_img_sess']?>cadre_G.jpg)  left top repeat-y;z-index:15;}

.conteneur_bis{background: url(<?= $_SESSION['path_css_img_sess']?>cadre_D.jpg) right top repeat-y;z-index:20;margin-left:14px;padding-right:14px}

.bas {height: 13px;background: url(<?= $_SESSION['path_css_img_sess']?>cadre_B.jpg) left bottom  repeat-x;z-index:50} 

.haut {height: 7px;background: url(<?= $_SESSION['path_css_img_sess']?>cadre_H.jpg) left top repeat-x;z-index:30;} 

/* propriétés des 4 coins */

.gauche, .droite{width: 14px;background-repeat: no-repeat;font-size:1px;}

.gauche{position : absolute;left: 0; margin: 14pxleft }

.droite{position : absolute;right: 0;}

j'espère que cela pourrat vous aider. J'aimerai bien savoir ce qui ce passe...

Ben oui mais ça ce n'est pas vraiment un code html qui ressemble à quelque chose, c'est juste un tas de div pour permettre de mettre en oeuvre ce que tu as en tête et ça ne correspond en rien à un balisage structurant un contenu.

Pas de <p> pas de <hn> pour commencer...

Bref pas franchement inspirant tout ça

bien pour le moment ma préoccupation était de contruire mon calque, ensuite il y aura une liste avec un lien à l'interieur du calque.

Mais si vous avez une idée de la méthode que je pourrais utiliser pour arriver a mes fin, ça m'intérresse...