IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

espace vide entre une image et le bas d'une cellule d'un tableau


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de danyboy85
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2005
    Messages
    548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2005
    Messages : 548
    Par défaut espace vide entre une image et le bas d'une cellule d'un tableau
    Bonjour,

    Lorsque j'insère une image dans une cellule d'un tableau, j'ai tout le temps un espace entre l'image et le bas de la cellule. J'ai pourtant indiqué les attributs cellspacing et cellpadding à 0. L'image colle bien au bord haut, au bord gauche et bord droit de la cellule mais jamais en bas. Y'a-t-il une astuce ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <table cellspacing=0 cellpadding=0>
       <tr>
          <td style="height:3px">   // NB : l'attribut height ne résout pas mon problème
             <img src="monImage.gif">
          </td>
       </tr>
    </table>

  2. #2
    Expert confirmé
    Avatar de N1bus
    Homme Profil pro
    Dev. Web & OpenERP
    Inscrit en
    Janvier 2003
    Messages
    2 827
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Dev. Web & OpenERP
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Janvier 2003
    Messages : 2 827
    Par défaut
    Quelles sont les dimensions de ton image ?

  3. #3
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    C'est normal et bizarrement si tu fais :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <table cellspacing=0 cellpadding=0>
       <tr>
          <td><img src="monImage.gif"></td>
       </tr>
    </table>
    Hop, ça marche.

    Ne pas passer à la ligne à la fin de la balise <img> et mettre le </td> directement derrière.

    C'est très chiant, je te l'accorde. Surtout si on veut avoir un code bien indenté et propre.

  4. #4
    Membre éclairé Avatar de danyboy85
    Homme Profil pro
    Développeur Java
    Inscrit en
    Décembre 2005
    Messages
    548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : Décembre 2005
    Messages : 548
    Par défaut
    Ah oui en effet il faut le savoir !

    En tout cas merci de ta réponse ca fonctionne nickel !!

    Bonne journée

  5. #5
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    N'oublie pas le petit .

  6. #6
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Par défaut
    Sinon, il y a aussi moyen de faire ça sans toucher à ton indentation...

    Les image sont des éléments en ligne (comme le simple texte). Donc l'alignement suit les mêmes règles. C'est à dire qu'il faut que le browser reserve un peu de place pour la queue des lettres qui peuvent descendre.

    Les images sont, par défaut, alignées sur ce qu'on appelle la baseline (ligne de base quoi).

    Donc deux possibilités:
    soit:
    - tu passes l'image en display:block; , comme ca, plus d'histoire d'alignement sur les lignes de textes
    - tu indiques que l'image doit s'aligner sur le bas de la ligne et non sur la ligne de base en faisant un vertical-align:bottom;

    Je te conseille la deuxième soultion qui te permettra de faire cohabiter texte et image sur une même ligne
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 18
    Dernier message: 08/03/2013, 15h25
  2. Conversion d'une image en mode RGB en une image en niveau de gris
    Par frisou65 dans le forum Calcul scientifique
    Réponses: 9
    Dernier message: 15/02/2012, 17h20
  3. Réponses: 2
    Dernier message: 23/05/2010, 12h45
  4. Réponses: 9
    Dernier message: 05/01/2010, 14h46
  5. Réponses: 5
    Dernier message: 17/04/2008, 18h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo