ABSOLUTE

Imager le résultat pour le code suivant pour les différents styles :

<body>
<div id="global"> <img class="image" alt="..." src="photo.jpg">
    <div class="textimage">DEBUT1---
        je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
            ...
        je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
    </div>
    <img class="image" alt="..." src="photo.jpg">
    <div class="textimage">DEBUT2---
        je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
            ...
        je suis la plus belle dans mon miroir je suis la plus belle dans mon miroir
    </div>
</div>
</body>

TD1

#global {
	position:absolute;
	left: 50%; 
	top: 50%;
	margin-top: -200px; /* moitié de la hauteur */
	margin-left: -300px; /* moitié de la largeur */
	border: 1px solid #000;
}

.image {
	border:   5px solid #000;
	position:absolue;
	width:300px;
	margin-top:100px;
	margin-left:30px;}

.textimage {
	border: 5px double #000;}

TD2

#global {
	width:800px;
	border:1px solid black;}

.image {
	position:absolute;
	width:300px;
	margin-top:20px;
	margin-left:30px;
	border:1px solid black;}

.textimage {
border: 5px double #000;}

TD3

#global {
	width:800px;
	border:1px solid black;}

.image {
	position:absolute;
	width:300px;
	margin-top:20px;
	margin-left:30px;
	border:1px solid black;}

.textimage {
	border: 5px double #000;}

TD4

#global {
	width:800px;
	border:1px solid black;}

.image {
	position:absolute;
	left : 100px;
	top : 50px;
	width:300px;
	margin-top:20px;
	margin-left:30px;
	border:1px solid black;}

.textimage {
	border: 5px double #000;}