Décalage d'images dans un tableau

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Décalage d'images dans un tableau

par Aureusms » 04 janv. 2008, 23:47

Et si tu essayes cela :

Code : Tout sélectionner

<td style="margin:0; background: url('images/mn_corner_rt.jpg'); width: 35px; height:35px;">essai </td>

Re: Décalage d'images dans un tableau

par Elie » 04 janv. 2008, 21:49

PS : beaucoup de monde trouve démodé l'utilisation de tableaux pour la mise en forme d'un site, cela dit j'ai longtemps travaillé avec les div mais les différences de comportements entre les différents navigateurs (FF, IE, Safari, Opera, ...) m'ont découragé de travailler de cette façon. Je n'ai pas du saisir encore toutes les subtilités. Quoi qu'il en soit si les tableaux me posent autant de soucis, je vais certainement revenir aux div...
C'est dangereux ce que tu dis ici :)

Pourquoi ton image est découpé en 9 partie .... C'est assez speciale quand meme non ? :)

cellpadding="0" cellspacing="0" dans ta <table> ne reglerait pas ca ?

Et pour ce qui est de ta question je pense que c'est normal de tronqué une image en background en partant du coin haut gauche sauf si tu le precise dans ton style :)

Décalage d'images dans un tableau

par Kaoteknik » 04 janv. 2008, 20:11

Bonsoir à tous,

je suis confronté à un petit problème de mise en forme d'un tableau où chaque cellule accueille une image de fond. J'ai travaillé un graphisme sur Photoshop que j'ai ensuite découpé avec des dimensions précises afin de placer chaque image dans une cellule de même dimension que l'image reçue.

En gros, par exemple, j'ai une image de 35 X 35 px, et une cellule de tableau de même taille, mais lorsque je place l'image en "background" celle-ci semble être réduite (ses dimensions deviennent 33 X 35 px). Ce qui évidemment occasionne des décalages (en apparence seulement) entre chaque cellule.

Je précise que dans le style CSS appliqué j'ai défini la propriété "border-collapse : collapse;" au tableau afin qu'il n'y ait pas d'espaces entre les cellules, mais rien n'y fait.

Pour régler le problème il a fallu que je diminue la taille des cellules (sans réduire la taille des images) pour que l'ensemble s'affiche correctement.

Le problème serait résolu si je n'étais pas du genre pointilleux, mais voilà... Ca m'horripile lorsque des choses basiques et en théorie logiques n'ont pas le comportement attendu. :P

Dernière précision : j'ai testé mon code sur Firefox 2.0.0.11 et IE 6 et le comportement est identique.

Pour vous aider à y voir plus clair, voici le code en question :

La feuille de style :

Code : Tout sélectionner

table#menu { border-collapse : collapse ; border : 0 ; } span#title { color : #312201 ; font-weight : bold ; font-size : 14px ; line-height : -2px ; }
Et le tableau incriminé :

Code : Tout sélectionner

<table id="menu"> <tr> <td background="images/mn_corner_lt.jpg" width="33" height="35"> </td> <td background="images/mn_top.jpg" width="128" height="35"> <center><span id="title">Questionnaires</span></center> </td> <td background="images/mn_corner_rt.jpg" width="33" height="35"> </td> </tr> <tr> <td background="images/mn_left.jpg" width="33"> </td> <td background="images/mn_bg.jpg" width="128"> <!-- <a href="#">Ajouter un questionnaire</a><br /> <a href="#">Modifier un questionnaire</a><br /> <a href="#">Supprimer un questionnaire</a><br /> <a href="#">Consulter les r&eacute;ponses</a> --> </td> <td background="images/mn_right.jpg" width="33"> </td> </tr> <tr> <td background="images/mn_corner_lb.jpg" width="33" height="35"> </td> <td background="images/mn_bottom.jpg" width="128" height="35"> </td> <td background="images/mn_corner_rb.jpg" width="33" height="35"> </td> </tr> </table>

Donc ma question est la suivante : est-ce un comportement normal des navigateurs de réduire la taille des images dans le sens de la largeur ?

PS : beaucoup de monde trouve démodé l'utilisation de tableaux pour la mise en forme d'un site, cela dit j'ai longtemps travaillé avec les div mais les différences de comportements entre les différents navigateurs (FF, IE, Safari, Opera, ...) m'ont découragé de travailler de cette façon. Je n'ai pas du saisir encore toutes les subtilités. Quoi qu'il en soit si les tableaux me posent autant de soucis, je vais certainement revenir aux div...

Je propose une chose : lançons une pétition pour que les différents navigateurs adoptent les mêmes standards, sauvons mon crâne de la calvitie ! :lol: