Mettre photo à côté du texte
Résolu
cricri
-
Yannick_Altuna_07 Messages postés 92 Statut Membre -
Yannick_Altuna_07 Messages postés 92 Statut Membre -
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
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:
- Mettre photo à côté du texte
- Google photo - Télécharger - Albums photo
- Google traduction photo texte - Guide
- Photo filtre 7 gratuit - Télécharger - Retouche d'image
- Google maps photo maison - Guide
- Partage photo - Guide
38 réponses
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 ! =) )
ps: pour le position fixed oublie ie6 (enfin tu peux oublier ie6 tout court ! =) )
LelLex
Messages postés
1753
Statut
Membre
112
Bah pour ie6 c'est <table> :D
Sur un schéma classique : Photo + Texte. ( avec float:; )
XHTML :
CSS :
Alors ? ;)
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 ? ;)
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 !
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 !
<div style="float:left;"><img src="photo00.jpg" alt="photo1" title="Photo1" /></div>
<div style="float:left;">blablablablablablablabla</div>
Tchô, sois pas nerveux !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 !! :(
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 !! :(
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.
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;"> </div>
</div>
</body>
</html>
<p class="imageflottante"><img src="photo00.jpg" alt="photo1" title="Photo1" />blablablablablablablabla</p>
?
?
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
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
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....
<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;"> </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
}
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 !!!!!!!!!!!!!!!!
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 !!!!!!!!!!!!!!!!
Pas besoin de mettre une <div> si elle contient une simple image. Tu mets tes propriétés directement sur l'image. ;)
j'imagine que ça marche sur les autres navigateurs !!
comment on met le post en sésolu ça j'ai jamais compris ....
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 ;)
+ 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 ;)
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 !! ;)
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... ;)
tu pourras essayé si tu as un moment ou quand tu rentreras autrement je vais le laisser... ;)
#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
{
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
