Je commence à soder mon site

Zen-Spirit · 2 Avril 2008

Bonjour à tous.

Je suis entrain de constituer le corps de ma page html. J'ai un petit soucis.

Dans le corps il y a 3 parties, genre 3 box afin de mettre des infos dans ces 3 box, comme sur ce site là :Exemple ici.

Vous pouvez voir que dans le corps de leur site, il y a une partie blanche que j'appelle box-photo ( où il y a la la photo du joueur de foot et c'est écrit "A la une du mercredi 02 avril"), le 2ème box, c'est la partie noire où c'est écrit "ALL PSG TV" et la dernière partie c'est un autre box que j'appelle box info rouge, c'est là où c'est écrit "priez ..."

Le problème c'est ce dernier box.

Donc j'ai 3 boites à mettre dans ce corps et la dernière boite ne veut pas se mettre à coté de la 2ème boite. Pourtant lorsque je mets un float left pour la 2èm boite, elle se mets à coté, mais pour la 3ème, elle ne se pet pas à droite à coté de la 2ème boite, mais sous la 1ère boite.

Je vous laisse mon code, afin de m'aider à corrgier mon erreur, mais moi je ne vois pas l'erreur car j'ai fais exactement la même chose que pour la 2ème boite.

CODE

 #corps{
   float: left;
}
.corps-haut
{
   width: 958px;
   height: 30px;
   margin-left: 22px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/corps-haut1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }  
  
  
  .corps-central
{
   width: 958px;
   margin-left: 22px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding-top: 700px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-top:0px;
   background-image: url("images/corps/corps-central1.jpg");
   background-repeat: x-repeat;
   margin-bottom: 0px;
  }  
  
  .corps-bas
{
   width: 958px;
   height: 24px;
   margin-left: 22px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding-top: 0px;
   background-image: url("images/corps/corps-bas1.jpg");
   background-repeat: x-repeat;
   margin-bottom: 0px;
  }  
  
  
  
 #box-photo
{
   float: left;
}
 
  .box-photo-haut-blanc
  {
   width: 350px;
   height: 44px;
   margin-left: 21px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 22px;
   background-image: url("images/corps/box-photo-blanc-haut.jpg");
   background-repeat: no-repeat;
 }  
   
  .box-photo-centre-blanc
  {
   width: 350px;
   height: 220px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 21px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-photo-blanc-centre.jpg");
   background-repeat: x-repeat;
 }  
 
  .box-photo-bas-blanc
	{
   width: 350px;
   height: 44px;
   margin-left: 21px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-photo-blanc-bas.jpg");
   background-repeat: no-repeat;
 }  
  
  
   #box-info-noir
{
   float: left;
}
 
  .box-partie-haute-noir
  {
   width: 350px;
   height: 44px;
   margin-left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 23px;
   background-image: url("images/corps/box-texte-noir-haut.jpg");
   background-repeat: no-repeat;
 }  
   
  .box-partie-centre-noir
  {
   width: 266px;
   height: 220px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-texte-noir-centre.gif");
   background-repeat: x-repeat;
 }  
 
  .box-partie-bas-noir
	{
   width: 350px;
   height: 44px;
   margin-left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-texte-noir-bas.jpg");
   background-repeat: no-repeat;
 }  
  
	 
   #box-info-rouge
{
   float: left;
}
 
  .box-partie-haute-rouge
  {
   width: 266px;
   height: 13px;
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-haut.jpg");
   background-repeat: no-repeat;
 }  
   
  .box-partie-centre-rouge
  {
   width: 266px;
   height: 250px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-centre.jpg");
   background-repeat: x-repeat;
 }  
 
  .box-partie-bas-rouge
	{
   width: 266px;
   height: 13px;
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-bas.jpg");
   background-repeat: no-repeat;
 }

Zen-Spirit · 2 Avril 2008

C'est bon j'ai réussi à faire passer le 3ème bloc en haut à droite à coté du bloc central.

J'ai juste rajouter des - .

Je ne sais pas pourquoi, ici, il faut rajouter des moins, car pour le 2ème bloc il y avait pas besoin, mais en tout cas çà marche.

CODE

 #box-info-rouge{
   float: left;
}
 
  .box-partie-haute-rouge
  {
   width: 266px;
   height: 13px;
   margin-left: -62px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-haut.jpg");
   background-repeat: no-repeat;
 }  
   
  .box-partie-centre-rouge
  {
   width: 266px;
   height: 250px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: -62px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-centre.jpg");
   background-repeat: x-repeat;
 }  
 
  .box-partie-bas-rouge
	{
   width: 266px;
   height: 13px;
   margin-left: -62px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-bas.jpg");
   background-repeat: no-repeat;
 }

Zen-Spirit · 5 Avril 2008

Bonjour à tous !

Voilà sur mon site, j'ai un problème de décalage uniquement avec IEXPLORER alors qu'avec MOZILLA çà s'affiche très bien

Je galère vraiment depuis 2 voir 3 jours sur ce détails là et j'avance pas. J'ai beau lire des forums ou tutos sur internet, mais je n'arrive pas à corriger ce soucis. [decu]

je vous laisse l'adresse pour voir ce que çà donne sous les 2 navigateurs :

http://foot-passion94.ifrance.com

Merci à vous.

PS : Je poste mon soucis dans ce sujet car dans l'autre sujet c'était pas le bon !

Zen-Spirit · 5 Avril 2008

Bonjour à tous !

Voilà sur mon site, j'ai un problème de décalage uniquement avec IEXPLORER alors qu'avec MOZILLA çà s'affiche très bien

Je galère vraiment depuis 2 voir 3 jours sur ce détails là et j'avance pas. J'ai beau lire des forums ou tutos sur internet, mais je n'arrive pas à corriger ce soucis. [decu]

je vous laisse l'adresse pour voir ce que çà donne sous les 2 navigateurs :

http://foot-passion94.ifrance.com

Merci à vous.

PS : Je poste mon soucis dans ce sujet car dans l'autre sujet c'était pas le bon !

Connexion

Je commence à soder mon site

Sujets conseillés

Zen-Spirit

Lien vers le commentaire

Partager sur d’autres sites

Zen-Spirit

Lien vers le commentaire

Partager sur d’autres sites

Zen-Spirit

Lien vers le commentaire

Partager sur d’autres sites

Zen-Spirit

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité