Background qui ne se repeat pas :)

Bonjour,

Je suis entrain de découper un design et j'ai déjà un pbm

Les bordures gauches et droites ne se répetent pas jusqu'en bas ( elles ne se répétent pas du tout ).

Je me suis basé sur un gabatit d'Alsacréation pour débuter, mais j'ai du faire une erreur car sa marche pas aussi bien que pour vous : ici

Adresse de la page Adresse de la page

Code raccourci :

<style type="text/css">
	BODY { margin:0; padding:0; text-align:center; background-color:#353535}
		
	#page { position:absolute; width:980px; left: 50%; margin-left: -490px; text-align:left; background-color:#272727 }
		
	#bordureG 	{ position:absolute; left:0; width:74px; background-image:url(images/a_02.jpg); background-repeat:repeat-y; background-color:#FF0000 }
	#cadreC 	{ margin-left:74px; margin-right:72px; width:834px; background-color:#272727 }
	#bordureD 	{ position:absolute; right:0; width:72px; background-image:url(images/a_04.jpg); background-repeat:repeat-y; background-color:#FF0000 }
		
	#bloc_left	 { float:left; width:137px; height:895px }
	#bloc_cadreC { float:left; width:697px; height:895px; background-color:#272727 }
	.clear		 { clear:both }

	#footer		 { height:47px; background-image:url(images/a_09.jpg);}
</style>

<div id="page">

	<div id="menu_log">
		<form name="connexion" action="#" method="post">
		</form>
	</div>
	
	<div id="bordureG">&nbsp;</div>
	<div id="bordureD">&nbsp;</div>

	<div id="cadreC">

		<div id="header"> </div>
		<div id="menu_top"><img id="a_05" src="images/a_05.jpg" width="834" height="26" alt="" /></div>
		<div id="bloc_pub">
			<img id="a_06" src="images/a_06.jpg" width="834" height="120" alt="" />
		</div>

		<div id="bloc_left"><img id="a_07" src="images/a_07.jpg" width="137" height="895" alt="" /></div>
		<div id="bloc_cadreC"><img id="a_08" src="images/a_08.jpg" width="697" height="895" alt="" /></div>
		<div class="clear"></div>

		<div id="footer"> </div>

	</div>
		
	
</div>

Je suis arrivé à corriger à peui prés le pbm en ajoutant un height:100% à #bordureG et #bordureD, seulement sa ne fonctionne que sur Firefox et sa cré un bug au bas de la page, la bordure descend plus bas que le contenu.

Si quelqu'un pouvait m'aider je lui en serait trés reconnaissant.
Modifié par yotsumi.fx (05 Aug 2006 - 13:38)

Salut

La largeur de ton site étant fixe, le plus facile pour toi serait de créer une image de 980px de largeur et 1px de hauteur, qui reproduirait ta marge de droite & ta marge de gauche. Il suffit alors de l'appliquer en background à #page en indiquant "repeat-y" pour l'avoir sur toute la hauteur du contenu.

Remarque en passant : la largeur étant fixe, tu peux facilement centrer ton site en utilisant

#page {
width: 980px;
margin: 0 auto;
...
}

Les marges négatives ont le facheux inconvénient de faire disparaître une partie du contenu si la résolution de l'écran est trop faible ou si le visiteur réduit la taille de la fenêtre.