merci two3d, je vais relire la doc

Salut,

petite info au passage, les indications align="", width="", cellpadding="", border="", etc dans les balises table, th, td, tr ne sont plus valides en HTML5, il suffit de passer par du CSS.

Salut,

Tu ne peux pas mettre un div dans un "a" (respecter les normes html). Simulent parce que la balise à est une balise dite en ligne alors que la balise div est une balise de type bloc.

Les blocs se dispose les un en dessous des autres donc pas besoin de jouer sur la position ;)

En gros <div><a....><img ...../></a></div><div><span>titre</span></div>
Le tout dans des balises td.

Pense à bien formater les td pour qu'ils prennent le maximum de largeur (25% à priori).
Dans le code php pense à finir la ligne si tu n'a pas assez de données (ajoute autant de td avec un &nbsp; que de case manquante pour finir la ligne).

@+

.namedTitles {
	width: 120px;
	margin-right: 5px;
	margin-top: -20px;
	font-size: 14px;
	filter: alpha(opacity=90);
	opacity: 0.9;
	position: absolute;
	background-color: #E4E3E4;
	border-radius : 3px 3px 3px 3px;
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	font-weight: bolder;
	text-align: center;
	}

<table class="showSheikh" align="center" border="1" cellpadding="3" width="700">
	<tr align="center">
		<td width="120">
			<a href="#" class="info">
				<div class="Span02" style="width:120px; height:100px;">
					<img src="Images.png" class="tooltip" height="100" width="120">
					</div>
					</a>
					<div class="namedTitles">
						<a href="#" class="info">Titre1</a>
					</div>
					</td>
						
		<td width="120">
			<a href="#" class="info">
				<div class="Span02" style="width:120px; height:100px;">
					<img src="Images.png" class="tooltip" height="100" width="120">
					</div>
					</a>
					<div class="namedTitles">
						<a href="#" class="info">Titre2</a>
					</div>
					</td>
		
		<td width="120">
			<a href="#" class="info">
				<div class="Span02" style="width:120px; height:100px;">
					<img src="Images.png" class="tooltip" height="100" width="120">
					</div>
					</a>
					<div class="namedTitles">
						<a href="#" class="info">Titre3</a>
					</div>
					</td>
						
						</tr></table>

Bonjour,

J'ai mis un code en PHP avec du CSS, pour selectionner des donnees de la BDD et les mettre sur ma page, le resultat peut avoir un maximum de 4 images par ligne sous titrees, dont le positionnement CSS marche bien, si j'ai moins de 4 images j'avais un mauvais positionnement du sous titrage, voici le code CSS ainsi que le code extrait HTML et une image pour voir le resultat, comment faire, pour avoir un bon positionnement des sous titres (sous l'image), quelques soit le nombre d'images par ligne? Merci

[img]http://data.imagup.com/10/1172449251.png[/img]

[css]
.namedTitles {
width: 120px;
margin-right: 5px;
margin-top: -20px;
font-size: 14px;
filter: alpha(opacity=90);
opacity: 0.9;
position: absolute;
background-color: #E4E3E4;
border-radius : 3px 3px 3px 3px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
font-weight: bolder;
text-align: center;
}

[/css]

[html]
<table class="showSheikh" align="center" border="1" cellpadding="3" width="700">
<tr align="center">
<td width="120">
<a href="#" class="info">
<div class="Span02" style="width:120px; height:100px;">
<img src="Images.png" class="tooltip" height="100" width="120">
</div>
</a>
<div class="namedTitles">
<a href="#" class="info">Titre1</a>
</div>
</td>

<td width="120">
<a href="#" class="info">
<div class="Span02" style="width:120px; height:100px;">
<img src="Images.png" class="tooltip" height="100" width="120">
</div>
</a>
<div class="namedTitles">
<a href="#" class="info">Titre2</a>
</div>
</td>

<td width="120">
<a href="#" class="info">
<div class="Span02" style="width:120px; height:100px;">
<img src="Images.png" class="tooltip" height="100" width="120">
</div>
</a>
<div class="namedTitles">
<a href="#" class="info">Titre3</a>
</div>
</td>

</tr></table>
[/html]