28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde !
J'ai un petit problème de compréhension concernant l'extension d'un kit extensible.
Voilà, sur la page html, j'ai le corps du de la page, qui comprends le haut du corps, le corps central sur lequel il y aura du texte et des images et enfin la partie basse du corps.
Comme ceci :
<div id="corps">

		 <div class="corps-haut">
		</div>	

		<div class="corps-central">
                </div>

                 <div class="corps-bas"> 
		</div>  
</div>	


Donc moi tous ce qu'il y a d'écrit et des images se trouvent dans le
<div class="corps-central">
                </div>


Son code css est :
#corps
{
   float: left;
}

.corps-haut
{
   width: 958px;
   height: 30px;
   margin-left: 22px; 
   margin-top: 0px;
   background-image: url("images/corps/corps-haut1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }  
  
  
  .corps-central
{
   width: 958px;
   /* ici je ne mets pas de height pour que l'image du corps-central1 se répète verticalement automatiquement avec le repeat-y */
   margin-left: 22px; 
   margin-top:0px;
   background-image: url("images/corps/corps-central1.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
  }  
  
  .corps-bas
{
   width: 958px;
   height: 24px;
   margin-left: 22px; /
   padding-top: 0px;
   background-image: url("images/corps/corps-bas1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }  

Mais l'image du corps-central1.jpg ne s'étend pas automatiquement verticalement.
Je ne mets pas de height pour que l'image du corps-central1 se répète verticalement automatiquement avec le repeat-y, mais il ne se répète pas.
J'ai mis 4 boites contenant du texte et images dans le corps, mais on dirai qu'il s'affiche sur le corps mais pas dans le corps. C'est pour celà que je vois que le corps ne s'étend pas.
Je vous laisse regarder ce que çà donne sur mon site.
http://foot-passion94.ifrance.com
Etes-vous êtes d'accord avec mon code html et CSS, pour qu'il soit dans le corps et non s'aficher sur le corps.
Pour voir mon fichier CSS : http://foot-passion94.ifrance.com/design.css
Pouvez vous me corriger et m'aider à corriger ce soucis.
Merci à vous.
Modifié par Zen-Spirit (19 Apr 2008 - 23:13)
Bonjour,

Avec les styles actuels, sur ta page d'accueil, div.corps-central fait très exactement 0 (zéro) pixels de hauteur. Tout son contenu dépasse allègrement, et le bloc div.corps-bas vient s'afficher juste en dessous de cet espace de zéro pixels de haut, c'est à dire collé à div.corps-haut.

Pour le pourquoi du comment, on pourra se pencher sur la question du dépassement des flottants, qui est traitée dans la FAQ du forum. Je te laisse chercher ça. Smiley cligne

PS: trouver un vrai hébergeur pour ce site ne serait pas du luxe. Sinon, parmi les hébergeurs gratuits Free est très correct pour un site perso.
Salut Florent !
Merci d'avoir répondu !
1/ C'est bon ce problème d'extensibilité du design est résolu, il fallait juste rajouter le code overflow: auto; ans le css du corps-central, ce qui donne :

  .corps-central
{
   overflow: auto;
   width: 958px;
   margin-left: 22px; 
   margin-top:0px;
   background-image: url("images/corps/corps-central1.jpg");
   background-repeat: repeat-y;
   margin-bottom: 0px;
  }  


2/ Oui, en fait tu as raison, pour l'hébergeur, le truc, c'est que je me suis inscrit sur iFRANCE juste pour faire un test. Pour faire des essais, le temps de m'inscrire chez FREE pour l'hébergeur.

MERCI bien !