18082 sujets

Questions générales et questions de débutants

DIV et IMG

Bonjour,

Je tente ma chance sur ce forum plus spécialisé (je l'ai déjà posé sur le hub !).

http://www.aujardin.info/trucs/trucs_fourmis.php

Je souhaiterai que mes boites qui encadrent chaque truc contournent l'image (et non une superposition) or je n'y arrive pas. J'ai essayé en mettant l'image dans un DIV (inline ou pas) et tout ce que j'ai réussi à faire, c'est du n'importe quoi.

Comment adresser ce problème ?
Merci
Salut,

c'est pas très clair comme explication, m'enfin on va faire avec...

Je suppose que tes truc ce sont tes cadres de contenu avec le texte.
Et ce que tu veux, c'est que la photo agrandisse le cadre si le texte est trop court.

Pour ce faire, l'image en float (ce que tu as fait j'imagine) et il faut ajouter un élément de type block à la suite et lui appliquer la propriété clear pour faire s'étendre le cadre.
Donc en résumé.

Admettons que tes trucs soient des <div> qui contiennent texte et image :
<div id="contenu">
<div>
<p><img />bla bal</p>
<hr class="clear" />
</div>
</div>


Le code CSS
div#contenu div p img
{
float: right;
}

div#contenu hr.clear
{
clear: both;
visibility: hidden;
}

Modifié par Olivier (04 Aug 2005 - 22:19)
Si tu veux tester directement

<!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>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="fr" />
		<style type="text/css" media="screen">
			div#contenu
			{
				width: 50%;
			}
			
			div#contenu div img
			{
				float: right;
			}
			
			div#contenu div hr.clear
			{
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
	<div id="contenu">
		<div>
			<p><img src="http://www.aujardin.info/img/img7/puceron-vert.jpg" alt="pucerons" />Je confirme pour "le marc de café", qu'il s'agisse de fourmis à l'intérieur de la maison ou dans les champs. Les fourmis mangent le marc de café qui est un poison violent pour elles.
Extrait d'un volume du Prof. Peyronnet.<br />
Jean-Marie
			</p>
			<hr class="clear" />
		</div>
		
		<div>
			<p><img src="http://www.aujardin.info/img/img7/puceron-vert.jpg" alt="pucerons" />Je confirme pour "le marc de café", qu'il s'agisse de fourmis à l'intérieur de la maison ou dans les champs. Les fourmis mangent le marc de café qui est un poison violent pour elles.
Extrait d'un volume du Prof. Peyronnet.<br />
Jean-Marie
			</p>
			<hr class="clear" />
		</div>
		
		<div>
			<p><img src="http://www.aujardin.info/img/img7/puceron-vert.jpg" alt="pucerons" />Je confirme pour "le marc de café", qu'il s'agisse de fourmis à l'intérieur de la maison ou dans les champs. Les fourmis mangent le marc de café qui est un poison violent pour elles.
Extrait d'un volume du Prof. Peyronnet.<br />
Jean-Marie
			</p>
			<hr class="clear" />
		</div>
	</div>
	</body>
</html>

Modifié par Olivier (04 Aug 2005 - 22:19)
Merci Olivier,

C'est pas tout fait çà. Je voudrais en fait que l'image soit en dehors des boites. Je voudrais que les boites utilisent l'espace restant une fois l'image affichée.

La page avec le code ci-après:
http://www.aujardin.info/trucs/test.php

Voici mon code de test:

<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="screen">
.boite
{
border: 1px dotted #808080;
}

.image
{
float: right;
}

.clear
{
clear: both;
visibility: hidden;
}
</style>
</head>

<body>
<div class="image">
	<img src="http://www.aujardin.info/img/img7/puceron-vert.jpg" alt="pucerons" />
</div>
<hr class="clear" />
<div class="boite">
	Je confirme pour "le marc de café", qu'il s'agisse de fourmis à l'intérieur de la maison ou dans les champs. Les fourmis mangent le marc de café qui est un poison violent pour elles.
<div>
<div class="boite">
	Je confirme pour "le marc de café", qu'il s'agisse de fourmis à l'intérieur de la maison ou dans les champs. Les fourmis mangent le marc de café qui est un poison violent pour elles.
<div>
<div class="boite">
	Je confirme pour "le marc de café", qu'il s'agisse de fourmis à l'intérieur de la maison ou dans les champs. Les fourmis mangent le marc de café qui est un poison violent pour elles.
<div>


</body>
</html>

Modifié par criocere (05 Aug 2005 - 09:40)
Bonjour criocere,

Je pense avoir compris ce que tu désires faire.

Dans un premier temps, j'ai enlevé l'attribut :
align="right"

à ton image "puceron-vert.jpg" dans le html

Ensuite, j'ai mis cette image en float: right, par exemple :
.imgFloatRight {
float: right;
}

et je l'ai appliqué au html comme ça :
<img class="imgFloatRight" src="..


Tu ne te rends pas bien compte de ce que ça rend parceque la phrase qui doit venir sous l'image n'est pas assez longue, mais si tu en mets une plus longue, tu verras que ça marche Smiley smile

J'espère que c'était ce que tu voulais faire.
Sujet clos
Aller à