Contenu dépasse du div! [RESOLU]

[GAUNCE]

Problème récurrent pour moi:
Que faire pour que le div descende sous la photo au lieu de s'arrêter sous le texte si ce dernier est plus haut (que la photo) ? et que je ne mette pas des <br> partout!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Kazé]

URL ou code source STP ?

[GAUNCE]

Je reviens.
L'adresse de la page, mais j'ai laissé mes <br> pour que ça descende sous les images...
Tu enlèves les br et tu verras...
http://amichant.free.fr/nosconcerts.htm

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

Avec un flottant qui risque de dépasser en hauteur l'élément placé à ses côtés, il faut utiliser un clear: both; dans la définition css de l'élément dont on veut un passage en dessous du plus grand.

Code : Tout sélectionner

<img classe="floatleft" src="img.jpg /><p>Le Père Fouettard dans Les Landes</p>
<p style="clear:left"> La suite en dessous de la partie gauche</p>

[GAUNCE]

Avec un flottant qui risque de dépasser en hauteur l'élément placé à ses côtés, il faut utiliser un clear: both; dans la définition css de l'élément dont on veut un passage en dessous du plus grand.

Code : Tout sélectionner

<img classe="floatleft" src="img.jpg /><p>Le Père Fouettard dans Les Landes</p>
<p style="clear:left"> La suite en dessous de la partie gauche</p>

Si tu pouvais m'expliciter cette notion de flottant qui etc..
Déja je ne mets pas dans cette page, les photos en CSS parce qu'elles restent temporairement et il me semble que même avec une seule photo le div s'arrête sous le texte...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

Ton cas est similaire à cela:
http://css.alsacreations.com/Faire-une- ... t-flottant


Et tu peux toujours relire
http://css.alsacreations.com/Bases-et-i ... ses-en-CSS
cela ne gâche rien d'en abuser!

[Gagea]

Bonsoir Gaunce,
Voici l'avis d'une débutante : Pourquoi ne pas placer chaque "Manisfestation du calendrier" dans un div contenant la date, le lieu, le nom de la chorale et la photo ?
Essaye de placer toutes les photos les unes sous les autres et si possible donne-leur la même largeur. Je pense que ta page serait plus agréable à regarder. Tu pourrais faire les photos un peu plus grandes (s'il n'y en pas trop) car on n'y voit pas grand chose ou bien tu mets une vignette avec un lien qui pointe sur la grande photo.
Tu pourrais aussi faire un diaporama, genre imageCollection avec une planche contact, regroupant toutes les manifestations.
J'en ai profité pour retoucher la photo Lous esclatats de Ondres.

Correction des lignes verticales et de la dominante rouge. Mais, à mon avis, les photos mériteraient d'être plus grandes. On ne peut reconnaître personne et c'est quand même le plus intéressant.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[GAUNCE]

Voici l'avis d'une débutante : Pourquoi ne pas placer chaque "Manisfestation du calendrier" dans un div contenant la date, le lieu, le nom de la chorale et la photo ?

Ca changerais rien, sauf à mettre un background ou des bordures

Essaye de placer toutes les photos les unes sous les autres et si possible donne-leur la même largeur.

Les photos les unes sous les autres, c'est vraiment pas attrayant ( voir tuto d'ymai à ce sujet) toutes les photos ont déja 300 de width!

Tu pourrais faire les photos un peu plus grandes (s'il n'y en pas trop) car on n'y voit pas grand chose ou bien tu mets une vignette avec un lien qui pointe sur la grande photo.

J'avais pensé à ça, mais le but en fait est d'imager le texte et de donner un aperçu général de la chorale, d'autant que on aura pas mal d'autres concerts et avec des images plus grandes, bonjour le poids de la page. Par contre lors du concert local ou nous recevrons plusieurs chorales, je mettrais un lien menant vers une page spéciale.

J'en ai profité pour retoucher la photo Lous esclatats de Ondres.

Bravo pour la retouche, l'image est plus lourde mais la netteté y gagne largement ( Photoshop I suppose?)
Là nous sommes dans le HS, par contre si tu me donnais des idées concernant le sujet du post...?
J'ai survolé les liens de Fabrice, mais j'ai plein de trucs à faire (compta du ciné, diapo du concert d'hier etc...) les neurones chauffent et le sujet refroidit


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Gagea]

Ca changerais rien, sauf à mettre un background ou des bordures

Si ça marche avec une bordure et que tu ne veuille pas qu'on la voit tu peux essayer de la cacher (hidden). J'ai vu ça dans Cascades mais j'ai jamais essayé

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[GAUNCE]

Avant de me plonger dans les tutos donnés par l'ami des nuages, j'ai supprimé tous les <br> en mettant des marges et padding aux images et paragraphes!
Ca résoud mon problème en attendant une solution orthodoxe ??!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Fabrice.Tres.Net]

Tu as 2 entités en "parallèle", l'une étant flottante (l'image dans l'exemple). Le paragraphe va s'écrire à droite de l'image.
Comme ici (le clear: left ne sert à rien dans ce cas)
S'il est plus "long" que l'image, le reste du texte s'écrira sous l'image. Ici, il est plus "court" que l'image.
Si l'entité (le 2ème paragraphe) qui suit doit être à la ligne et ne doit pas se mettre sur le côté de la flottante, alors il faut dire à la troisième entité de se positionner après le bloc flottant, cela se fait avec la propriété clear!

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr-fr">
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Père Fouettard </title>
    <style type="text/css">
.floatleft {float: left;    }
.alaligne { clear: left;}
    </style>
  </head>
  <body>
    <img class="floatleft" src="http://i43.servimg.com/u/f43/11/63/87/57/c-docu10.jpg" name="floatleft">
    <p>Le Père Fouettard est dans Les Landes, il sera bientôt de retour en Alsace et Lorraine, mais vous pouvez le garder on préfère Saint-Nicolas!</p>
    <p class="alaligne">Cette suite est en dessous de la partie gauche, elle ne peut s'écrire à droite de l'image en raison du clear: left </p>
  </body>
</html>

Résultat:

[GAUNCE]

Je crois que j'ai compris Docteur, mais en fait faut que je crée encore deux class et éventuellement d'autres pour situations analogues!
Par contre j'ai Kompozer en FRançais et si je pouvais savoir ou se trouve "clear" dans Kascades, ça m'arrangerait?!
Je pars jusqu'à demain, prend ton temps!
Gracias amigo.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[Gagea]

si je pouvais savoir ou se trouve "clear" dans Kascades, ça m'arrangerait?!

Boite / Dégagement / gauche

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

[bkcine2]

ou ajouter dans l'onglet général :
clear: left;

[GAUNCE]

Merci Gagea, mais ça m'est revenu hier après-midi, je me suis dit: à tout les coups c'est çà.
Ca m'a remémoré le tuto d'Ymai ou il explique le dégagement, mais je ne pensais pas à créer un <p> et appliquer cette règle.
Ca me résoud le problème des <br> à l'infini, mais pas pourquoi s'il n'y a pas de paragraphe dessous l'image, donc que cette dernière clôture les contenus et que la dernière ligne du texte donc soit en retrait, le div lui se ferme toujours sous le texte et l'image déborde du div et le cas échéant du body. J'ai résolu le problème en mettant <p>...</p> et clear=left et donc ça passe sous l'image et le div suit.
Alors est-ce qu'un texte doit impérativement clôturer les contenus?
Et tant que j'y suis:
Peut-on s'exonérer de tout <br> dans la création d'une page web? sinon, quelles exeptions?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4