Inserer une image en css

Version imprimable

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:

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:

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

21/09/2010, 15h51
polymorphisme

Bonjour,

Citation:

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 ? :calim2:
21/09/2010, 17h19
silencesim

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
21/09/2010, 17h25
kohsaka

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
21/09/2010, 18h11
silencesim

Citation:

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

oui, sur le site c'est celui qui se balade n'importe où, qui est de 900px sur 30px environ et qui devrait se trouver tout en bas.

Citation:

Par exemple #mainContent ne devrait pas être en absolute

si vous pouviez m'indiquer les erreurs que j'ai commise et me dire pourquoi je n'arrive pas a intégrer l'image cela serait super !

merci
29/09/2010, 12h01
silencesim

alors, une idée pour mon image ?

Bonjour,

Une proposition de code

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta name="google-site-verification" content="8SLa-Ew_0pIQJx4kgieDlrVfiF0ygGS--yxFPWzcgY4" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="http://www.ajiles.fr/style.css" rel="stylesheet" type="text/css" />
    <meta name="keywords" lang="fr" content="ajiles, ajile, creation, couture, créatif, bijoux, accessoires" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <link rel="icon" type="image/png" href="http://www.ajiles.fr/icon.png"/>
    <meta name="author" content="Simon Duclut Rasse / duclut-rasse.com" />
    <title>Bienvenue sur Ajiles.fr - Actualité</title>
    <style type="text/css">
        .thrColAbs #mainContent { position: relative; overflow: auto; }
        #body2 { height:30px; width:780px; border: 1px solid #d00; background-color:#3c628f;}
    </style>
</head>
 
<body>
<body class="thrColAbs">
 
    <div id="container">
        <div id="sidebar1">
            <a href="http://www.ajiles.fr//index.php">Actualit&eacute;</a>
            <a href="http://www.ajiles.fr//association.php">Cr&eacute;ation</a>
            <a href="http://www.ajiles.fr//liens.php">.liens</a>
            <a href="http://www.ajiles.fr//noussommes.php">.Qui sommes nous</a>
            <!-- fin de #sidebar1 -->
        </div>
 
        <br /><br /><br />
 
        <div id="mainContent">
            <div id="header">
                <h1> Ajiles.fr - Création multiple </h1>  
            </div>
 
            <p>&quot;Bonjour à tous les mordus des créations artistiques.&quot;</p>
            <p>
                Chez Ajiles en ce moment, Alys crée des personnages en mouvement, ce dandinant sur vos sacs, vos chapeaux ou vos clés ou encore sur vos chaussures (photos).<br />Tandis que Julie, entreprend de l'Artstylisme en tous genre, de la trousse pour la rentrée en passant par les portes cartes, les pochettes à tabac... fait tout en couleurs pour égayer l'automne qui s'annonce plutôt pluvieux vers chez nous!
            </p>
 
            <img src="http://www.ajiles.fr/images/machine.jpg" alt="" width="700" height="350" /><br />  
            <br />  
 
            <h2>Commandez maintenant nos creations originales, a petit prix !</h2>
            <p> 
                <img src="http://www.ajiles.fr/images/crea1.png" alt="" width="150" height="150" hspace="3" border="0" align="right" class="fltrt" />
                <img src="http://www.ajiles.fr/images/crea2.png" alt="" width="150" height="150" hspace="3" border="0" align="right" class="fltrt" /> 
                <img src="http://www.ajiles.fr/images/crea3.png" alt="" width="150" height="150" hspace="3" border="0" align="right" class="fltrt" /> 
            </p> 
            <p>Portes clés en mouvement, patchwork, peinture textile, couture diverses, accessoires multiples, bijoux fantaisies, ....<br /></p>
            <br /><br /><br />    
            <!-- fin de #mainContent -->
        </div>
        <div id="body2">
            <img src="http://www.ajiles.fr/images/ba.png" alt="" width="900" height="30" /> 
            La largeur de ce bloc doit &ecirc;tre 780px au lieu de 900px
        </div>
        <!-- fin de #container -->
    </div>
</body>
</html>

Bien cordialement,