Discussion :

[laurentSc]

Bonjour,

je viens de m'apercevoir que dans mon code, je demande 2 fois le centrage du texte et pourtant, il ne l'est pas...pourquoi ?

Code html :

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

<td class="width5 centrage"><span class="color006600 gras centrage"><a href="xxx.html"><img SRC="xxx.png" height=32 width=32></a><br/>Hermes</span></td>

Code css :

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

1
2
3
.centrage {
text-align:center;
}

Hermes et l'image sont alignés à gauche

[nef1912]

La balise <span> est de type inline et n'est pas modifiable comme une balise de type block.
Tu peux faire comme ça :

Code :

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

1
2
3
4
5
 
.centrage {
    text-align:center;
    display:block;
}

Ou remplacer ton span par un div.

[laurentSc]

Merci pour ta réponse ; néanmoins, ayant fait les 2 (j'ai remplacé span par div et ai rajouté display:block; dans la classe centrage) et ce n'est toujours pas centré...

[nef1912]

ça fonctionne chez moi. Tu dois avoir des propriétés qui "s'annulent".
Regarde : jsfiddle.net

[NoSmoking]

Bonjour,
je ne vois pas bien l'intérêt d'encapsuler dans SPAN, DIV ou autre quand le comportement normal devrait suffire.
avec le CSS (pour exemple)

Code :

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

1
2
3
4
.width5{
  width:500px;
  text-align:center;
}

et le html suivant

Code html :

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

1
2
3
4
<td class="width5">
  <img src="http://www.developpez.net/template/images/logo.png">
  <br>Hermes
<td>

cela devrait suffire non ?

[laurentSc]

Absent pendant une semaine, je n'ai pas pu regarder ; je viens de trouver ce qui provoque le non-centrage mais ne trouve pas de solution "moderne".

code où c'est centré :

Code html :

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

1
2
3
4
5
6
<table COLS=20>
<tr>
<td class="width5 centrage gras color006600"><a href="....html"><img SRC="....png" height=32 width=32></a><br/>Hermes</td>
...
</tr>
</table>

code où c'est pas centré :

Code html :

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

1
2
3
4
5
6
<table>
<tr>
<td class="width5 centrage gras color006600"><a href="....html"><img SRC="....png" height=32 width=32></a><br/>Hermes</td>
...
</tr>
</table>

La différence est donc juste l'attribut COLS=20 de la balise table dans le premier code ; comment remplacer "proprement" cela ?

[Invité]

Bonjour Laurent,

1/ commence par étudier la syntaxe :

• Les tableaux (XHTML & CSS)

2/ Si tu ne sais pas encore qu'il faut entourer les valeurs des attributs par des double quotes, et mettre ces dits attributs en minuscules, on ne peut pas grand'chose pour toi.

Code :

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

1
2
3
<table cols="20">
<tr>
<td class="width5 centrage gras color006600"><a href="....html"><img src="....png" height="32" width="32"></a><br/>Hermes</td>

3/ les style CSS, tu connais ?
et la syntaxe correcte pour une image ?

Code :

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

<img src="....png" alt="" style="height:32px; width:32px;" />

N.B Ce qui m'inquiète vraiment, c'est que tu sembles oublier plus vite que tu n'apprends...

[laurentSc]

Merci pour les corrections Jérôme ; cela dit, ce code n'est pas de moi ; je cherche juste à le modifier ; et j'ai trouvé dedans "dernière modification : 2003"... et c'est vrai que je n'ai pas remis en cause cette partie du code, bien qu'elle me surprenait.

Sinon, l'attribut "cols" de table n'est pas mentionné dans ton lien sur la syntaxe (juste une balise col).
Et pas trouvé sa signification, mais si je l'enlève, le centrage disparaît...

[Invité]

Laurent,
ça fait des mois que tu nous soûles avec ton "vieux code" !

Quand vas-tu ENFIN prendre les choses en main, et NETTOYER et CORRIGER les syntaxes défectueuses (et/ou obsolètes) de ce code AVANT de poster sur DVP ???

Et en effet, <table cols=20> ne veut rien dire.
La solution à ton problème est AILLEURS.
Dans le fichier CSS, très probablement.

On t'a aussi DEJA expliqué qu'il y a un "inspecteur de fichier", sur Firefox notamment (Firebug), qui permet, entre autres, de savoir QUELS STYLES CSS s'appliquent sur tel ou tel élément du code.
il serait TEMPS d'APPRENDRE à t'en servir !!!

[laurentSc]

C'est vrai que ce code est passé à l'as, et pourtant je l'ai beaucoup fait : fonctions xx_mysql -> PDO, remplacement des balises <font>, remplacements des vieilles balises html de mise en page (<b>, <i>, <u>, etc) par du CSS...

Sinon, j'ai voulu regarder mon code avec Firefox (alors que jusque là, que IE) et la mise en page tabulaire est perdue (ou table à une seule colonne au lieu de 20...)

Le code :

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
50
51
52
53
54
55
56
57
58
59
60
61
 
 
<?php
//header('Content-type: text/html; charset=UTF-8');
include (dirname(__DIR__).'\config\config.php');
?>
 
 
<br/>
<!--<table COLS=20 class="width100pour100">-->
<table cols="20" class="width100pour100">
<tr>
<td class="width5 centrage gras taillemoinsun">A1</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32px; width:32px"></a><br/>Hermes</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br/>Neon</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br/>Jupiter</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br/>Victoria</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br/>Superieur</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br/>Boree</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage color006600 gras"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br/>Bise</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
</tr>
 
<td class="width5 centrage"><span class="gras taillemoinsun">S2</span></td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage"><font color="#006600"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32; width:32"></a><br><b>Lion</b></font></td>
<td class="width5 centrage"><font color="#006600"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32px; width:32px"></a><br><b>Bentley</b></font></td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage"><font color="#006600"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32px; width:32px"></a><br><b>Cirrus</b></font></td>
<td class="width5 centrage"><font color="#006600"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32px; width:32px"></a><br><b>Koala</b></font></td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage"><font color="#006600"><a href="xxx.html"><img SRC="xxx.png" alt="" style="height:32px; width:32px"></a><br><b>Mangue</b></font></td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
<td class="width5 centrage">&nbsp;</td>
</tr>
...
</table>

[laurentSc]

Ce matin, j'ai trouvé l'explication du problème d'affichage avec Firefox (et c'est pas normal que ça marchait avec IE) : un display:block; dans une propriété CSS...Si je l'enlève l'affichage tabulaire est bon ; par contre, l'utilisation de Firebug (que je ne maîtrise pas) n'apporterait rien car si l'attribut cols="20" est nécessaire pour avoir le centrage avec IE, il est inutile avec Firefox !

[NoSmoking]

Force ta TABLE à respecter les dimensions avec un table-layout:fixed;.
► Glossaire des propriétés CSS

[laurentSc]

Merci, j'ai essayé, mais non seulement, ça reste non centré sous IE, mais du coup la largeur est trop faible et même sous FF, certaines cellules se chevauchent...

[NoSmoking]

ça reste non centré sous IE, mais du coup la largeur est trop faible et même sous FF, certaines cellules se chevauchent...

Si je fais un rapide calcul :
avec une Res_Ecran de 1280 chaque colonne fait 64px, si le navigateur est full page, ce qui entraine que quoiqu'il arrive cela va devenir fin d'avoir un affichage correct en toutes circonstances.

Un rapide test me montre que cela fonctionne et avec ce simple CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
.width100pour100{
  width:100%;
  table-layout:fixed;
}
.width5{
  width:5%;
}
.centrage{
  text-align:center;
}

[laurentSc]

Bonjour,

je viens de remplacer

Code css :

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

1
2
3
   .width5 {
 width:5px;
 }

par

Code css :

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

1
2
3
   .width5 {
 width:5%;
 }

(plus logique vu qu'il y a 20 cellules) et du coup, c'est aussi centré sous IE. Sachant que ma résolution d'écran est de 1366px, 5%=68,3px, nettement plus que 5px. Ca explique sûrement que le centrage se fait, mais pourquoi c'était quand même bon sous FF, malgré cette largeur des cellules spécifiée super faible ?

EDIT : j'ai oublié de préciser : si je mets la propriété CSS table-layout:fixed;, ça impose une largeur fixe des cellules et provoque des chevauchements, alors que si je l'enlève le navigateur ajuste les largeurs et plus de chevauchements...