Alignement centré non respecté

**Denis Placé** · 12/12/2012, 22h10

Bonjour,

Je cherche à centrer le mot Accueil dans ma colonne et il ne l'est pas dans Chrome.
Mon code est le suivant :

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
51
52
53
54
55
56
57
 
<html>
<head>
<style>
body { background="#018080";
bgcolor="#018080";}
ul {list-style-type: none; margin-left: -1;
font: 14px Arial, sans-serif;} 
li {margin-bottom: 0;}
.menu {
	background-color: #800000;
    cursor:hand;
	font-family: Arial;
    font-size:10; color: #f8a560;
    font-weight: bold;}
.menu a {
	margin: 0px;
	width: 120px; 
	height: 15px;
	display: block;
	text-align:center;
	border: 1px ;
	text-decoration: none;
	color: #f8a560;
	background: #800000;font-size: 9px;
    font-weight: bold;}	 
.menu a:hover {font-size : 9px;
	font-family : helvetica, sans-serif;
	color : #800000;
	background: #f8a560;
	text-decoration : none;}
.entete {
	background-color : #f8a560;
	border-color : #800000;
	color : #800000;
	font-family : Helvetica, sans-serif;
	font-size : 9px;
   text-align :center;
	font-style : italic;
	font-weight : bold;
	line-height : 15px;
    width: 120px; 
}
</style>
</head>
<div align="center">
<center>
<table border="0" width="120" cellspacing="0" cellpadding="0">
   <tr><td class="entete">Sommaire</tr>
   <tr><td><ul class="menu">
       <li><a href="accueil.html">Accueil</a></li>
       </ul></td></tr>
  </table>
  </center>
</div>
</body>
</html>

Merci aux personnes qui se pencheront sur mon problème.

**rodolphebrd** · 12/12/2012, 22h58

Bonjour,

La liste dans la cellule de tableau rend le code très confus.

Je ne sais pas ce que tu veux faire par la suite..

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 align="center">
  <center>
    <table border="0" width="120" cellspacing="0" cellpadding="0">
      <tr>
        <td class="entete">Sommaire
      </tr>
      <tr>
        <td class="menu">
            <a href="accueil.html">Accueil</a></td>
      </tr>
    </table>
  </center>
</div>

**NoSmoking** · 12/12/2012, 23h30

Bonsoir,
la structure sur base de TABLE est plus que moyenne, on pourrait faire par exemple :

Code html :

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

1
2
3
4
5
6
<div id="div_menu">
  <p class="entete">Sommaire</p>
  <ul class="menu">
    <li><a href="accueil.html">Accueil</a></li>
  </ul>
</div>

avec comme CSS associé

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#div_menu{
  width:120px;
  margin:0 auto;
}
#div_menu p{
  padding:0;
  margin:0;
  text-align :center;
}
#div_menu ul{
  padding:0;
  margin:0;
}

Quelques remarques quand même
- mettre un DOCTYPE , par exemple <!DOCTYPE html>, n'est pas un luxe mais une EXCELLENTE façon de procéder.

- ne pas mettre n'importe quoi dans la partie STYLE du document, exemple

Code css :

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

1
2
body { background="#018080";
bgcolor="#018080";}

bizarre tout cela!

- diverses remarques sur le CSS reprisent rapidement dans le code

Code css :

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
62
63
64
65
66
67
68
body {
  background:#018080;/* LA BONNE ECRITURE */
}
ul{
  list-style-type: none;
/*  margin-left: -1;/* ??? */
/*  font: 14px Arial, sans-serif;/* NE SERT A RIEN REDEFINI*/
}
li{
/*  margin-bottom: 0;/* PAS UTILE */
}
.menu {
  background-color: #800000;
  cursor:hand;
  color: #f8a560;
  font-family: Arial;
  font-size:10px /* AJOUT UNITE ! */;
  font-weight: bold;
}
.menu a {
  font-size: 9px;/* DEJA DEFINI dans .menu ? */
  font-family : helvetica, sans-serif;
/*  font-weight: bold;/* DEJA DEFINI dans .menu */
  margin: 0px;
  width: 120px;
  height: 15px;
  display: block;
  text-align:center;
  border: 1px ;
  text-decoration: none;
  color: #f8a560;
  background: #800000;
}
 
.menu a:hover {
/*  font-size : 9px;/* DOUBLON */
/*  font-family : helvetica, sans-serif;/* DOUBLON */
  color : #800000;
  background: #f8a560;
/*  text-decoration : none;/* DOUBLON */
}
 
.entete {
  background-color : #f8a560;
  border-color : #800000;
  color : #800000;
  font-family : Helvetica, sans-serif;
  font-size : 9px;
/*  text-align :center;/**/
  font-style : italic;
  font-weight : bold;
  line-height : 15px;
/*  width: 120px;/**/
}
/*==== AJOUT ===*/
#div_menu{
  width:120px;
  margin:0 auto;
}
#div_menu p{
  padding:0;
  margin:0;
  text-align :center;
}
#div_menu ul{
  padding:0;
  margin:0;
}