Inserer une image en css

**silencesim** · 21/09/2010, 14h42

Bonjour,

je souhaite mettre une image dans le cadre de texte et la faire bouger suivant sa quantité. Je n'y arrive pas, quelqu'un peut-il m'éclairer ?

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<body>
 
<body class="thrColAbs">
 
<div id="container">
<div id="sidebar1">
    <?php include('menu.inc.php'); ?>
  <!-- fin de #sidebar1 --></div>
 
<br /><br /><br />
<div id="mainContent">
  <div id="header">
    <h1> Qui sommes nous ?</h1>    </div>
      <h2>Alys Konudriatzeff</h2>
      <p><img src="images/presentation.jpg" alt="" class="fltrt" />  </p> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<br />  <br />  
 
 
    <h2>Julie rassen</h2>
           <p><img src="images/presentation.jpg" alt="" class="fltlft" />  </p> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula.
     quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula.
      <!-- fin de #mainContent -->
  </p>
<br /><br />
    <p><img src="images/atelier.jpg" alt=""  />  Alys Konudriatzeff et Julie rassen </p> 
 
 
  </div>
 <div id="body2"><img src="images/bas.png" alt="" width="900" height="30" /> 
<!-- fin de #container --></div>
</div>   
</body>

css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
body  {
	font : 12px Arial, Helvetica, sans-serif;
	background: #ffffff;
	background-image:url(images/fond.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
body2  {
	background-image:url(images/bas.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
}
 
.thrColAbs #container { 
	position: relative; 
	width: 780px;  
	margin: 150px auto; 
	border: 0px solid #097c27;
	text-align: center; 
	padding-bottom:40px;
	padding-top:0px;
} 
 
.thrColAbs #sidebar1 {
	position: relative;
	top: 28px;
	right: 0px;
	width: auto; 
	height:12px;
	background:none; 
	padding: 0px 10px 0px 10px; 
	text-align:center;
	letter-spacing: 2px;
	font-size:15px;
	}
 
.thrColAbs #mainContent { 
position: absolute;
	margin: 20px 30px 0 30px; 
	padding: 0px 10px; 
	text-align: justify;
	background-image:url(images/transparent.png);
	background-repeat:repeat;
	-moz-border-radius: 15px;
		line-height:17px;
}
 
.thrColAbs #header h1 { 
padding-bottom: 15px;
	font-size:30px;
}
.fltrt { 
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
a {
font-weight : bold;
font-style:italic;
text-decoration : none;
color : #333333;
}
a:visited {
	font-weight : bold;
font-style:italic;
	text-decoration: none;
	color: #000000;
}
a:hover {
	font-weight : bold;
font-style:italic;
	text-decoration: none;
	color: #FF3300;
}
a:active {
	font-weight : bold;
font-style:italic;
	text-decoration: none;
	color: #000000;
}

merci

**polymorphisme** · 21/09/2010, 16h51

Bonjour,

e souhaite mettre une image dans le cadre de texte et la faire bouger suivant sa quantité.

La quantité de quoi ? C'est quoi la quantité d'une image ou d'un texte ?

**silencesim** · 21/09/2010, 18h19

Désolé je me suis mal exprimé.
c'est à dire que, en gros la page contient un cadre qui augmentera de taille, en s'allongeant vers le bas, suivant la quantité de texte, d'image ou de quoi que ce soit d'autre qui serait ajouter à l'intérieur.
A l'extérieur de ce cadre se trouve une image de fond fixe, et je voudrai superposer une autre image par dessus l'image de fond, afin de fermer le cadre, en bas, et qui changerait de position suivant l'extension haut et bas du cadre.

pour faire simple :
http://www.ajiles.fr

merci

**kohsaka** · 21/09/2010, 18h25

le problème c'est la fermeture de ton cadre qui se retrouve tout en haut ?

edit : en regardant un peu de plus pres le code de ta page, ca part un peut dans tout les sens et tu n'utilises pas certains attributs à bon escient.

Par exemple #mainContent ne devrait pas être en absolute