28172 sujets

CSS et mise en forme, CSS3

Alignement texte à côté d'une image

Bonjour à tous,

J'ai un texte que j'ai "séparé" en plusieurs paragraphe, chacun possédant une image que je peux aligner à droite ou à gauche.

Le problème est que lorsque je fais

<img src="" style="vertical-align: top;"> une lonnnnngueeeeeeeeeeeee phrase....

Je me retrouve avec l'image à gauche, mais la phrase à droite de l'image est en haut de l'image sur la première ligne mais dès le retour ça repart sous l'image.

Que dois je faire pour avoir tout le texte du paragraphe à droite de l'image ?

En mettant un float, je me retrouve bien sûr avec tous les paragraphes à droite de l'image...

Merci pour votre aide
Heyoan a écrit :
Salut,

il faut utiliser float (right ou left).


Comme vu dans mon explication le float me ramène tous les paragraphes suivants à droite ou gauche de l'image Smiley decu
bonjour

il s'agit encore de simuler de cellule de tableu , l'une contenant une image et l'autre son texte descriptif , les deux aligné verticalement Smiley smile

plein de reponses et d'exemples sont sur le forum ...

soluces (ou mots clés) associer a vertical-align : tableaux , display:table, display:inline-block ...
le tableau ne souffre que d'une grosse incomprehension de son usage (pertinent ou de bon sens)
pour les deux autres ( et qui full-css ne veut rien dire) , la il y a de la gymnastique a faire pour ciblé tel ou tel navigateur et proposé ou non des alternatives aux autres ...dans un avenir plutôt proche , ceux-ci seront aisément utilisables , il sera tant d'en reparlé sans devoir mettre en branle les concepts de layout(formatage) et haslayout dans IE.
Comme je continue de ne pas bien cerner le problème voici un petit exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#images {
	width: 600px;
	margin: 0 auto;
}
#images p {
	background: #6699FF;
	overflow: hidden;
	padding: 10px;
}
#images img {
	margin: 10px;
}
.left {
	float: left;
}
.right {
	float: right;
}
</style>
</head>
<body>
<div id="images">
	<p class="images"><img class="left" src="image1.jpg" alt="image à gauche" />Sed mollis, tortor eget gravida rhoncus, sapien ipsum faucibus neque, sit amet tincidunt risus sem luctus ante. Nulla porttitor semper erat. Proin eget urna in nunc vehicula porta. Nulla mattis posuere odio. Aenean id lorem. Donec sit amet eros.</p>
	<p class="images"><img class="right" src="image2.jpg" alt="image à droite" />Sed mollis, tortor eget gravida rhoncus, sapien ipsum faucibus neque, sit amet tincidunt risus sem luctus ante. Nulla porttitor semper erat. Proin eget urna in nunc vehicula porta. Nulla mattis posuere odio. Aenean id lorem. Donec sit amet eros.</p>
</div>
</body>
</html>
Administrateur
Sinon 
display: table-cell;
Smiley smile

EDIT: oups pas vu le message de gc-nomade
Modifié par Felipe (12 Jun 2009 - 10:36)
Merci pour votre aide, je vais regarder ce que vous proposez, je cherche vraiment la solution la plus "normalisée"
Bonjour,

Une solution compacte pour une image + un paragraphe accompagnant l'image, si on connait la largeur de l'image:
<p class="illustration-gauche">
    <img class="pic" src="..." alt="..." />
    Bla bla du texte qui va bien.
</p>

.illustration-gauche {
    overflow: hidden; /* empêche le dépassement des flottants */
    padding-left: 140px; /* Largeur de l'image + gouttière */
}
.illustration-gauche .pic {
    float: left;
    margin-left: -140px;
}
Ça peut bien sûr se décliner en une classe illustration-droite. Smiley cligne

Bon, maintenant si on ne connait pas la largeur de l'image, qu'on peut avoir plusieurs paragraphes à la suite de l'image et qu'on voudrait placer côte à côte, etc., il est peut-être plus sûr de partir sur une structure HTML un peu plus lourde:
<div class="texte-illustration">
    <img class="illus-gauche" src="..." alt="..." />
    <p>Un paragraphe.</p>
    <p>Un deuxième paragraphe.</p>
</div><!--.texte-illustration-->

.texte-illustration {
    overflow: hidden; /* empêche le dépassement des flottants */
}
.texte-illustration .illus-gauche {
    float: left;
    margin: 5px 20px 5px 0;
}
.texte-illustration .illus-droite {
    float: right;
    margin: 5px 0 5px 20px;
}
.texte-illustration p {
    overflow: hidden; /* Contexte de formatage. Force le paragraphe à
    adapter sa largeur aux flottants adjacents. */
}


Enfin, on peut faire une structure avec deux DIV en display:table-cell (mais pas compatible IE 6-7), ou encore utiliser un tableau de mise en page.
J'ai enfin eu le temps de tester, j'avais fais comme la soluce proposé par Heyoan, le overflow: hidden à remis en dessous de l'image le paragraphe suivant, je vais essayer de comprendre à quoi sert cette syntaxe Smiley smile

Merci pour votre aide et surtout pour votre réactivité !
Sujet clos
Aller à