Aller au contenu

2 images en float left par rapport à un texte


mathmax

Sujets conseillés

Bonjour.

Je cherche à faire ça :

schéma explicatif

Et bien sûr je souhaiterais que cette mise en forme reste quand on agrandit le texte.

Ici mes cadres gris représentent des images et je voudrais les mattre les 2 en float left. Pour cela je pensais à un code du style :

<img src="image.jpg" id="image1"/>
<img src="image.jpg" id="image2" />
<p> fdhkdjgh jkfgh gkjfdhf gjkg hjkfgh jgk ghjghkjgjui sfndhkud fhjghjfd ghj gfhjg fhjghj jkg hgkdj</p>

#image1 {
float:left;
}

#image2 {
clear:left; *
float:left;
}

p {
float:left
}

*avec ce clear:left qui ne s'applique qu'à image2 en non pas à p. Ce qui fais que les deux images sont en float:left par rapport au texte mais pas entre elles.

Seulement voilà, cette solution ne semble pas possible... Je voulais donc savoir si il en existait une autre pour pouvoir réaliser se genre de mise en page ?

Merci d'avance pour votre aide.

Modifié par mathmax
Lien vers le commentaire
Partager sur d’autres sites

Salut,

A priori, je ne vois aucune raison de mettre ton paragraphe en float.

[EDIT]Et a posteriori, après tests avec ou sans marges, même avis : ça marche si on ne met pas le paragraphe en float (ce qui est logique puisque ce sont les images qui sont flottantes par rapport au paragraphe, et que le paragraphe n'est flottant par rapport à rien[/EDIT]

Modifié par MarvinLeRouge
Lien vers le commentaire
Partager sur d’autres sites

En effet, ça fonctionne !

C'est plutôt normal car enlevant la propriétée float:left à p, on le dispense ainsi du layout... cependant, j'avoue que ne comprends pas trop pourquoi le texte se retrouve en flottant par rapport à la deuxième image. Comme la 2ème possède la propriétée clear, le paragraphe qui se trouve après devrait lui aussi être en clear: left par rapport à la première image et devrait donc se trouver à droite de la deuxième image, non ?

En fait, j'aurais besoin de faire un peu plus que ça .Pour cela, je cherche comment faire pour qu'une image puisse flotter en bas à gauche (ou à droite) d'un cadre de texte. Un peu comme ça :

cadre flottant en bas à gauche d'une cadre de texte

Une idée ?

En tous cas merci pour ton aide.:rolleyes: Tu me tire d'un sacré pétrin. Si tu savais combien de temps j'ai cherché comment faire ce truc...

Lien vers le commentaire
Partager sur d’autres sites

Explication : ton image n° 2 est en clear left donc cette image n'admet rien de flottant à sa gauche. Tu n'as pas précisé de clear à ton paragraphe donc il admet potentiellement des flottants, à droite comme à gauche.

Et pour ton en bas à gauche, le problème est le suivant : un élément flottant ne l'est que par rapport à ce qui est après lui dans le code.

Lien vers le commentaire
Partager sur d’autres sites

Explication : ton image n° 2 est en clear left donc cette image n'admet rien de flottant à sa gauche. Tu n'as pas précisé de clear à ton paragraphe donc il admet potentiellement des flottants, à droite comme à gauche.

Ca me parait clair, sauf que si on ne met pas la deuxième image en float:left, le texte qui se trouve en dessous ne flotte plus à droite de la première image. Il vient en dessous de la seconde. En fait il se retrouve lui aussi en clear par rapport à la première image. Si par contre on met la 2ème image en float:left, le texte se retrouve à droite de la première. Le float:left de la seconde image semble donc simplement indiquer si le clear par rapport à la première image est conservé pour le texte ou non...étrange...

Et pour ton en bas à gauche, le problème est le suivant : un élément flottant ne l'est que par rapport à ce qui est après lui dans le code.

Cela veut-il dire que l'on ne peux pas fiare flotter en bas à gauche (ou à droite) ?

En fait, je ne vois pas trop pourquoi.

De la même manière que le CSS indique que les éléments se trouvent l'un à côté de l'autre (ce que le HTML ne fais pas), il pourrait aussi indiquer que les éléments se trouvent l'un à côté de l'autre avec les premier flottant en bas du second (même si là aussi le HTML de l'indique pas). En d'autre termes, on pourrait très bien avoir un bout de code comme ça :

<img src="image.jpg" />
<p>cdns jgjf ghdghjfg hjgh gcfshj cghjsg j </p>

img {
float:left-bottom;
}

Je sais que la propriété float:left-bottom n'existe pas mais peut-être existe t-il une manière de faire cela en CSS2 ?

Lien vers le commentaire
Partager sur d’autres sites

Bon alors concernant les float et clear, honnetement tu as réussi à m'embrouiller. Donc je te redonne l'explication qui est simple :

float : left signifie que l'élément va flotter à gauche de son conteneur, se maintenant donc à gauche de tout ce qui est dans le flux normal

clear : left signifie que l'élément n'admet pas de flottant à sa gauche

Je te conseille de relire l'explication sur les flottants sur openweb et sur alsacreations.

Pour le bottom-left : je pense qu'il te faudra créer ta propre méthode, suivant ton contexte.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...