28173 sujets

CSS et mise en forme, CSS3

[résolu]Le contenu dépasse du/des conteneur(s)

Bonjour à tous,
1er post sur ce forum (et je n'espère pas le dernier ...).

L'EXISTANT :

J'ai une page HTML construite de cette façon :

<body>

  <div class="conteneur">

    <div class="entete">
    </div>

    <div class="corps">
        <div class="menu"> // menu
        </div>
        <div class="contenu"> // contenu de la page
           ::: titre de la page :::<br/>
           <table>
           [b]<?php code qui génère le tableau?>[/b]
           </table>
        </div>
        <div class="menu1"> // autre menu
        </div>
    </div>

    <div class="pied">
    </div>
  </div>
</body>

et son .css correspondant et simplifié :

.conteneur {
  position:absolute;
  width:800px;
  border: 1px solid #717E91;
  top:2%;
  left:10%;
}

.entete {
  width:800px;
  height:40px; 
}

.pied {
  width:800px;
  height:40px; 
  clear:both;
}

.corps {
  width:800px;
}

.menu {
  float:left;
  width:100px;
  height:480px;
  border-bottom: 1px solid #717E91;
  border-top: 1px solid #717E91;
}

.contenu {
  float:left;
  width:598px;
  height:480px;	
  border: 1px solid #717E91;
}

.menu1 {
  float:right;
  width:100px;
  height:480px;
  border-bottom: 1px solid #717E91;
  border-top: 1px solid #717E91;
}


LE PROBLEME :
Comme l'indique le titre, le problème vient précisément de la balise <div class="contenu"></div>. voici le résultat obtenu sur mon site : http://hotsizzle.free.fr/sketchs.php Comme vous pouvez constatez, le conteneur ne suit pas.

MA RECHERCHE :
J'ai recherché sur le forum et j'ai trouvé ce lien: http://forum.alsacreations.com/topic.php?fid=4&tid=17303&s=div+conteneur
mais il ne correspond pas vraiment.
Enfin bon voilà tout! je vous remercie encore pour votre aide
Modifié par krispouille (16 Nov 2006 - 18:16)
Salut et bienvenue,
3 bonnes habitudes à prendre:

1-Baliser ton code par les balises codes
2-Vérifier tes url(ton lien ne marche pas)
3-Lire la FAQ, ton problème est-on ne peux plus classique, la solution s'y trouve.A+
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
toutes mes excuses ... je vais faire ça
*edit*
les changements ont été effectué. Et c'est vrai que c'est quand même plus lisible.
Par contre, j'ai regardé la FAQ, mais l'utilisation de "clear:both" n'arrange pas le problème.
Par ailleurs, j'ai remarqué une chose; en agrandissant la hauteur (height) de la div "contenu", son conteneur s'adapte lui aussi sans problème.
voilà, je sais pas si ça peut aider; quant à moi j'y retourne.
encore merci.
Modifié par krispouille (16 Nov 2006 - 11:20)
résolu ...
comme la div "contenu" contient un tableau, j'ai essayé de mettre "display:table" comme suit:

.contenu {

  float:left;

  width:598px;

  height:480px;	

  border: 1px solid #717E91;

  [b]display: table;[/b]

}

Modifié par krispouille (16 Nov 2006 - 18:17)
Sujet clos
Aller à