Alignement vertical et retour chariot

Bonjour,

J'aimerai aligner verticalement un texte, ou plutôt un paragraphe, à côté d'une image. J'aimerai faire ça sans table, compatible IE et Firefox.

Je fais donc le code suivant :

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}

Or, le texte étant trop grand, il fait un retour charriot en dessous de l'image :

http://img514.imageshack.us/img514/7152/exemplecj4.png

Comment faire pour inclure le retour à la ligne à l'intérieur de l'alignement ? J'ai essayé sans succès les choses suivantes :

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/>{TEXT}</p>

<p><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="vertical-align: middle;"/><p>{TEXT}</p></p>

Merci d'avance !

Salut

Placer le texte à côté de l'image n'est pas difficile : une div en float:left (ou right) qui englobe ton image (y a peut être moyen sur l'image directement, à vérifier // edit : ça passe ), et ton paragraphe à côté :

HTML

<div class="left">
     <img src="#" width="...px" height="...px" />
</div>

<p>
     Texte
</p>

CSS

.left {
float:left;
margin:...px; /* marge autour de l'image */}

Par contre si tu as un nombre de ligne important (hauteur du paragraphe > hauteur image) le texte va "couler" en dessous... A noter également que si tu as besoin de faire un retour chariot (pour placer du texte en dessous de l'image) sans y aller à grand coup de <br/>, tu peux utiliser la propriété clear:both; :

HTML

<div class="left">
     <img src="#" width="...px" height="...px" />
</div>

<p>
     Texte
</p>

<p class="retour_chariot">
     Texte à la ligne
</p>

CSS

.retour_chariot {
clear:both; }

Pour l'alignement vertical... c'est autre chose. A ta place j'utiliserais une combinaison height / line-height. Si tes images sont générées dynamiquement et qu'elles ont la même hauteur, pas de problème. Si tu ne peux pas prévoir la taille de tes images : c'est embêtant. Il faudrait dans ce cas se tourner vers les tableaux (vertical-align sur une cellule). On va dire que tes images ont toutes la même hauteur, ou alors que tu gères chaque cas indépendamment les uns des autres (pas de dynamisme)

HTML

<div class="conteneur">

     <div class="left">
          <img src="#" width="..." height="..."/>
     </div>

     <p>
          Texte
     </p>

</div>

CSS

.conteneur {
height:...px;
line-height:...px; }

Tu peux également tester un vertical-align:middle; sur le conteneur mais j'ai des doutes quant au résultat

Voilà, ça devrait (plus ou moins) fonctionner

EDIT : J'te rajoute un peu de doc ça peut pas faire de mal

Initiation au positionnement CSS : 2.position float
Centrer verticalement un élément
Modifié par BeliG (28 May 2007 - 17:59)

Merci de m'avoir répondu.

Pour plus de précision, disons que je voudrai ça (montage caca), c'est-à-dire un alignement vertical sans retour chariot du texte :

http://img444.imageshack.us/img444/6510/modelewa8.png

Depuis vos propositions de float, j'ai testé, sans succès, ces différents codes :

<div style="float:left;"><img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum"style="vertical-align:middle;" /></div>
<p>{TEXT}</p>

Résultat
http://img515.imageshack.us/img515/4135/floatjc2.png

<div style="vertical-align:middle;">
<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float:left;"/>
<p>{TEXT}</p></div>

Résultat
http://img444.imageshack.us/img444/8493/float2co5.png

Où est-ce que ça coince please ????

BeliG a écrit :
Il faudrait dans ce cas se tourner vers les tableaux (vertical-align sur une cellule)

+1, en attendant un support correct de display:table-cell.

Benjamin D.C. a écrit :
+1, en attendant un support correct de display:table-cell.

J'ai oublié de préciser, l'utilisation d'un tableau est hors de question, pour plusieurs raisons.

Silent a écrit :

J'ai oublié de préciser, l'utilisation d'un tableau est hors de question, pour plusieurs raisons.

... comme?

Benjamin D.C. a écrit :
... comme?

Comme par exemple le fait que l'on soit à l'intérieur d'élément d'une liste géré dans plusieurs sous truc d'un forum phpbb3.

Bonjour,

Hou !! que c'est tiré par les cheveux !!

<style type="text/css">
* {
margin : 0;
padding : 0;
}

p{
position: relative;
line-height: 15px;
}

span{
position: absolute;
display: block;
height: 30px;
left: 100px;
top: 50%;
margin-top: -15px;
border: 1px solid black;
}
</style>
</head>
<body>
<p><img src="image.jpg" alt=""  /> <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis arcu lorem, mattis ac, sagittis in, auctor id, orci. Nulla facilisi. Etiam congue, nulla quis tempus aliquet, justo lacus vulputate purus, eget facilisis felis elit at mauris.</span></p>

</body>

ghost a écrit :
Bonjour,

Hou !! que c'est tiré par les cheveux !!

...

J'y avais pensé, le problème, c'est que la taille du bloc texte peut changer. Et donc, des ajustements margin-top sont pas possibleS.

Bonsoir,

Je crains qu'il ne faille passer par javascript, en attendant le support du display: inline-block;
Modifié par Lanza (28 May 2007 - 21:35)

Maiiiiisss, un truc tout bête comme ça... Y'a vraiment pas de solution ?

essai ceci:

<!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>
    <title>XHTML 1.0 Strict</title>
<style type='text/css'>
#global {
    display:table; /* pas pour IE */
    width:800px;   /* pour IE en particulier */
    margin:auto;
    }

.table {
    display:table-row;
    }
h1 , .table p , dt , dd ,  p span 
    {
    display:table-cell;
    vertical-align:middle;
    margin:0;
    padding:0;

    }

img {
    vertical-align:middle;
    }
</style>

<!--[if IE]>
<style type="text/css">
 h1 ,  .table p ,  dt ,  dd ,   p span {
    display:inline;
    zoom:1;
    width:70%;
    }
h1 ,  dt {
    width:auto;
    }
</style>
<![endif]-->
</head>
<body>
<div id="global">
	<div class="table">
		<h1><img src='http://forum.alsacreations.com/avatars/5854-shadok.jpg' alt="" /></h1>
		<p>Pour plus de précision, disons que je voudrai ça (montage caca), c'est-à-dire un alignement  

vertical sans retour chariot du texte :</p>
	</div>
	<p class="table">
		<img src='http://forum.alsacreations.com/avatars/5854-shadok.jpg'  />
		<span>Pour plus de précision, disons que je voudrai ça (montage caca), c'est-à-dire un alignement 
vertical sans retour chariot du texte :</span>
    </p>

	<dl class="table">
		<dt>
		<img src='http://forum.alsacreations.com/avatars/5854-shadok.jpg'  />
		</dt>
		<dd>
		Pour plus de précision, disons que je voudrai ça (montage caca), c'est-à-dire un alignement vertical 
sans retour chariot du texte :
		</dd>
	</dl>
</div>

</body>
</html>

Enlever le width:800px pour avoir une page fluide, inconvenient qui est peut-etre acceptable , c'est de voir dans IE , l'ensemble du textes passer sous l'image sitot que celle-ci exederas les 29% de la fenetre (et des poussieres que lui aloue IE . (width:70% aux autres elements).

On retrouve l'avantage des commentaires conditionnels ... desolé pour les textes et images inserer , j'ai manqué d'inspiration , vous ne m'en voudrez pas j'espere.
GC

<edit> ajout de la fermeture des commentaires conditionnels (<![endif]-->)oubliés lors du premier post</>
Modifié par gcyrillus (29 May 2007 - 16:22)

Re

Juste au passage, tu as testé cette solution que je t'avais proposé ? J'vois pas pourquoi elle ne passerais pas...

HTML

<div class="conteneur">

     <div class="left">
          <img src="#" width="..." height="..."/>
     </div>

     <p>
          Texte
     </p>

</div>

CSS

.left {
float:left;
margin:...px; }

.conteneur {
height:...px;
line-height:...px; }

Bonjour !

1 - Alors, pour répondre à la proposition du line-height, le problème, c'est que lors d'un retour à la ligne de texte... et bien justement l'interligne à changé et c'est pas joli joli. J'ai bien essayé d'imbriquer différemment le line-height, mais ça marche pas plus.

2 - Sinon, avec un float left pour l'image, j'obtiens presque un résultat, mais le texte ne prend plus en compte le vertical-align de l'image et se coince dans son bord en haut à droite...

3 - Pour la solution table-cell... je vais tester mais ça m'ennuie de faire un truc si compliqué. Parce qu'en fait il s'agit de la création d'un BBCode... Mais je vais voir.

Bonjour,

Silent a écrit :
Maiiiiisss, un truc tout bête comme ça... Y'a vraiment pas de solution ?

Deux solutions toutes bêtes ont été proposées :
- display: table-cell (bête comme chou) ;
- l'utilisation d'un tableau à deux cellules (pas beaucoup plus compliqué).

Le problème, c'est qu'IE ne veut pas de la première solution, et que tu ne veux pas de la seconde. Inutile de s'indigner quand on fait la fine bouche.
(Humour, hein, pastapé, merci. )

Sauf à faire des choses complètement tarabiscotées, tu as donc deux solutions :
- faire un tableau HTML à deux cellules (dans un forum phpBB, on n'est pas à ça près...) ;
- utiliser display: table-cell que c'est très bien et parfaitement magnifique, et pour IE, via un commentaire conditionnel visant IE 7 et inférieurs, basculer vers la solution avec image flottante (plus petite marge à droite sur l'image, plus petite marge en haut pour le texte... bref, un peu de cosmétique).

Tu as donc une solution qui ne fige pas le code HTML mais avec un rendu « bien mais pas top » dans IE, et une solution qui passe bien partout mais qui bloque des possibilités de mise en page pour plus tard. À toi de voir.

Silent a écrit :
Pour la solution table-cell... je vais tester mais ça m'ennuie de faire un truc si compliqué.

Table-cell, compliqué ?

C'est moins compliqué que les flottants ou le positionnement absolu. C'est même très simple, en fait. Les seules choses qui donnent l'impression que c'est compliqué, c'est :
- qu'on ne s'en sert pas habituellement (dommage...) ;
- que ça peut demander un correctif pour IE.

Mais l'utilisation de display: table-cell lui-même est très simple..


Bonne continuation.

Re tout le monde...

- Alors en fait, faire une déclaration style au début n'est pas possible non plus (oui je sais, pas grand chose n'est possible, mais je fais pas la fine bouche). Or est-ce possible à l'intérieur de l'html de faire un STYLE IF IE ?

Là en revanche, j'y suis presque :

http://img514.imageshack.us/img514/5615/presquefz5.png

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float: left; margin-right:5px; vertical-align:middle;"/>
<span style="font-size: 1em; width: 440px; height="80px;" margin-left: 5px;">{TEXT}</span>

Plus que le problème de l'alignement vertical... (pas de padding ni de top...)

Re,

A quoi sert le vertical-align:middle; sur ton image ?

<img src="{URL}" width="60px" height="80px" border="0px" alt="Image Forum" style="float: left; margin-right:5px; [b]vertical-align:middle;[/b]"/>

Pour le centrage, j'vais peut être (nan c'est même sûr) me répéter mais bon :

<span style="font-size: 1em; width: 440px; [b]height:80px; line-height:80px;[/b] margin-left: 5px;">{TEXT}</span>

Ou voir en utilisant un conteneur comme dans mon précédent message.

De plus fais attention, ton écriture comportait des erreurs (tu as utilisé un "=" et des guillemets pour le style de ta balise <span>... pas bien ) :

<span style="font-size: 1em; width: 440px; height[b]="[/b]80px;[b]"[/b] margin-left: 5px;">{TEXT}</span>

Pour info , le vertical-align et flottant sont incompatibles (flottant = grossomodo block et sortit du flux) .

Le vertical-align ne peut s'appliquer
1) qu'a l'interieur de cellule de tableau (ou d'element recevant le display:table-cell par le biais d'une feuille de style ou de style en ligne).

2) qu'a des elements de type inline(une image , un span , etc ...ou recevant la regle par le biais des styles) qui alors se positionneront en fonction de la valeur defini comme :top, middle et par rapport a la "baseline" , la ou repose le texte . ... donc un vertical-align:middle; sur une image va la centrer horizontalement par rapport aux autre element de type inline qui la cotoie dans le flux du document.

Le display:table est donc une solution aisée a mettre en place pour aligné verticalement 2 zones distinctes que l'ont veut cote a cote.

Pour IE , qui ne comprends pas , on definie alors les elements concerné comme etant "inline" auxquels ont active le layout (une largeur , un zoom ou inline-block .ce qu'il faut avant tout c'est declaré les elements block en elements inline avant de leur conferé a nouveaux le layout , sinon , il reste des elements de type block).
Chacun de ses elements va alors se comporter comme une simple "balise image" en englobant les contenues . Chacunes de ces balises modifiées , s'aligneront verticalement les unes par rapport aux autres en fonctions de leurs hauteurs.

L'exemple laché precedement , demontre que ces regles sont applicables a des element a la base de type inline ou block.

Elle demontre aussi qu'il faut definir (pour IE) une largeur et que le retour a la ligne peut s'operer de lui même au cas ou l'espace n'est plus assez large , ce qui n'arrive pas avec la regle display:table .

L'exemple precedent ne peut fonctionné qu'a l'aide des commentaires conditionnels .. underscore et !important seront compris differement par IE7 qui ne recevra alors pas les regles qui lui sont aussi destinés.

Moralité , seul le tableau reste fiable si l'ont veut garder un affichage fluide .

GC

Salut,

Silent a écrit :

J'aimerai aligner verticalement un texte, ou plutôt un paragraphe, à côté d'une image. J'aimerai faire ça sans table, compatible IE et Firefox.

Histoire de gagner du temps : on ne peut pas.