Mettre photo à côté du texte [Résolu/Fermé]

Signaler
-
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
-
Bonjour,

je voudrais mettre une photo et un texte à côté ou un texte et une photo del 'autre coté je m'explique :
un paragraphe sur la gauche par exemple et la photo à droite ou inversement ..
j'ai voulu faire un float ça marche mais si le texte ne dépasse pas un peu la photo s'il nest pas assez long alors la photo déborde ... donc comment faire pour que ça rste à côté et que si c'est plus long ça n'aillepas forcément endessous de la photo .. suis je bien clair ?
voici le code html :

<p><img src="photo00.jpg" class="imageflottante"alt="photo1" title="Photo1" /></p>

<p>blablablablablablablabla</p>

<h3>Présentation</h3>
<p>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla.
</p>

<h2>Titre</h2>
<p>
blablablablablablablabla.blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla.

</p>

et le code css :

.imageflottante
{
float: left;
margin-right: 10px;
}

qu'est-ce qui ne va pas ?? merci

56 réponses

Messages postés
316
Date d'inscription
mardi 17 mars 2009
Statut
Membre
Dernière intervention
28 septembre 2012
52
les position ne sont pas "LA" solution ! cependant connaitre certaine notion peut avoir son importance ! donc n'hesite pas a bosser sur les positions , ça va te servir c'est sur ! mais pour la croit moi fait 2 bloc (<div>) en float:left et ça seras ok !

ps: pour le position fixed oublie ie6 (enfin tu peux oublier ie6 tout court ! =) )
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62629 internautes nous ont dit merci ce mois-ci

LelLex
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
109
Bah pour ie6 c'est <table> :D
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
109
Sur un schéma classique : Photo + Texte. ( avec float:; )

XHTML :

<div id="photo_texte">
<img src="images/ton_image.png" alt="" title="" />
<p>Ton texte ici !</p>
<div style="clear:both;"></div>
</div>


CSS :
#photo_texte{margin:0; padding:0; width:800px;}
#photo_texte img{margin:0; padding:0; width:400px; float:left;}
#photo_texte p{margin:0; padding:0; width:400px; float:right;}


Alors ? ;)
Messages postés
316
Date d'inscription
mardi 17 mars 2009
Statut
Membre
Dernière intervention
28 septembre 2012
52
salut

solution 1 :

fait une div dans laquelle tu mets ton image en background et ton <p> avec un margin left correspondant a la largeur de ton images(voir 10px de plus ) .

solution 2 :
tu met l'image et le texte dans 2 div differente et tu les met en float:left (comme le texte sera contenu dans une div il resteras en un seul bloc !

solution 3 :

tu fais un <table> (non je deconne !!!enfin si tu le fais quand méme avec un tableau , n'oublie pas de mettre un display block si ton image est seul dans son <td>)

voila !
Tu mets deux divs en float left :

<div style="float:left;"><img src="photo00.jpg" alt="photo1" title="Photo1" /></div>
<div style="float:left;">blablablablablablablabla</div>

Tchô, sois pas nerveux !
dsl Yannick mais j'ai un souci en fait j'étais en vacances aussi ça marchait sur un test avec une image mais en rajoutant du texte tu dis que ça ne change pas la mise ne page et bien si ça ne marche plus ... après ça met le texte en bas de l'image ..
autre soucis car ça je n'n avais pas parlé mais si je veux que j'ai du textye à gauche et à droite des photos en face un texte mais pas qu'une alors ça ne marche plus .. je suis désespéré là !!je veux dire j'ai pleind e texte à gauche et des photos à mettre en face du texte mais les unes en dessous des autres et là ça beug complet Help help help encore une fois et merci d'avance ;)
navré de t'avoir fait une fausse joie !! dis moi quo'n va y arriver car là je désespère !! :(
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
la je fais le test moi même, attend 15 min et ça arrive.
Il n'y à aucune raison pour que ça ne marche, c'est vraiment du B.A BA je comprend pas pourquoi on à pas encore réussi.

A tout de suite
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
chez moi ça marche niquel, question, à ton document HTML, tu avais mis un DOCTYPE?
En tout cas voici un code qui fonctionne très bien.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test comment ça marche pour Cricri</title>
<style>
#conteneur
{
	background:#CCC;
	margin:auto;
	padding:10px;
	width:940px;
}

#colonne_gauche, #colonne_droite
{
	background:#999;
	float:left;
	margin:0 10px 0 0;
	padding:10px;
	width:440px;
}
</style>
</head>

<body>
	<div id="conteneur">
    	<div id="colonne_gauche">
        	<img src="http://image.mabulle.com/c/cu/curudin.mabulle.com/stress.jpg" alt="Attitude de la personne qui trouve pas" />
            <p>possibilité de mettre tout ce qu'on veux dans cette collone, même dans l'autre, elles ne bougerons pas.</p>
        </div>
        <div id="colonne_droite">
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa nisi, dapibus id interdum quis, faucibus id purus. Etiam scelerisque ornare erat, pulvinar accumsan leo bibendum a. Nulla lacinia iaculis nibh ut rhoncus. Phasellus imperdiet nisi non tellus interdum nec volutpat velit vulputate. Sed tristique tempor ullamcorper. Sed massa sapien, ullamcorper in consectetur ac, egestas sit amet diam. In hac habitasse platea dictumst. Praesent placerat tortor ac nisl scelerisque sagittis. Morbi tempor lacus vitae velit dignissim dictum convallis mauris accumsan. Etiam nunc urna, congue ut venenatis id, adipiscing ac leo. Aliquam sit amet augue eget metus vulputate rhoncus eu vel dui. Morbi id egestas magna.</p>
            <p>Nunc egestas lacus eget ligula molestie lobortis. Cras vehicula libero a mi congue posuere. Nulla vehicula ipsum ac enim fringilla non imperdiet tellus tincidunt. Aliquam tincidunt turpis in mauris ullamcorper adipiscing. Suspendisse aliquam sem eget leo ornare ac semper leo elementum. Quisque condimentum ipsum arcu. Maecenas quis quam sem. Proin porta luctus ante vel rutrum. Cras consequat, arcu sed egestas pharetra, libero lacus condimentum libero, ut porta neque erat ac ipsum. Aliquam erat volutpat. Fusce quis nisi non diam congue accumsan vel non mi. Praesent lacinia ultrices feugiat. </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa nisi, dapibus id interdum quis, faucibus id purus. Etiam scelerisque ornare erat, pulvinar accumsan leo bibendum a. Nulla lacinia iaculis nibh ut rhoncus. Phasellus imperdiet nisi non tellus interdum nec volutpat velit vulputate. Sed tristique tempor ullamcorper. Sed massa sapien, ullamcorper in consectetur ac, egestas sit amet diam. In hac habitasse platea dictumst. Praesent placerat tortor ac nisl scelerisque sagittis. Morbi tempor lacus vitae velit dignissim dictum convallis mauris accumsan. Etiam nunc urna, congue ut venenatis id, adipiscing ac leo. Aliquam sit amet augue eget metus vulputate rhoncus eu vel dui. Morbi id egestas magna.</p>
            <p>Nunc egestas lacus eget ligula molestie lobortis. Cras vehicula libero a mi congue posuere. Nulla vehicula ipsum ac enim fringilla non imperdiet tellus tincidunt. Aliquam tincidunt turpis in mauris ullamcorper adipiscing. Suspendisse aliquam sem eget leo ornare ac semper leo elementum. Quisque condimentum ipsum arcu. Maecenas quis quam sem. Proin porta luctus ante vel rutrum. Cras consequat, arcu sed egestas pharetra, libero lacus condimentum libero, ut porta neque erat ac ipsum. Aliquam erat volutpat. Fusce quis nisi non diam congue accumsan vel non mi. Praesent lacinia ultrices feugiat. </p>
        </div>
        <!-- RETABLIR LE FLUX --><div style="clear:both;">&nbsp;</div>
    </div>
</body>
</html>
Messages postés
7791
Date d'inscription
jeudi 22 janvier 2009
Statut
Membre
Dernière intervention
21 mai 2016
891
<p class="imageflottante"><img src="photo00.jpg" alt="photo1" title="Photo1" />blablablablablablablabla</p>


?
je vais essayer ça tout à l'heure je te tiens au courant merci ;)
ok mais si mon fil par en 2ème page je n'aurai jamais de réponse .....

pour Zerfleys j'ai essayé le code que tu m's donné mais ça me met le texte en dessous dela photo pas à côté !...
je ne sais plus comment faire ...............
merci
Messages postés
6489
Date d'inscription
jeudi 22 mars 2007
Statut
Contributeur
Dernière intervention
24 mars 2019
1555
Je ne vois pas pourquoi tu n' aurai pas de reponse a cause + d' une page , en attendant si tu es pressé tu peux toujours faire un tableau a deux cellule (vade retrooo tableauuuuu)
avec un tableau ça devrait marcher ?? je débute c'est pour ça les tableaux ça me parait assez complexe....
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
je viens de mettre une réponse juste en dessous, les tableaux, plus que d'être complexe sont dépassé, sont anti référencement, rend difficile les éventuelles mises à jours, complexifi ... et tadada et tadada
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
<div id="conteneur">
<div id="colonne_gauche">
<img src="./images/truc.jpg" alt="" width="" height="" />
</div>
<div id="colonne_droite">
<p>contenu texte qui peut être aussi cours et long que l'on veut sans changer quoique ce soit à la mise en page.</p>
</div>
<!-- rétablir le flux --><div style="clear:both;">&nbsp;</div>
</div><!-- fin CONTENEUR -->


css :

#conteneur
{
width:taille que tu veux;
}

#colonne_droite
{
float:left;
+ toute les propriété qui te convienne pour la mise en forme, padding, margin width etc
}

#colonne_gauche
{
float:left;
+ toute les propriété qui te convienne pour la mise en forme, padding, margin width etc
}
je vais essayer ça je te tiens au courant ;) merci
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
d'accord, je pense que ça va être bon, j'attends ton retour (avant 17h30 après je pars en vacance)
merci ça marche .... ;) super
ça marche sur tous les navigateurs ?
yannick vraiment merci merci merci !! ça marche super bien !! merci ;)
dis moi juste si ça marche sur Firefox et d'autres navigateurs !! et bonnes vacances !! c'est super l'aide que tum'as donné !! merci MERCI !!!!!!!!!!!!!!!!
Messages postés
1633
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
109
Pas besoin de mettre une <div> si elle contient une simple image. Tu mets tes propriétés directement sur l'image. ;)
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
il y en çà besoin, sinon de que le texte dépasse il passe en dessous de la photo, le tout c'est d'avoir deux colonnes bien distincte
merci en tout cas ça marche super bien !! alors un grand merci!! à vous tous !! ;)
j'imagine que ça marche sur les autres navigateurs !!
comment on met le post en sésolu ça j'ai jamais compris ....
Yannick ya un souci si j'enlève les 2 phrases que tu as mis dans le code css :

+ toute les propriété qui te convienne pour la mise en forme, padding, margin width etc


+ toute les propriété qui te convienne pour la mise en forme, padding, margin width etc

ça déalce mon texte ça marchep lus ... comment se fait il ?? merci ;)
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
alors la je sais pas, tu as pas enlevé en "}" par hasard sans faire exprès?

sinon pour éviter des bugs inutiles donne des largeur "width" à chaque éléments, la colonne_droite + la gauche faisant la même taile (ou moins) que la largeur du conteneur
oui j'ai du faire une mauvaise manip car logiquement si j'enlève ce com ça doit marcher !!
en tout cas merci infiniment !! je galérais comme pas possible et cet soluc est génial merci et bonnes vacances !! ;)
non j'ai réessayé si j'enlèv les com ça change la place de l'image ...c'est curieux j'ai bien noté que je n'ai pas oté un }
tu pourras essayé si tu as un moment ou quand tu rentreras autrement je vais le laisser... ;)
Yannick_Altuna_07
Messages postés
89
Date d'inscription
lundi 4 mai 2009
Statut
Membre
Dernière intervention
12 septembre 2016
6
#conteneur
{
width:600px;
}

#colonne_droite
{
float:left;
padding:10px;
width:280px;
}

#colonne_gauche
{
float:left;
padding:10px;
width:280px;
}


je ne sais pas si ça va fonctionner, je ne vois pas d'erreur la dedans, mais j'ai vraiment plus le temps la, bon courage, mais à mon retour je viens voir si t'as réussi
1 2