Discussion :

[leup]

bonjour !

j'ai un tableau, avec une cellule comportant une image (pensez à une fiche de film, image du film à gauche, infos techniques à droite de l'image et résumé en dessous...)

j'aimerais que ma cellule (<td>) soit de la taille de mon image, et ce de manière plus ou moins "automatique", car la taille de l'image peut changer à chaque fois.


Mon problème, c'est que quand j'insère mon image, la cellule est bien adapté en taille en hauteur, mais elle est plus large que l'image d'au moins 30pixels. Et le texte "infos techniques" qui se trouve dans la cellule de droite ne dispose donc pas de tout l'espace auquel il pourrait avoir "droit".

Avez-vous une idée pour m'aider svp ?

ps : je mets en pièce jointe une image avec les cellules "entourées" d'une bordure rouge. On voit bien que la largeur de la cellule de l'image est plus large que l'image elle même...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table id="fiche_table">
            <tr>
                <td class="imagefilm"><img src="fiche1.jpg" /></td>
                <td class="infostechniques"><span class="titre_fiche">INSIDE MAN - L'HOMME DE L'INTERIEUR</span><br /><span class="realisateur_fiche">de spike lee</span><br />
  USA, 2006, 2h10, vostf / Avec Denzel Washington, Jodie Foster, Clive Owen, Willem Dafoe</td>
            </tr>
            <tr>
                <td colspan="2">L&rsquo;inspecteur Keith Miller de la police new-yorkaise est un homme de terrain en passe d&rsquo;&ecirc;tre promu, mais sur lequel p&egrave;sent des accusations &agrave; la suite d&rsquo;une bavure. Lui et son partenaire sont envoy&eacute;s sur les lieux d&rsquo;un hold-up avec prise d&rsquo;otage et se retrouvent face &agrave; un criminel de grande envergure. Des n&eacute;gociations tendues s&rsquo;engagent et une avocate influente s&rsquo;immisce dans la crise. Miller se rend alors compte que dans ce jeu du chat et de la souris, les r&egrave;gles sont arbitraires et les responsabilit&eacute;s des uns et des autres sont peu claires.</td>
            </tr>
        </table>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
td.infostechniques {
    vertical-align:top;
    text-align:left;
}
 
td.imagefilm {
    margin: 0px 0px 0px 0px;
}
 
.titre_fiche {
    font-size: 14px;
    font-weight: bold;
}
 
.realisateur_fiche {
    color: #3399FF;
    font-size:12px;
}

[Swoög]

Laisse tomber les tableaux pour la mise en page (cf ma signature ^^)

tu auras moins de problème je pense avec un positionnement par CSS ^^

[ilood]

Salut

Oui tu auras moins de problème avec une mise en page tabless
Tu pourrais faire quelque chose dans ce genre :
html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div class="fiche_film">
<img class="imagefilm" src="image.jpg" width=".." height="..." />
<div class="infos_tech"><span class="titre_fiche">INSIDE MAN - L'HOMME DE L'INTERIEUR</span><br /><span class="realisateur_fiche">de spike lee</span><br />USA, 2006, 2h10, vostf / Avec Denzel Washington, Jodie Foster, Clive Owen, Willem Dafoe</div>
<div class="separe"></div>
<p class="synopsis">L&rsquo;inspecteur Keith Miller de la police new-yorkaise est un homme de terrain en passe d&rsquo;&ecirc;tre promu, mais sur lequel p&egrave...</p>
</div>

css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.separe {
    clear: both;
    height: 0;
    font-size: 0px;
}
.imagefilm {
    float: left;
}

[leup]

merci de vos réponses.

le problème c'est que j'utilise les CSS, beaucoup. Et que ce tableau est une "traduction" d'un positionnement par CSS qui ne marchait pas. En tout cas, pas correctement, et pas sous les navigateurs Mac. Et même entre IE et FF..

de +, la page est destinée à être modifiée par une personne qui ne connait pas CSS et demande à ce que ce soit fait avec un tableau...

bref.

je vais continuer à chercher et préparer plusieurs solutions...

[leup]

ps : je vais tester ta solution et voir si ça résoudrait pas mes problèmes. J'utilisais à peu près les mêmes méthodes mais pas tout à fait (imbriquement des div différents...)

à voir, à voir...

(à quand un rendu identique sous tous les navigateurs les plus courants ? )

[Swoög]

(à quand un rendu identique sous tous les navigateurs les plus courants ? )

Quand MS se sera décidé à respecter les standards du W3C^^