Le collapse qui ne collapse pas [Résolu]

zooffy · 23/02/2011, 09h15

Bonjour à tous.

J'ai fait un tour sur le net pour vérifier avant de venir vous voir et a priori, j'ai bon dans mon codage.

Mais mon collapse ne collapse pas du tout. J'ai vérifié sur IE, FF et Chrome et rien du tout.
Pourtant ma page est simple.
Pourriez vous me dire ce qui ne fonctionne pas ?

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
 
<body>
<table>
<tr>
<td valign="top">
<img id="ctl00_cphCentral_FicheBienSite1001_imgBien" src="App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p1.jpg" style="border-width:0px;" />
<table id="ctl00_cphCentral_FicheBienSite1001_tblImagebien" style="border-collapse:collapse;">
	<tr id="ctl00_cphCentral_FicheBienSite1001_rowImageBien">
		<td><img src="App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p2.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;" /></td>
		<td><img src="App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p3.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;" /></td>
		<td><img src="App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p4.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;" /></td>
		<td><img src="App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p5.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;" /></td>
	</tr>
</table>
</td>
</tr>
</table>
</body>

Bisûnûrs · 23/02/2011, 09h22

On n'a pas les images, tu t'en doutes bien, donc difficile de savoir ce que c'est censé représenter et comment doit réagir ta page.

Mais on peut toujours essayer les suppositions :
Essaie avec un vertical-align:bottom sur tes images.

zooffy · 23/02/2011, 09h37

Merci pour ton aide.

Ce qui doit se passer c'est que les petites images en dessous de la grosse doivent être collée, bord à bord.

J'ai corrigé le code en deux points :
- ton idée de vertical-align:bottom qui n'a pas donné le résulat escompté.
- des liens vers les images pour que tu puisses les obtenir sur mon serveur. Du coup un copier coller de ce code (en dessous) dans une apge HTML vide et ça doit rouler.

Pourtant, à la base le collapse, c'est simple. Là je comprends pas pourquoi les images se collent pas.

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
19
20
21
22
23
24
25
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<title>Un test de Web ^ Breizh</title>
<link href="http://test.ozouf.com/App_Themes/Immo/ImmoIE.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<table>
<tr>
<td valign="top">
<img id="ctl00_cphCentral_FicheBienSite1001_imgBien" src="http://test.ozouf.com/App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p1.jpg" style="border-width:0px;" />
<table id="ctl00_cphCentral_FicheBienSite1001_tblImagebien" style="border-collapse:collapse;">
	<tr id="ctl00_cphCentral_FicheBienSite1001_rowImageBien">
		<td><img src="http://test.ozouf.com/App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p2.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;vertical-align:bottom;" /></td>
		<td><img src="http://test.ozouf.com/App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p3.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;vertical-align:bottom;" /></td>
		<td><img src="http://test.ozouf.com/App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p4.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;vertical-align:bottom;" /></td>
		<td><img src="http://test.ozouf.com/App_Themes/Immo/PhotoBien/18259e9a-d72f-4748-87b1-9aa516e6365c-p5.jpg" style="border-style:None;height:75px;width:100px;border-width:0px;vertical-align:bottom;" /></td>
	</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Bisûnûrs · 23/02/2011, 10h04

Dans ta feuille de style, tu peux rajouter :

Code :

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

1
2
3
td {
  padding : 0;
}

zooffy · 23/02/2011, 10h17

Merci, ça marche bien.

Je comprends pas du tout le rapport entre le collapse et le padding à 0, mais ça marche.

Bisûnûrs · 23/02/2011, 10h36

Les cellules des tableaux ont un padding par défaut. Donc il faut le supprimer. Le border-collapse ne correspond pas au padding.

23/02/2011, 10h17	#5
zooffy Membre Expert Erick OZOUF Développeur Web Inscription : août 2004 Messages : 3 378 Détails du profil Informations personnelles : Nom : Erick OZOUF Âge : 42 Localisation : France, Morbihan (Bretagne) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : août 2004 Messages : 3 378 Points : 1 330 Points : 1 330	Merci, ça marche bien. Je comprends pas du tout le rapport entre le collapse et le padding à 0, mais ça marche. __________________ Mon blog de création d'univers : Qualhiryann Mon site qui parle de moi moi.ozouf.com
	00

23/02/2011, 09h22	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	On n'a pas les images, tu t'en doutes bien, donc difficile de savoir ce que c'est censé représenter et comment doit réagir ta page. Mais on peut toujours essayer les suppositions : Essaie avec un vertical-align:bottom sur tes images.
	00

23/02/2011, 10h36	#6
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Les cellules des tableaux ont un padding par défaut. Donc il faut le supprimer. Le border-collapse ne correspond pas au padding.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email