Souci avec le collapse

**zooffy** · 02/02/2017, 14h52

Bonjour à tous.

Je ne suis pas débutant dans le développement de site Web, mais j'ai eu plusieurs années loin du clavier, du coup, je suis un peu perdu.
J'ai fait une table pour mettre en position des images et je voudrais faire en sorte que les bords se touchent. J'ai donc mis du collapse mais ça marche pas. Je me demande donc s'il n'y a pas eu un truc de changé dans CSS depuis que j'ai "lâcher" la rampe ?

je vous soumets mon code que vous pouvez littéralement copier/coller puisque les images sont hébergées sur un serveur, donc accessible si vous êtes connectés.

Code html :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>    
    <style type="text/css">
    .ROTA_imgPerso{
    width:75px;
    }
    .ROTA_Table{
    border-collapse:collapse;
    border:none;
    }
    .ROTA_tdPerso{
    border-collapse:collapse;
    border:none;
    }
    .ROTA_trPerso{
    border-collapse:collapse;
    border:none;
    border-spacing:0px;
    }
    </style>
</head>
<body style="background-color:white;">
    <form id="form1" runat="server">
    <div>
    <div id="divRotationHeroes"><table class="ROTA_table" border="0">
	<tr class="ROTA_trPerso">
		<td id="cellRota1" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso28.png" alt="Raynor" style="border-width:0px;" /></td><td id="cellRota2" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso8.png" alt="Muradin" style="border-width:0px;" /></td><td id="cellRota3" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso2.png" alt="Johanna" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPerso">
		<td id="cellRota4" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso12.png" alt="Falstad" style="border-width:0px;" /></td><td id="cellRota5" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso20.png" alt="Uther" style="border-width:0px;" /></td><td id="cellRota6" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso46.png" alt="Nasibo" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPerso">
		<td id="cellRota7" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso17.png" alt="Tyrande" style="border-width:0px;" /></td><td id="cellRota8" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso36.png" alt="Rexxar" style="border-width:0px;" /></td><td id="cellRota9" class="ROTA_tdPerso" align="center"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso47.png" alt="Sgt Marteau" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPerso">
		<td id="cellRota10" class="ROTA_tdPerso" align="center" colspan="3"><img class="ROTA_imgPerso" src="http://esport.ozouf.com/PersoRotationMiniature/Perso60.png" alt="Ragnaros" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPerso">
		<td colspan="3" style="text-align:center;"><span style="display:inline-block;border-width:2px;border-style:Solid;height:30px;width:210px;border-radius:10px;text-align:center;vertical-align:middle;background-color:Black;margin:auto;"><a title="Powered By Ablanore : go to website for explanations" href="http://statheroes.ozouf.com" target="_blank"><img title="Powered By Ablanore : go to website for explanations" src="http://esport.ozouf.com/PoweredByAblanore.png" alt="Powered By Ablanore" style="width:200px;border-width:0px;" /></a></span></td>
	</tr>
</table></div>
 
    </div>
    </form>
</body>
</html>

Il y a aussi un espace en bas de chaque TD qui me dérange et pour lequel je en trouve pas d'explication pour l'instant.

Si vous avez une idée pour le Collapse, merci pour votre aide et bonne journée.

**NoSmoking** · 02/02/2017, 19h23

Bonjour,
ton code CSS

Code :

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

1
2
3
4
.ROTA_Table{
    border-collapse:collapse;
    border:none;
}

ton code HTML

Code html :

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

<table class="ROTA_table" border="0">

regarde le nom de la classe.

Il te faudra de plus mettre tes images en display:block et supprimer le padding sur le <td>.

Supprime le style inline, align="center" ou autre border="0".

Commence déjà par cela avant de revoir cette mise en page

**zooffy** · 03/02/2017, 11h04

Merci pour ton aide.

Bien vu le T majuscule, j'avais pas vu, certainement à force de chercher.
J'ai fait les autres corrections j'ai deux points qui persistent :
- le border=0 : j'arrive ps à le virer. Vu que mon code est générer en .NET par une ASP:Table, j'ai bien peur que cela soit automatique. je vais farfouiller la doc pour voir si je peut le virer. Mais en le virant à la main, ça change rien.
- J'ai gardé un align:center pour la quatrième ligne vu que j'ai colspan je sais pas comment faire autrement pour avoir l'image au milieu

Sinon, je crois bien avoir apporté toutes le modif que tu as proposé.
Voici mon code à jour :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>    
    <style type="text/css">
    .ROTA_imgPersoH{
    width:75px;
    display:block;
    }
    .ROTA_TableH{
    border-collapse:collapse;
    border:none;
    }
    .ROTA_tdPersoH{
    border-collapse:collapse;
    border:none;
    }
    .ROTA_trPersoH{
    border-collapse:collapse;
    border:none;
    border-spacing:0px;
    }
    </style>
</head>
<body style="background-color:white;">
    <form id="form1" runat="server">
        <ajax:ScriptManager ID="smGene" runat="server" EnableScriptGlobalization="true"></ajax:ScriptManager>
    <div>
 
    <div id="divRotationHeroes"><table class="ROTA_TableH">
	<tr class="ROTA_trPersoH">
		<td id="cellRota1" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso28.png" alt="Raynor" style="border-width:0px;" /></td><td id="cellRota2" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso8.png" alt="Muradin" style="border-width:0px;" /></td><td id="cellRota3" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso2.png" alt="Johanna" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPersoH">
		<td id="cellRota4" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso12.png" alt="Falstad" style="border-width:0px;" /></td><td id="cellRota5" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso20.png" alt="Uther" style="border-width:0px;" /></td><td id="cellRota6" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso46.png" alt="Nasibo" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPersoH">
		<td id="cellRota7" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso17.png" alt="Tyrande" style="border-width:0px;" /></td><td id="cellRota8" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso36.png" alt="Rexxar" style="border-width:0px;" /></td><td id="cellRota9" class="ROTA_tdPersoH"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso47.png" alt="Sgt Marteau" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPersoH">
		<td id="cellRota10" class="ROTA_tdPersoH" align="center" colspan="3"><img class="ROTA_imgPersoH" src="http://esport.ozouf.com/PersoRotationMiniature/Perso60.png" alt="Ragnaros" style="border-width:0px;" /></td>
	</tr><tr class="ROTA_trPersoH">
		<td colspan="3" style="text-align:center;"><span style="display:inline-block;border-width:2px;border-style:Solid;height:30px;width:210px;border-radius:10px;text-align:center;vertical-align:middle;background-color:Black;margin:auto;"><a title="Powered By Ablanore : go to website for explanations" href="http://statheroes.ozouf.com" target="_blank"><img title="Powered By Ablanore : go to website for explanations" src="http://esport.ozouf.com/PoweredByAblanore.png" alt="Powered By Ablanore" style="width:200px;border-width:0px;" /></a></span></td>
	</tr>
</table></div>
 
    </div>
    </form>
</body>
</html>

J'ai bien une amélioration, mais les images ne se touchent toujours pas.

Merci pour ton aide et bonne journée.

**NoSmoking** · 04/02/2017, 13h46

J'ai fait les autres corrections j'ai deux points...

tu n'as pas mis de padding:0 sur tes <td>.

Concernant globalement ton CSS il te suffirait de mettre

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
26
.ROTA_TableH {
  border: none;
  border-collapse: collapse;
}
.ROTA_TableH td {
  padding: 0;
  text-align: center;
}
.ROTA_TableH img {
  display: block;
  width: 75px;
  margin: auto;
}
.ROTA_TableH a {
  display: block;
  width: 210px;
  height: 30px;
  margin: auto;
  border: 2px solid #000;
  border-radius: 10px;
  background-color: #000;
}
.ROTA_TableH a img {
  width: 200px;
  border: none;
}

ensuite ton code HTML pourrait être largement allégé de la sorte

Code html :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div id="divRotationHeroes">
  <table class="ROTA_TableH">
    <tr>
      <td id="cellRota1">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso28.png" alt="Raynor" />
      </td>
      <td id="cellRota2">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso8.png" alt="Muradin" />
      </td>
      <td id="cellRota3">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso2.png" alt="Johanna" />
      </td>
    </tr>
    <tr>
      <td id="cellRota4">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso12.png" alt="Falstad" />
      </td>
      <td id="cellRota5">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso20.png" alt="Uther" />
      </td>
      <td id="cellRota6">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso46.png" alt="Nasibo" />
      </td>
    </tr>
    <tr>
      <td id="cellRota7">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso17.png" alt="Tyrande" />
      </td>
      <td id="cellRota8">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso36.png" alt="Rexxar" />
      </td>
      <td id="cellRota9">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso47.png" alt="Sgt Marteau" />
      </td>
    </tr>
    <tr>
      <td id="cellRota10" colspan="3">
        <img src="http://esport.ozouf.com/PersoRotationMiniature/Perso60.png" alt="Ragnaros" />
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <a title="Powered By Ablanore : go to website for explanations" href="http://statheroes.ozouf.com" target="_blank">
          <img title="Powered By Ablanore : go to website for explanations" src="http://esport.ozouf.com/PoweredByAblanore.png" alt="Powered By Ablanore" />
        </a>
      </td>
    </tr>
  </table>
</div>

Plus de clarté c'est très souvent moins de soucis.

**zooffy** · 08/02/2017, 15h54

Merci beaucoup pour ton aide, ça marche nickel

Désole pour le padding, j'ai du zapper pourtant je me suis relu trois fois.

Pour l'allègement du code voilà ce que je peux faire de mieux :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="divRotationHeroes"><table class="ROTA_TableH" border="0">
	<tr>
		<td id="cellRota1"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso28.png" alt="Raynor" style="border-width:0px;" /></td><td id="cellRota2"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso8.png" alt="Muradin" style="border-width:0px;" /></td><td id="cellRota3"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso2.png" alt="Johanna" style="border-width:0px;" /></td>
	</tr><tr>
		<td id="cellRota4"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso12.png" alt="Falstad" style="border-width:0px;" /></td><td id="cellRota5"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso20.png" alt="Uther" style="border-width:0px;" /></td><td id="cellRota6"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso46.png" alt="Nasibo" style="border-width:0px;" /></td>
	</tr><tr>
		<td id="cellRota7"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso17.png" alt="Tyrande" style="border-width:0px;" /></td><td id="cellRota8"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso36.png" alt="Rexxar" style="border-width:0px;" /></td><td id="cellRota9"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso47.png" alt="Sgt Marteau" style="border-width:0px;" /></td>
	</tr><tr>
		<td id="cellRota10" align="center" colspan="3"><img src="http://esport.ozouf.com/PersoRotationMiniature/Perso60.png" alt="Ragnaros" style="border-width:0px;" /></td>
	</tr><tr>
		<td colspan="3" style="text-align:center;"><span style="display:inline-block;border-width:2px;border-style:Solid;height:30px;width:210px;border-radius:10px;text-align:center;vertical-align:middle;background-color:Black;margin:auto;"><a title="Powered By Ablanore : go to website for explanations" href="http://statheroes.ozouf.com" target="_blank"><img title="Powered By Ablanore : go to website for explanations" src="http://esport.ozouf.com/PoweredByAblanore.png" alt="Powered By Ablanore" style="width:200px;border-width:0px;" /></a></span></td>
	</tr>
</table></div>

Vu que l'origine du code est en .NET, il y a des trucs que je contrôle pas (ou que je sais pas comment les contrôler). Le border=0 de la Table par exemple, j'ai aucune idée de la propriété qui le contrôle.
Bon, maintenant je vais voir si ça marche toujours aussi bien une fois ajouter dans un WordPress, parce que là, y a des surprise dans certains thèmes...

Encore merci pour tout.

Souci avec le collapse

CSS

Vue hybride

Discussions similaires

Partager

Partager