28172 sujets

CSS et mise en forme, CSS3

Bonjour à Tous,

Voila j'ai fait une mise en page avec un script qui s'appelle mootab.

Dans chaque onglet, j'ai mis du contenu. Mon problème est que, dès qu'il y a trop de contenu, une barre de scroll apparait. Au niveau esthétique.
Ce script me permet de modifier le height.

Quand je modifie la height, à 700px par exemple, alors que le contenu ne prend que 600px de place, cela fonctionne très bien, il n'y a plus de scroll.
le problème, c'est que le contenu n'est jamais de la même taille. Quand il est beaucoup plus petit, c'est pas beau d'avoir un blanc de 700px en dessous de l'onglet.

J'ai essayé de mettre height:100% mais cela ne fonctionne pas la bar de scroll est toujours apparente.

Avez vous une solution, pour que la div s'adapte au contenu sans me mettre de scroll bar ?

Je vous remercie par avance pour votre aide
Voici un exemple » Ne fixe pas la hauteur.

upload/20350-noScroll01.png

Tu nous a pas montrer ton script CSS. Ce serais différent si tu nous montrais ton code CSS.

CSS Source »

body { 
  margin:0; 
  margin-top:12px; 
  padding:0; color:#333; 
  font-family:sans-serif; 
  font-size:0.8em; 
} /* Document */
div.conteneur {  
  border:2px solid red; 
  margin: 0 auto; 
  width: 400px; 
  background:#333; 
  padding:5px; 
  background:#333; 
  margin-bottom:3px; 
} /* Parent */
div.contenu { 
  background:#d4d0c8; 
  padding:10px; 
  text-align:justify; 
} /* Enfant */
p { 
  color:#666; 
} /* Paragraphe */
p.texte { 
  font-size:120%; 
  color:#000; 
} /* Paragraphe classe */

XHTML Source »

<div class="conteneur">
  <div class="contenu">
  <p>Un texte</p>
   <p class="texte">Un texte</p>
  </div>
</div>
<div class="conteneur">
  <div class="contenu">
  <p>Un texte</p>
   <p class="texte">Un texte</p>
   <p>Un texte</p>
  </div>
</div>
</body>



Je ne prétend pas avoir trouver la solution à ton problème. Mais celui-ci fonctionne. Il gère la hauteur en fixant la largeur seulement. La largeur est fixé sur le div conteneur. Aucun scroll. La hauteur s'affirme en fonction du contenu « p »

Je t'invite quand même à placer ton source CSS. Si tu fixe la hauteur il est évident que le scroll và embarquer. Informe toi en ce qui concerne la largeur et la hauteur, si elle doit être fixer ou pas. Ce point est important.

Ton problème est à ce niveau. Savoir fixé des attributs en fonction de tes besoins.
Dans ton cas tu dois fixé la largeur mais pas la hauteur.

Dans mon langage fixé veut dire attribuer une valeur.

» Élément fixé » width:400px; // largeur renseigner.
» Élément non fixé » ----- // Hauteur non renseigner.

Informe toi aussi concernant l'héritage » Parent/Enfants. Très important.

++ zardoz
Modifié par zardoz (21 Jul 2010 - 22:41)