Ouverture de SUPINFO USA à San Francisco en 2008. Des études en informatique en Californie à un tarif abordable ! Inscrivez-vous dès maintenant !

Recherche

5 messages

Gorlk

Les tableaux et les images

le 18 Juin 08 à 10h36

Bonjour,

Je viens vers vous avec une question très...

Enfin voilà :

Je cherche à intégrer des images à un tableau. La blague, c'est que quand j'intègre l'image au tableau, une ligne blanche se créee.

En effet, je cherche à avoir une image qui remplit la totalité de la cellule mais on dirait que le fait que <img /> soit une balise de type block pose un problème.

La cellule fait 50px:50px (un carré donc) et l'image .jpg fait les mêmes dimensions.

Si je n'affiche pas l'image dans la cellule, celle-ci fait bien 50px:50px, mais si j'affiche l'image, elle s'agrandit malgré le code css et laisse donc une ligne blanche.
Je précise que l'image doit être insérée par la page html. Je ne peux pas l'insérer dans le code css.
Par contre je peux l'insérer par un autre moyen que <img /> (si cet autre moyen existe).

J'ai à peu près tout essayé je pense (je précise que le code est simplifié pour vous faciliter la tâche) :

code css :

table
{
border-collapse: collapse;
}

tr, td
{
border: 1px solid black;
height: 50px; (note : j'ai tenté avec max-height et max-width)
width: 50px;
padding: 0px;
margin: 0px;
}

img
{
display: inline;
}

code html :

<tr>
<td>
<img src="lien.jpg" alt="lien" />
</td>
</tr>

Merci pour votre future aide :p

DB1

le 18 Juin 08 à 14h34

Pourrais-tu nous préciser le navigateur utilisé et sa version

Parce que code ci-dessous fonctionne avec ie6 et firefox 3

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" href="test.css">
</head>
<body>

<table>
<tbody>
<tr><td><img src="3d.jpg" alt="3d.jpg" /></td></tr>
</tbody>
</table>

</body>
</html>

css :

tr, td
{
border: 1px solid red;
padding: 0px;
margin: 0px;
}

img
{
display: inline;
}

De plus la mise en page peut être différente en fonction du DOCTYPE. Ca pourrait aussi expliquer ton problème

Gorlk

le 19 Juin 08 à 00h11

Oui, j'ai oublié de préciser (désolé), j'utilise xHTML 1.0 et Firefox 3.

Avec 4.01 ça marche sans aucun problème.

Est-ce un "bug" de xHTML 1.0 donc ?

Je vais continuer en 4.01 pour l'instant en tout cas, pas le choix du coup ^.^"

Merci beaucoup pour cette solution ;)

Michel35

le 24 Juin 08 à 00h09

C'est pas une bétise du style : il faut que le </td> soit sur la même ligne de code que le </img src=..> par hasard ?

dmao

le 01 Juill. 08 à 19h27

Tu te trompes en fait.
La balise <img> est inline par défaut. Hors IE la considère comme du texte, et laisse donc un espace en dessous pour les des lettres comme p ou g.
Donc tu dois mettre ton image en display:block
cf forum.alsacreations.com...

5 messages

Vous devez être connecté pour écrire un message !

Sujets Similaires:

Glossaire High-Tech : # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Découvrez aussi : AchetezFacile (Comparateur de prix) - JeuxVideo.fr - Neteco - Ozap - Mobinaute - JeuxVideo.TV (Emissions TV)
Echanges de Liens : Allociné (Cinéma, VOD) - Cityvox (Paris) - Franchise Jeux Vidéo - Boursier.com (Bourse Quotidien) - Infobebes (Grossesse)
Culture Jeux (Encyclopédie) - Webdistrib (Matériel Informatique) - Locafilm (Location DVD) - Pixmania (GPS Garmin) - auFeminin (beauté, mode)
Sur cette page : Les tableaux et les images : Bonjour, Je viens vers vous avec une question très.... Mots Clefs : informatique, PC, hardware, matériel, jeux vidéo, multimédia, logiciel, téléchar....