[Résolu] Comment éviter le débordement du texte dans un block?

Bonjour

J'aimerais savoir comment ne pas faire déborder le texte d'un <div> lorsque celui-ci arrive au bout du <div>?

A chaque fois que je met un paragraphe dans un <div>, si le texte est trop long, le texte continu tout droit et sort de l'écran

En fait, je souhaiterais que dés que le texte butte contre le bord droit du <div>, il descende tout seul à la ligne.

Aussi, dans le même ordre d'idée, comment faire pour que le block contenu s'étire automatiquement lorsque le texte devient trop long mais tout en laissant un block contenu par défaut assez grand?

Voilà l'URL de ma page : http://metz.footallplaza.com/page1.htm

Et le CSS qui va avec : http://metz.footallplaza.com/design.css

J'espère que vous pourrez m'aider

Coucou
J'ai rapidement jeté un oeil à ta feuille ...
Et il me semble qu'il y a (un peu) beaucoup de flottants, non ?

Ton problème ne serait-il pas celui indiqué dans la FAQ :
Comment éviter que mes éléments flottants (float) dépassent de leur conteneur ?

bah à part les 3 float de mon header (indispensables car j'ai 3 images sur une seule ligne), j'ai juste un float:left pour le menu et un float:right pour le contenu

je viens de lire la partie de la FAQ que tu viens de m'indiquer mais je n'ai pas vu le rapport avec mon problème

soyez indulgents s'il vous plait, je débute

jedimaster a écrit :
J'aimerais savoir comment ne pas faire déborder le texte d'un <div> lorsque celui-ci arrive au bout du <div>?

A chaque fois que je met un paragraphe dans un <div>, si le texte est trop long, le texte continu tout droit et sort de l'écran

En fait, je souhaiterais que dés que le texte butte contre le bord droit du <div>, il descende tout seul à la ligne.

C'est le comportement par défaut : un texte va à la ligne automatiquement.

Cependant, le lien que tu donnes ne montre aucun texte, donc il est très difficile de deviner d'où pourrait venir ton problème très spécifique.

A tout hasard, cela pourrait être le "syndrôme du Supercalifragilisticexpialidocius"

- résolu ici
- et ici aussi
- ou encore ici

Si ce n'est pas ça, impossible de deviner sans code ni exemple en ligne.

a écrit :
En fait, je souhaiterais que dés que le texte butte contre le bord droit du <div>, il descende tout seul à la ligne.

overflow-y : auto;

Te permet de mettre une scrollbar verticale uniquement...


Modifié par darksky874 (04 Nov 2006 - 17:38)

Effectivement j'avais testé en restant appuyé sur une seule lettre

Et pour qu'il s'étire avec le texte, j'ai tout simplement enlever le height du block contenu (#contenu_centre).

Par contre, il me reste 2 problèmes :

1 ) le texte est collé sur les bords, je n'ai pas de marges intérieures et même quand j'applique un padding sur le block contenu, j'ai une partie de l'image de fond du block contenu qui se répète à droite

2) comment faire pour que la taille du block contenu ait une hauteur minimum tout en s'étirant vers le bas si le texte est trop long?

Du coup, le problème sera le même pour mes 3 menus sur la gauche

Je vous remets les liens (cette fois y'a le lorrem machin) :

La page HTML : http://metz.footallplaza.com/page1.htm

Le CSS : http://metz.footallplaza.com/design.css

Si vous voyez des choses inutiles dans mon HTML et dans mon CSS, n'hésitez pas à me le dire pour que j'optimise mes pages au mieux

Merci

jedimaster a écrit :
1 ) le texte est collé sur les bords, je n'ai pas de marges intérieures et même quand j'applique un padding sur le block contenu, j'ai une partie de l'image de fond du block contenu qui se répète à droite

Oui c'est normal puisque la taille du bloc augmente si tu lui ajoutes des padding.
C'est le principe même du modèle de boite, sans doute la première chose à connaitre
http://openweb.eu.org/articles/dimensions_boites_css/

En fait, vu que tu appliques des largeurs (673px) à tous tes éléments, ce qui - en passant - est inutile puisqu'un élément occupe par défaut toute la largeur disponible dans son conteneur (revoir ce tuto de base), cela provoque des soucis de taille dès que tu joues avec les marges ou les paddings.

Voilà comment t'en sortir :

#contenu{
	float:right;
	margin-top:20px;
width:673px; /* ici une largeur suffit, inutile de la préciser pour les éléments contenus */
	}
	
#contenu_haut {
	background-image:url("images/bas/bas_02.jpg");
	height:26px;
	}
	
#contenu_centre {
	background-image:url("images/bas/bas_05.jpg");
	padding: 0 20px;
	}
	
#contenu_bas {
	background-image:url("images/bas/bas_06.jpg");
	height:25px;
	}

Il va te falloir revoir très sérieusement les bases des CSS car sinon tu ne vas pas t'en sortir : comprendre le modèle de boite est un minimum vital.
Tu trouveras ici une méthode générale à suivre consciencieusement.

jedimaster a écrit :

2) comment faire pour que la taille du block contenu ait une hauteur minimum tout en s'étirant vers le bas si le texte est trop long?

Pour cela, il va te falloir utiliser une méthode avec deux arrières-plan (un en haut et un en bas), mais je crois que c'est un peu trop complexe pour l'instant : mieux vaut commencer par les bases.


En fait, il y'a énormément de propriétés inutiles dans ton code mais je t'invite à reprendre les bases générales avant de rentrer dans ces choses là.
Modifié par Raphael (04 Nov 2006 - 18:17)

ça au moins c'est une réponse très honnête

c'est sûr que mon apprentissage du XHTML/CSS a sûrement été assez rapide (je l'ai fait avec le tuto du Site du Zéro si vous connaissez) et effectivement le modèle de boites ne faisait pas partie du cours que j'ai suivi

par contre, ce que j'ai du mal à saisir, c'est le "0 20px" après le padding. Pourquoi y a-t-il 2 valeurs?

en tout cas j'apprends beaucoup avec vous et je vous en remercie

jedimaster a écrit :
par contre, ce que j'ai du mal à saisir, c'est le "0 20px" après le padding. Pourquoi y a-t-il 2 valeurs?

padding : 0 20px; est une version condensée de padding: 0 20px 0 20px;
C'est là aussi la version courte pour :

padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;

L'ordre est celui des aiguilles d'une montre en commençant à midi.

EDIT : il existe actuellement des bons bouquins qui seraient de très bons supports d'apprentissage (l'auteur du Siteduzéro en a publié un récemment, et tu en trouveras un autre en bannière en haut du forum )
Modifié par Raphael (04 Nov 2006 - 18:54)

merci pour l'explication, c'est plus clair maintenant (c'est une méga-propriété en fait si j'ai bien compris)

je comptais m'acheter un ou 2 bouquins (un XHTML/CSS et un PHP) pour parfaire mon apprentissage mais ça n'empêche que je pense publier mon site avant d'en connaitre tous les recoins. J'utiliserais les bouquins pour améliorer quelques petites choses deça et là

sinon pour revenir au truc que tu jugeais complexe, tu peux y aller, ça m'intéresse
Modifié par jedimaster (04 Nov 2006 - 20:06)

jedimaster a écrit :

2) comment faire pour que la taille du block contenu ait une hauteur minimum tout en s'étirant vers le bas si le texte est trop long?

En fait, je pense qu'en utilisant min-height ça devrait marcher, faudra juste que je fasse la manip indiquée dans la FAQ pour qu'il y ait compatibilité sur IE aussi

Sinon je viens de supprimer 2-3 trucs inutiles d'après ce que je conclus de ce que tu m'as dit (notamment l'histoire des width inutile dans les contenants), dis-moi juste si je suis sur la bonne voie

Par contre j'ai un nouveau problème : je viens de mettre un H1 au titre du lorrem ipsum et j'ai une barre grise qui s'affiche

--> http://metz.footallplaza.com/page1.htm

CSS --> http://metz.footallplaza.com/design.css
Modifié par jedimaster (05 Nov 2006 - 15:38)

jedimaster a écrit :
Par contre j'ai un nouveau problème : je viens de mettre un H1 au titre du lorrem ipsum et j'ai une barre grise qui s'affiche

Eh oui, c'est le très classique problème de marges par défaut (ici le margin-top de h1) :
http://forum.alsacreations.com/faq/#item44

merci