Sujet Précédent Sujet Suivant

Mettre photo à côté du texte

Résolu/Fermé
cricri - 31 juil. 2010 à 23:10
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 - 30 août 2010 à 10:22
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
A voir également:

38 réponses

  • 1
  • 2
Réponse 1 / 38
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
2 août 2010 à 17:04
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
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
2 août 2010 à 19:08
Bah pour ie6 c'est <table> :D
0
Réponse 2 / 38
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
1 août 2010 à 18:27
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 ? ;)
1
Réponse 3 / 38
vincent170186 Messages postés 316 Date d'inscription mardi 17 mars 2009 Statut Membre Dernière intervention 28 septembre 2012 52
2 août 2010 à 15:19
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 !
1
Réponse 4 / 38
Zerfleys
3 août 2010 à 18:05
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 !
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 38
cricri
25 août 2010 à 15:28
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 !! :(
1
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
26 août 2010 à 09:32
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
0
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
26 août 2010 à 09:43
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>
0
Réponse 6 / 38
Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 101
31 juil. 2010 à 23:13
<p class="imageflottante"><img src="photo00.jpg" alt="photo1" title="Photo1" />blablablablablablablabla</p>


?
0
Réponse 7 / 38
cricri
4 août 2010 à 09:43
je vais essayer ça tout à l'heure je te tiens au courant merci ;)
0
Réponse 8 / 38
cricri
4 août 2010 à 14:57
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
0
Réponse 9 / 38
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
4 août 2010 à 15:02
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)
0
Réponse 10 / 38
cricri
4 août 2010 à 16:28
avec un tableau ça devrait marcher ?? je débute c'est pour ça les tableaux ça me parait assez complexe....
0
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
4 août 2010 à 16:55
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
0
Réponse 11 / 38
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
4 août 2010 à 16:53 
<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
}
0
Réponse 12 / 38
cricri
5 août 2010 à 11:16
je vais essayer ça je te tiens au courant ;) merci
0
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
6 août 2010 à 13:27
d'accord, je pense que ça va être bon, j'attends ton retour (avant 17h30 après je pars en vacance)
0
Réponse 13 / 38
cricri
6 août 2010 à 15:45
merci ça marche .... ;) super
ça marche sur tous les navigateurs ?
0
Réponse 14 / 38
cricri
6 août 2010 à 16:08
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 !!!!!!!!!!!!!!!!
0
Réponse 15 / 38
LelLex Messages postés 1628 Date d'inscription mercredi 18 février 2009 Statut Membre Dernière intervention 5 septembre 2012 112
6 août 2010 à 16:17
Pas besoin de mettre une <div> si elle contient une simple image. Tu mets tes propriétés directement sur l'image. ;)
0
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
6 août 2010 à 16:56
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
0
Réponse 16 / 38
cricri
6 août 2010 à 16:28
merci en tout cas ça marche super bien !! alors un grand merci!! à vous tous !! ;)
0
Réponse 17 / 38
cricri
6 août 2010 à 16:28
j'imagine que ça marche sur les autres navigateurs !!
comment on met le post en sésolu ça j'ai jamais compris ....
0
Réponse 18 / 38
cricri
6 août 2010 à 16:44
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 ;)
0
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
Modifié par Yannick_Altuna_07 le 6/08/2010 à 16:59
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
0
Réponse 19 / 38
cricri
6 août 2010 à 17:11
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 !! ;)
0
Réponse 20 / 38
cricri
6 août 2010 à 17:14
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... ;)
0
Yannick_Altuna_07 Messages postés 87 Date d'inscription lundi 4 mai 2009 Statut Membre Dernière intervention 12 septembre 2016 9
6 août 2010 à 17:31
#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
0

Discussions similaires

A quoi correspond cette croix sur snapchat
Sbnet -
Lili -

6 réponses
Pix
Anyssa -
vibe -

4 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses