28173 sujets

CSS et mise en forme, CSS3

Presentation répétitive

Bonjour à tous,

J'ai une page de présentation de produits à construire selon les contraintes suivantes :
les photos sont disposées trois par trois horizontalement.
sous chacune d'elles on a leur nom
sous chaque nom on a une petite description.
Puis les groupes de trois photos sont séparés par un trait horizontal.

J'ai une solution qui fonctionne mais qui ne me semble pas pro du tout et je suis sur que l'on peut optimiser la feuille de style.

J'ai crée plusieurs divs (correspondant à chaque groupe de trois photos)puis j'ai intégré un tableau dans chaque.

feuille de style :

#produits{
border-top-style: solid;
border-top-width: 1px;
border-top-color: #3CAE20;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 10px;
padding-top:10px;
}
#produits2{
border-top-style: solid;
border-top-width: 1px;
border-top-color: #3CAE20;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 10px;
padding-top:10px;
}
...

Dans le body :

<div id="produits">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="JavaScript:fenetre('pop_kamba.html');"><img src="images/mini/kamba_mini.jpg" border="0"></a></td>
<td align="center"><a href="JavaScript:fenetre('pop_massai.html');"><img src="images/mini/massai_mini.jpg"border="0"></a></td>
<td align="center"><a href="JavaScript:fenetre('pop_thmini.html');"><img src="images/mini/THmini52-72_mini.jpg" border="0"></a></td>
</tr>
<tr>
<td class="texte13grasvert" align="center">KAMBA</td>
<td class="texte13grasvert" align="center">MASSAI</td>
<td class="texte13grasvert" align="center">TH "Mini"</td>
</tr>
<tr>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_kamba.html');">En savoir plus... </a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_massai.html');">En savoir plus...</a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_thmini.html');">En savoir plus...</a></td>
</tr>
</table>
</div>
<div id="produits2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="JavaScript:fenetre('pop_sfmini.html');"><img src="images/mini/sfmini_mini.jpg" border="0"></a></td>
<td align="center"><a href="JavaScript:fenetre('pop_thmaster.html');"><img src="images/mini/thmaster_mini.jpg" width="169" height="120"border="0"></a></td>
<td align="center"><img name="" src="" width="140" height="120" alt=""></td>
</tr>
<tr>
<td class="texte13grasvert" align="center">KAMBA</td>
<td class="texte13grasvert" align="center">MASSAI</td>
<td class="texte13grasvert" align="center">TH "Mini"</td>
</tr>
<tr>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_kamba.html');">En savoir plus... </a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_massai.html');">En savoir plus...</a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_thmini.html');">En savoir plus...</a></td>
</tr>
</table>
</div>

Actuellement produits, produits2, produitsxx ont les mêmes propiétés. Peut-on n'avoir qu'un seul div pour faire celà?.

Merci de votre aide.
Cordialement.
Smiley smile Smiley smile

Frogybella
frogy a écrit :
Que puis-je te donner de plus que le code mis dans mon premier message???

Merci

Il faut que tu édites ton message et que tu entoures ton code avec les balises [ code] et [ /code] (sans espace)

Smiley cligne
Est-ce mieux comme celà? 


#produits{
border-top-style: solid;
border-top-width: 1px;
border-top-color: #3CAE20;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 10px;
padding-top:10px;
}
#produits2{
border-top-style: solid;
border-top-width: 1px;
border-top-color: #3CAE20;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 10px;
padding-top:10px;
}






<div id="produits">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="JavaScript:fenetre('pop_kamba.html');"><img src="images/mini/kamba_mini.jpg" border="0"></a></td>
<td align="center"><a href="JavaScript:fenetre('pop_massai.html');"><img src="images/mini/massai_mini.jpg"border="0"></a></td>
<td align="center"><a href="JavaScript:fenetre('pop_thmini.html');"><img src="images/mini/THmini52-72_mini.jpg" border="0"></a></td>
</tr>
<tr>
<td class="texte13grasvert" align="center">KAMBA</td>
<td class="texte13grasvert" align="center">MASSAI</td>
<td class="texte13grasvert" align="center">TH "Mini"</td>
</tr>
<tr>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_kamba.html');">En savoir plus... </a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_massai.html');">En savoir plus...</a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_thmini.html');">En savoir plus...</a></td>
</tr>
</table>
</div>
<div id="produits2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="JavaScript:fenetre('pop_sfmini.html');"><img src="images/mini/sfmini_mini.jpg" border="0"></a></td>
<td align="center"><a href="JavaScript:fenetre('pop_thmaster.html');"><img src="images/mini/thmaster_mini.jpg" width="169" height="120"border="0"></a></td>
<td align="center"><img name="" src="" width="140" height="120" alt=""></td>
</tr>
<tr>
<td class="texte13grasvert" align="center">KAMBA</td>
<td class="texte13grasvert" align="center">MASSAI</td>
<td class="texte13grasvert" align="center">TH "Mini"</td>
</tr>
<tr>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_kamba.html');">En savoir plus... </a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_massai.html');">En savoir plus...</a></td>
<td align="center">Thermopelliculeuse. <a href="JavaScript:fenetre('pop_thmini.html');">En savoir plus...</a></td>
</tr>
</table>
</div>



Pour rappel
J'ai une page de présentation de produits à construire selon les contraintes suivantes :
les photos sont disposées trois par trois horizontalement.
sous chacune d'elles on a leur nom
sous chaque nom on a une petite description.
Puis les groupes de trois photos sont séparés par un trait horizontal.

J'ai une solution qui fonctionne mais qui ne me semble pas pro du tout et je suis sur que l'on peut optimiser la feuille de style.

J'ai crée plusieurs divs (correspondant à chaque groupe de trois photos)puis j'ai intégré un tableau dans chaque.

Actuellement produits, produits2, produitsxx ont les mêmes propiétés. Peut-on n'avoir qu'un seul div pour faire celà?.


Frogybella
Smiley smile Smiley smile
Sujet clos
Aller à