Création de boutons et erreurs dans le CSS

**Crocodile26** · 31/05/2014, 19h11

Bonjour,

Je tente désespérément de détecter certaines failles lors de la création d'un menu sous forme de boutons et lorsque je teste mon code sur chrome et safari, je m'aperçois que des "morceaux de boutons" s'invitent un peu partout sur la page.

Ci-joint le code html (le css étant incorporé directement dedans via la balise <style></style>ainsi que les captures d'écran de ma page sur chrome et safari (je n'ai pas i.e, mozilla et opéra).

Par avance, merci pour votre aide et bon week-end ensoleillé à tous !

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
	<head>
		<title>sl9da</title>
			<meta charset="utf-8"/>
				<style>
                                body{
                                background: white;
                                }
                                ul{
                                display: table;
                width: 500px;
                margin: 100px;
                                }
                                ul li
                                {
                                display : table-cell;
                                }
                                .pomme
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding-left: 7px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                }
                                .poire
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                                }
                                .fraise
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                }
                                .banane
                                {
                font-family: Arial;
                font-size: 1.6em;
                width: 100px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                }
                                .melon
                {
                                font-family: Arial;
                font-size: 1.6em;
                width: 200px;
                height: 43px;
                padding: 7px 7px 7px 7px;
                text-align: center;
                color: #000;
                background: #444;
                text-decoration: none;
                                }
                                p{
                        font-family: Arial;
                        font-size: 1.6em;
                        width: 200px;
                        height: 43px;
                        padding-top: 7px;
                        text-align: center;
                        color: #000;
                        background: #444;
                text-decoration: none;
                                }
                                </style>
	</head>
				<body>
						<ul>
					<li><a class="pomme"href="#1"</a>pomme</li>
					<li><a class="poire"href="#2"</a>poire</li>
					<li><a class="fraise"href="#3"</a>fraise</li>
					<li><a class="banane"href="#4"</a>banane</li>
					<li><a class="melon"href="#5"</a>melon</li>
						</ul>
						<p>Press</p>
				</body>
</html>

Nom : Capture d’écran 2014-05-31 à 17.49.56.png
Affichages : 135
Taille : 566,5 Ko

Nom : Capture d’écran 2014-05-31 à 17.55.16.png
Affichages : 131
Taille : 438,0 Ko

**Muchos** · 01/06/2014, 05h58

Je crois que c'est mieux d'avoir du code valide

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
<!-- Votre code actuel :
<ul>
  <li><a class="pomme"href="#1"</a>pomme</li>
  <li><a class="poire"href="#2"</a>poire</li>
  <li><a class="fraise"href="#3"</a>fraise</li>
  <li><a class="banane"href="#4"</a>banane</li>
  <li><a class="melon"href="#5"</a>melon</li>
</ul>
 
Code corrigé : -->
<ul>
  <li><a class="pomme" href="#1">pomme</a></li>
  <li><a class="poire" href="#2">poire</a></li>
  <li><a class="fraise" href="#3">fraise</a></li>
  <li><a class="banane" href="#4">banane</a></li>
  <li><a class="melon" href="#5">melon</a></li>
</ul>

Création de boutons et erreurs dans le CSS

HTML

Discussions similaires

Partager

Partager