Bon, ça on sait pas faire.
Mais on peut essayer de trouver des adaptations aléatoires.
L'image dans le texte ou dans un paragraphe délimité.
Il faut de toute façon calculer la taille du texte du bas.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #b0c4de;
}
.conteneur {
position: relative;
margin: 0 auto;
width: 760px;
text-align: justify;
background-color: #f0f8ff;
font-family: 'Trebuchet MS', Verdana, sans-serif;
}
.generated {
clear:left;
font-size:80%;
text-align:right;
margin:1em;
}
img {
float:left;
margin:5px;
}
p {
margin : 0;
}
.code {
font-family : monospace;
color : #0b0;
font-weight : bold;
}
</style>
</head>
<body>
<div class="conteneur">
<div class="texte"><span class="code"><div></span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vehicula. Pellentesque elit. Sed lorem velit, fermentum vitae, rhoncus elementum, congue eget, quam. Aliquam erat volutpat. Sed mauris est, mattis sit amet, elementum sit amet, tristique id, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam dui. Cras vestibulum tortor sed tortor. Donec diam.
<br>
Curabitur lobortis massa. Etiam dapibus sollicitudin elit. In convallis ante ut justo. In eget sapien eu est iaculis tristique. Integer eu pede. Curabitur porttitor, tellus non feugiat elementum, ligula sapien gravida leo, id accumsan neque ipsum a lacus. <span class="code"><img></span><img src="imgfd.gif" width="100" height="100" alt="img"><span class="code"></img></span>
Ut nec mi. Aliquam erat volutpat. Nulla semper ultricies tortor. Nulla elit nibh, gravida placerat, venenatis sed, placerat vel, metus. Aliquam facilisis turpis et risus. Maecenas pharetra sem nec turpis. Donec venenatis vulputate turpis. Quisque at pede nec pede consectetuer rhoncus. Sed tortor dolor, cursus sit amet, suscipit tincidunt, aliquet at, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<span class="code"></div></span>
</div>
<p class="generated">Generated 2 paragraphs, 222 words, 1534 bytes of <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a></p>
</div>
<br>
<div class="conteneur">
<div class="texte">
<p><span class="code"><p></span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vehicula. Pellentesque elit. Sed lorem velit, fermentum vitae, rhoncus elementum, congue eget, quam. Aliquam erat volutpat. Sed mauris est, mattis sit amet, elementum sit amet, tristique id, purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam dui. Cras vestibulum tortor sed tortor. Donec diam.<span class="code"></p></span>
</p>
<p><span class="code"><p></span>
Curabitur lobortis massa. Etiam dapibus sollicitudin elit. In convallis ante ut justo. In eget sapien eu est iaculis tristique. Integer eu pede. Curabitur porttitor, tellus non feugiat elementum, ligula sapien gravida leo, id accumsan neque ipsum a lacus. Ut nec mi. <span class="code"></p></span>
</p>
<p><span class="code"><p></span>
<span class="code"><img></span><img src="imgfd.gif" width="100" height="100" alt="img"><span class="code"></img></span>
Aliquam erat volutpat. Nulla semper ultricies tortor. Nulla elit nibh, gravida placerat, venenatis sed, placerat vel, metus. Aliquam facilisis turpis et risus. Maecenas pharetra sem nec turpis. Donec venenatis vulputate turpis. Quisque at pede nec pede consectetuer rhoncus. Sed tortor dolor, cursus sit amet, suscipit tincidunt, aliquet at, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;<span class="code"></p></span>
</p>
</div>
<p class="generated">Generated 2 paragraphs, 222 words, 1534 bytes of <a href="http://www.lipsum.com/" title="Lorem Ipsum">Lorem Ipsum</a></p>
</div>
</body>
</html>
--
Css centrer image
