Version complète: sur le forum Webmaster Hub : Je commence à soder mon site
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Zen-Spirit
mercredi 2 avril 2008 à 19:41
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
mercredi 2 avril 2008 à 20:04
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
samedi 5 avril 2008 à 18:47
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
samedi 5 avril 2008 à 18:47
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 !
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.