Discussion :

[jmde]

Bonjour,


Sur mes pages j’ai mis :

Code :

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

1
2
3
<div class="photo-distinction">
<img src="Diapositive45.JPG"/>
</div>

Et

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.photo-distinction {
	margin-top:7%;
	margin-left:25%;
             margin-right: 25%;
	width:50%;
	height:350px;
	color: #000080;
	padding-bottom:8%;
	padding-right: 1%;
	letter-spacing: normal;
	}

Pourquoi ma photo déborde du div ?
Est-il possible de positionner la photo dans le div sans indiquer
les dimensions de la photo ?

Merci pour votre aide.

Salutations

[aL1ba]

pour ce qui est de l'image dans un div, un exemple de code:
XHTML:

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
<div id="container"><!--strt of container-->
<div id="filecontained"><!--strt of filecontined-->
<h1>Available albums disponibles</h1>
<img class="imagefloatR" src="photo_Idetc/albumrbc.png" title="page d'index des albums" alt="page d'index des albums"  />
 
<p>
Pour accéder à l"album de votre choix, simplement placer votre curseur sur votre sélection et cliquez.
À l'intérieur de chaque album, vous pourrez soit utiliser les flèches de navigation ou directement cliquer sur votre sélection pour visionner les photos.
</p> <br /><p>
Click on the link of your choice to access the album. Within each album, you may either use the navigation arrows or click on a specific thumbnail to view your selection.
</p> 
<ul>
	<li><a  href="photo-ca/reunion-ca20091206.html" title="photos de réunions du C.A (Clubs du Québec)">Réunions du C.A Meetings (Clubs du Québec)</a></li>
	<li><a href="photo-golf2009/photo-golf2009.html" title="photos golf 2009">Golf 2009</a></li> 
	<li><a href="photo-noel2009/noel2009.html" title="Diner de Noël 2009">Diner de Noël 2009 Xmas lunch</a></li>
	<li><a href="photo-mont-saint-hilaire2009/mont-saint-hilaire2009.html" title="Visite à Mont-Saint-Hilaire 2209">Visite à Mont-Saint-Hilaire, le 23 septembre 2009 </a></li>
</ul>
<div class="clearBoth">
</div><!--end of clearboth div-->
</div><!--end of filecontained-->
<br />
</div><!--end of container-->

Bien sûr, éditer le XHTML pour le nom du clas si different de "imagefloatR" et aussi le path pour la photo. Il y a un peu plus d'info dans le XHTML, mais ça de donne le contexte.
--------------------------------

et pour le CSS pour la photo:

Code :

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

.imagefloatR {float: right; width:250px; height: 250px; margin: 45px;   padding:1px; border: 0px; }

Bien sûr, tu devras éditer au besoin, dans le CSS, le float right or left, et aussi la taille de la photo, ainsi que la marge, etc.

Me semble que c'est complet....
bye,