Barre Image Fluide en repeat-y / height:100%

(reprise du message précédent)

Ce qui prête d'ailleurs à confusion, car ils ont l'air en effet de suggérer que tout ce construit avec des DIVs vides un peu comme j'ai essayé d'éviter (en utilisant des images, mais mauvais pour d'autres raisons - séparation css-contenu par ex non respecté) et ce que tu évites toi d'une façon encore plus remarquable sur ton site, je pense...

Après avoir lut ton tuto, et compris vos remarques sur ce post, j'approuves maintenant totalement votre façon de faire. Mais faut connaitre. Ayant tout appris tout seul, sans cours, juste avec le site du zéro et le bouquin de raphaël dont certains éléments je dois l'avouer m'échappent quelques peu, c'est pas évident. J'utilise des pistes et les exploitent à fond, en croyant que c'est la bonne méthode, mais construire un site conduit à beaucoup de fausses pistes....

Ce "tuto" qui est en fait plus un exemple décris et qui m'a causé du tord, le montre d'ailleurs bien.

Maintenant au boulot....

Et merci à vous. (désolé pour mon coup de gueule du début )
Modifié par Damonya (22 Jul 2006 - 19:15)

Bon j'ai essayé ta méthode, mais j'ai quelques soucis de comptabilité. Ca ne s'affiche correctement que sur Firefox....

J'ai dut user de padding et de margin négatif, pour pouvoir faire en sorte de transformer cette méthode en coin pour des bordures, ce qui doit expliquer tous mes soucis. Arf doit y avoir des choses mauvaises dans mon code.

<div class="centre_backrepeat_fond"><div class="centre_backrepeat_bar_h"><div class="centre_backrepeat_bar_d"><div class="centre_backrepeat_bar_g"><div class="centre_backrepeat_bar_b">
			
<div class="centre_coins">
<h1 class="centre_titre">																				
<a href="index.php" ><img id="haut_b"src="Images/Centre/Images Titre/centre_titre_vierge.jpg"alt="banniere MétéOBell" title="Retour vers la page d'accueil" /></a>
</h1>
	<ul>
		<li>Lien 01</li>
		<li>Lien 02</li>
		<li>Lien 03</li>
		<li>Lien 04</li>
		<li>Lien 05</li>
		<li class="centre_b_d">Lien 06</li>
	</ul>
</div>	

</div></div></div></div></div>		

.centre_backrepeat_bar_h
{	
background:url("../Images/Centre/repeat_h_titre.jpg") top repeat-x;
position:relative;
display:inline-block; 
}

.centre_backrepeat_bar_b
{	
background: url("../Images/Centre/repeat_b_corps.jpg") bottom repeat-x;
position:relative;
display:inline-block; 
}

.centre_backrepeat_bar_g
{	
background:url("../Images/Centre/repeat_g_corps.jpg") left repeat-y;
position:relative;
display:inline-block; 
}

.centre_backrepeat_bar_d
{	
background: url("../Images/Centre/repeat_d_corps.jpg") right repeat-y;
position:relative;
display:inline-block; 
}

.centre_backrepeat_fond
{	
background: url("../Images/fond_03.gif") repeat;
position:relative;
display:inline-block; 
}

div.centre_coins 
{
background:url("../Images/Centre/coin_h_g_titre_01.gif") no-repeat left top;
width:100%;
/*pour corriger un bug d'IE qui a du mal avec la dimension hauteur 1/4*/
position:relative;
z-index:0; 
} 

div.centre_coins h1 
{
background:url("../Images/Centre/coin_h_d_titre_01.gif") no-repeat right top;
margin-top:0;/*supression marge intérieur haut de h1 */
padding-bottom:256px;/*de la largeur du backround-haut pour pas que le ce qu'il y a en dessous ne vienne dessus*/
margin-bottom:-196px;/*mais du coup le contenu situé en dessous, est beaucoup trop bas : 256 - les 60 du backround-haut = 196*/

/*ANTI-BUG COMPTABILITE : pour corriger un bug d'IE qui a du mal avec la dimension hauteur 2/4*/
position:relative;
z-index:0; 
} 

div.centre_coins ul 
{
/*ANTI-BUG COMPTABILITE : Application sur les listes, d'une marge pas défaut de 40px de coté gauche. Applicable quel que soit le navigateur. Les 40px c'est pour être comme Firefox sur les autres*/
margin-left:0;
padding-left:40px;

padding-bottom:39px;/*pour pas que le texte mange la barre du bas 30+9*/
background:url("../Images/Centre/coin_b_g_corps_01.gif") no-repeat left bottom;
margin-bottom:0;
margin-right:11px;
/*pour corriger un bug d'IE qui a du mal avec la dimension hauteur 3/4*/
 position:relative;
z-index:10; 
} 

div.centre_coins ul li
{
margin-top:30px;/*30 de largeur entre chaque li*/
margin-bottom:30px;
}

div.centre_coins ul li.centre_b_d
{
background:url("../Images/Centre/coin_b_d_corps_01.gif") no-repeat right bottom;
margin-bottom:-39px;/*30 de largeur normale pour le dernier li + 9 de bordure*/
padding-bottom:39px;
padding-top:119px;/*128 d'image-9 de bordure=119*/
margin-top:-119px;
margin-right:-11px;

/*pour corriger un bug d'IE qui a du mal avec la dimension hauteur 4/4*/
position:relative;
z-index:10; 
}

Ca c'est pour le 1er cadre avec des <li> A la limite c'est celui qui me pose le moins de probleme, sauf sur Opéra.....

L'autre je vais essayer de chercher encore avant de revenir ici, peut être.



Le lien c'est ici : www.meteobell.com/template_3.php



EDIT : bon pour Opéra, j'ai téléchargé la version 9 et rajouté width:100% au .centre_backrepeat_etc et c'est bon. toujours des petits bugs de décalages quand même. Par contre IE catastrophe.....


Du coup j'ai utilisé la méthode des positions relatives parlés plus tôt, et là c'est impec sur les 3 navigateurs opéra, ie et firefox, donc...........
www.meteobell.com/template_4.php , pis c'est franchement plus simple en plus.....
Modifié par Damonya (23 Jul 2006 - 19:31)