Positionnement des sous titres par rapport aux images

Mammouth du PHP | 725 Messages

10 janv. 2013, 04:05

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

Image
.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>

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 8758 Messages

13 janv. 2013, 13:02

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).

@+
Il en faut peu pour être heureux ......

Avatar du membre
Mammouth du PHP | 1564 Messages

14 janv. 2013, 01:33

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.

Mammouth du PHP | 725 Messages

01 févr. 2013, 10:34

merci two3d, je vais relire la doc