Création de boutons et erreurs dans le CSS

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

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 : 151
Taille : 566,5 Ko

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

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

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

Vue hybride

Discussions similaires

Partager

Partager