Container avec 4 images dont 2 en haut et 2 en bas

Bonjour à tous,

Pour mon container, j'ai fait un cadre :

Code HTML

 <center><table
            style="border-right: #234F7B 1px solid; border-top: #234F7B 1px solid; margin:10px10px 20px; border-left: #234F7B 1px solid; border-bottom: #234F7B 1px solid" 
            cellSpacing=0 width="90%">
              <tbody>
              <tr>
                <td><align="left"><img src="images/boxleft.png" width="270" weight="230" alt=" Produits Sécurité personnelle"/> </td> 
                <td><align="right"><img src="images/boxright.png" width="270" weight="230" alt=" Produits Sécurité Sécurité professionnelle"/></td>    
              </tr>
              <tr>
              <td><align="left"><img src="images/boxleft.png" width="270" weight="230" alt="Produits Sécurité personnelle"/> </td> 
              <td><align="right"><img src="images/boxright.png" width="270" weight="230" alt=" Produits Sécurité Sécurité professionnelle"/> </td>
              </tr>
               </tbody>
            </table></center>

puis j'ai fait mon code CSS:

#container {
  position: relative;
}
  
#boxleft p {
  position: absolute;
  top: 2px
  left: 2px;  
  text-align: left;
  font: 12px Book Antiqua, Verdana, Arial, Helvetica, sans-serif;
  color: white;
  z-index: 10;
}

#boxright p {
  position: absolute;
  top: 2px
  right: 2px;  
  text-align: left;
  font: 12px Book Antiqua, Verdana, Arial, Helvetica, sans-serif;
  color: white;
  z-index: 9;
}

#boxleft p {
  position: absolute;
  top: 2px
  left: 2px;  
  text-align: left;
  font: 12px Book Antiqua, Verdana, Arial, Helvetica, sans-serif;
  color: white;
  z-index: 8;
}  
  
  #boxright p {
  position: absolute;
  top: 2px
  left: 2px;  
  text-align: left;
  font: 12px Book Antiqua, Verdana, Arial, Helvetica, sans-serif;
  color: white;
  z-index: 7;
}
 
 

ensuite code HTML

<div id="container">

 <div id="boxleft">

<p>&nbsp;>&nbsp;big><font color="#234F7B"><b>Sécurité professionnelle</b></font></big></a> 
........
 </div>
</div>

 

qu'est qui cloche dans mon code svp ? Le texte ne s'écrit dessus l'image, de plus la 1ere boite est décalée de 1 px environ vers le haut les 3 autres sont alignées.

Merci pour votre aide.
Modifié par Dorian48 (25 Aug 2008 - 20:44)

Hello,

1) Tout d'abord, il faut commencer par corriger les erreurs de HTML.
Ce code n'existe pas et est susceptible de provoquer des bugs :

 > big>

2) Ensuite, je ne comprends pas pourquoi en CSS tu appelles plusieurs fois le même sélecteur : "#boxleft p" deux fois et "#boxright p" deux fois également.
Au final, seules les dernières instructions sont prises en compte puisqu'elles écrasent les précédentes identiques.

3) Tu appelles le sélecteur "#boxright" qui n'apparaît nulle part dans le code HTML

4) quel est le rapport entre ton premier code HTML (celui qui contient un tableau) et le second (qui parle de <div id="container">) ? Est-ce que ce div est placé dans le tableau ? Si oui comment deviner où ?

Bref, beaucoup d'interrogations et d'a priori dans ton code.
Au final, sans lire tes explications, je ne comprends même pas où tu veux en venir.

Il faut décortiquer ton besoin en deux parties :
1) écrire du texte par dessus une image
2) placer les 4 images les unes par rapport aux autres.

Le mieux est de commencer dans l'ordre

Hup,

déjà l'enchaînement de position: absolute; + z-index, même si c'est toujours séduisant au premier abord, bien souvent ça mène à la catastrophe surtout lorsque ce n'est pas maîtrisé.

Je ne pige pas vraiment ce que tu veux...

Un exemple en ligne isolant ton problème serait appréciable et exprimer plus clairement ton besoin aussi.