[Résolu] Image en bas à droite...

Des livres incontournables pour tout maîtriser

Auteur
Kleduts	# 18 Feb 2012, 19:59:33
50 Posts	Bonjour, Je cherche à placer une image dans le coin inférieur droit. Jusque là, vous me direz, c'est hyper simple... Je sais... Sauf que mon code HTML ressemble à ça : `<h1>Titre</h1> <p> Lorem ipsum.... </p> <img src="..." />` Voilà, comme vous pouvez le voir, mon image se trouve APRES le contenu de la page et je souhaiterais qu'elle vienne se caler en bas à droite, à coté du texte. Dis autrement, je voudrais qu'elle "remonte" et vienne "pousser" le texte. Un peu à la manière d'un float:right, mais de bas en haut. Vous avez une idée ? Bon week-end A+/ F. Modifié par Kleduts (19 Feb 2012 - 14:49)
50 Posts
Muchos	# 19 Feb 2012, 04:37:44
39 Posts	Je lance cette idée, qui fonctionne (si je comprends ton idée) mais me paraît approximative : `<h1>Titre</h1> <div class="table"> <p class="cell-left"> Lorem ipsum... </p> <div class="cell-right"> <img src="..." /> </div> </div>` `.table {display: table; width: 100%;} .cell-left {display: table-cell;} .cell-right {display: table-cell; text-align: right; vertical-align: bottom;}` ++ Le code sans la comm', c'est comme faire un gâteau d'anniversaire et le manger tout seul dans son coin.
39 Posts
Kleduts	# 19 Feb 2012, 14:42:07
50 Posts	Bonjour, Sauf que le fait d'afficher les éléments sous la forme de tableau, j'ai les 2 éléments côte à côte. Moi, ce que je veux, c'est avoir l'image qui s'insère dans le texte et qui le repousse. A+ / F.
50 Posts
fvsch	# 19 Feb 2012, 14:47:31
20100 Posts	Bonjour, Pas possible en CSS 2.1. Peut-être à l'avenir avec les propositions d'Adobe (CSS Exclusions and Shapes), mais c'est encore en brouillon et pas du tout implémenté dans les navigateurs. Donc: limite technique, changer le design.
20100 Posts
Kleduts	# 19 Feb 2012, 14:49:03
50 Posts	Ok merci pour cette réponse. J'y ai passé pas mal de temps, et cette réponse confirme mon sentiment. Bonne fin de week-end A+ / F.
50 Posts
niuxe	# 19 Feb 2012, 18:26:54
peuf peuf attitude 1133 Posts	Salut, Avant de te répondre, j'ai préféré voir s'il y avait une solution plus intéressante que la mienne. Je me doute bien que c'est une MEP difficile à élaborer. La mienne étant aussi approximative (placer l'image dans le texte). <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> p{width:400px;} img{float:right;} </style> </head> <body> <p>Le chat domestique mâle est couramment appelé un « chat » tandis que la femelle est une « chatte » et le jeune un « chaton ». <img src="http://placekitten.com/80/80" alt="un chat" />Le mot chat vient du bas latin cattus qui d’après le Littré dans son édition de 1878, provient du verbe cattare, qui signifie guetter, ce félin étant alors considéré comme un chasseur qui guette sa proie. Cette dernière interprétation porte à controverse, au vu des termes utilisés dans les langues afro-asiatiques2,3. En latin classique, « chat » se disait felis (d’où, en français, félin, félidés, etc.), mais désignait uniquement le chat sauvage d’Europe,tandis que cattus s’appliquait au chat domestique.</p> </body> </html> Modifié par niuxe (19 Feb 2012 - 18:28) Komodo Edit - Inkscape - Dia C'est curieux chez les marins ce besoin de faire des phrases
peuf peuf attitude 1133 Posts
Prévenir un modérateur