28173 sujets

CSS et mise en forme, CSS3

bonjour a tous !

alors voila mon probleme, je souhaite encadrer le contenu de mon site dans une div (appelons la cadre) qui me sert principalement a mettre des bordure graphique au document, le cadre contient plusieur autre div, dont plusieur par ligne (float left utiliser) or sous IE tout marche tres bien mais sous Firefox les bordure sont uniquement sur les bord de la premiere div contenue dans le cadre

voici le css de mon cadre

div.cadre{
width:768px;
height:598;
padding-left:15px;
margin:0px;
background-image:url(images/1.jpg); /* l'image de bordure*/
}


je n'arrive pas a resoudre le probleme et une petite aide serait la bien venu !

merci d'avance
Modifié par phoeniix07 (08 Feb 2007 - 09:29)
Bonjour

Sans le code HTML correspondant à ce bout de feuille de style, difficile de t'aider.

Si le but est de créer une bordure graphique tout autour de ton cadre, pourquoi n'y a-t-il un padding qu'à gauche ? A quoi ressemble l'image de fond "1.jpg" ?
l'image ressemble a ca
ici

je sais bien que sans le code html c'est dur mais bon ca va faire beaucoup ! enfin tampis je le met



<div id='cadre'>


	<!--banniere avec logo --> 
	<div id="banniere">

	</div>
	
	<!---barrre du moteur de recherche --->
	<div id="barre_mot_recherche">
		
		<!-- moteur de recherche -->
		<div id="mot_recherche">

		</div>
	
		<!-- titre panier -->
		<div id="titre_panier">

		</div>
		
	</div>
	<!--Partie central-->
	<div id="partie_centrale">
		<!-- menu -->	 
		<div id="menu">

		</div>
		
		<!-- partie contenu -->
		<div id="contenu">

		</div>
		
		<!--partie de droite -->
		<div id="partie_droite">
			<!-- partie droite haut -->  
			<div id="partie_droite_haut">

			</div>
		
			<!-- partie droite bas --> 
			<div id="titre_partie_droite_bas">

			</div>
			<div id="partie_droite_bas">

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


je sais pas si ca sera bien plus clair enfait
Modifié par phoeniix07 (08 Feb 2007 - 09:29)
Ton image fait 788x4 pixels, et tu as défini la largeur de ton cadre à 768px.

Pour qu'on puisse voir la bordure à droite & à gauche, il faut mettre des valeurs de padding adaptées :
div.cadre {
   width: 768px;
   padding: 0 10px;
   background: url(images/1.jpg) center 0 repeat-y;
   margin: 0;
   ...
}


En passant : tu emploies des classes là où des identifiants seraient plus adaptés. FAQ : Quelle est la différence entre un id et une classe ?
probleme resolu : au final c'est les float:left qui possait probleme j'ai donc encadrer certaine div dans d'autre : je met le code

<div id='cadre'>


	<!--banniere avec logo --> 
	<div id="banniere">
		
	</div>
	
	<!---barrre du moteur de recherche --->
	<div id="barre_mot_recherche">
		
		<!-- moteur de recherche -->
		<div id="mot_recherche">
		</div>
	
		<!-- titre panier -->
		<div id="titre_panier">
		</div>
		
	</div>
	<!--Partie central-->
	<div id="partie_centrale">
		<!-- menu -->	 
		<div id="menu">
		</div>
		
		<!-- partie contenu -->
		<div id="contenu">
		</div>
		
		<!--partie de droite -->
		<div id="partie_droite">
			<!-- partie droite haut -->  
			<div id="partie_droite_haut">
			</div>
		
			<!-- partie droite bas --> 
			<div id="titre_partie_droite_bas">
			</div>
			<div id="partie_droite_bas">
			</div>
		</div>
	</div>
</div>

Modifié par phoeniix07 (08 Feb 2007 - 09:25)