Pb affichage "légende"-image

Bonjour à tous,

Tout d'abord ravi de faire parti de votre communauté

Alors voilà j'ai un petit souci CSS / HTML :

HTML

	  <table width="272" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="bottom" height="196">
			<div id="image">	
				<a id="lien" href="images/011206_carew_basa_grd.jpg" rel="lightbox" title="Carew et Basa ont rendez-vous. (L'Equipe)"></a>
				</div>			
            <table width="264" border="0" height="14" class="legende" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
              <tr>
                <td height="16">
                  <font size="1" face="Arial, Helvetica, sans-serif">
                    <b>Carew et Basa [...]</b>
                  </font>
                </td>
              </tr>
            </table><img src="images/pts.gif" width="10" height="4"></td>
        </tr>
      </table>

Ce tableau affiche une image dans un tableau avec une legende "pas dessus" l'image avec un filtre... lorsque je passe l'image en background comme ça

	  <table width="272" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="bottom" height="196" background="bloblo.jpg"> [...]

Pas de problemes le légende est bien incrusté sur l'image mais je n'utilise donc pas le div image.

Mais comme je travaille avec le JS lightbox v.2 la légende se retrouve en dessous de l'image...
Je en suis pas un dieu du CSS pouvez vous donc m'aider ???!!!

Pour infos le CSS

.legende {
	font-size:10px; 
	padding-left: 4px; 
	filter: Alpha(Opacity=75);
}

#image {    /* bloc image en arrière-plan */
	width : 272px;
	height: 196px;
	background: url(images/011206_carew_basa.jpg) top left no-repeat;
}

#lien {    /* zone cliquable */
	float: left;
	width : 272px;
	height: 196px;
}

Merci d'avance

Désolé, pour ma part je vais avoir du mal à t'aider, vu que je connais très peu la mise en page « à l'ancienne », avec des tableaux et des balises font dans tous les sens. Pfiou, comment on faisait avant ?, c'est limite illisible comme code.

Je laisse les plus anciens t'aiguiller.


Mais à tout hasard :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/

Ouai c'est mon côté un peu old school

Merci quand même je vais regarder ton lien...

Hello,

Puisqu'il s'agit d'un problème de mise en forme (donc de CSS), et non de XHTML, je déplace le sujet dans le bon salon