28172 sujets

CSS et mise en forme, CSS3

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

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)
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;}


++
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.
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.
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 Smiley cligne

A+ / F.
Modérateur
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)
Sujet clos
Aller à