Fout in code
Ik ben bezig met het maken van een dashboard.
Maar ik heb ergens een fout in mijn code zitten waardoor sommige elementen niet goed worden weergeven.
Tevens werk ik voor het eerst met procenten in plaats van pixels.
Kan iemand mij helpen?
Alvast bedankt!
Met vriendelijke groet,
Dimitri Geers
Code (php)
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html>
<head>
<title>Dashboard | Dimitri Geers CMS</title>
<link href="dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dimitri Geers CMS" />
<meta name="author" content="Dimitri Geers" />
</head>
<body>
<div class="sidebar">
<div class="logo">
<img src="logo-wit.png" />
</div>
<div class="titel">Menu</div>
<ul>
<li>Home</li>
<div class="divider"></div>
<li>Pagina</li>
<div class="divider"></div>
<li>Menu</li>
<div class="divider"></div>
<li>Nieuws</li>
<div class="divider"></div>
<li>Agenda</li>
<div class="divider"></div>
<li>Portfolio</li>
<div class="divider"></div>
</ul>
<div class="titel">Admin Menu</div>
<ul>
<li><i class="icon-user"></i> Gebruikers</li>
<div class="divider"></div>
<li><i class="icon-sort-by-attributes"></i> Rangen</li>
<div class="divider"></div>
<li><i class="icon-pencil"></i> Website</li>
<div class="divider"></div>
<li><i class="icon-screenshot"></i> Logs</li>
<div class="divider"></div>
</ul>
</div>
<div class="container">
<div class="header">
<div class="profiel"><div style="
width: 80px;
height: 80px;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background: url(http://www.dimitrigeers.nl/cms/profiel.png) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
float: left;
"></div> <div class="tekst">Dimitri Geers</div></div>
<div class="menu"><i class="icon-cog"></i> Instellingen | <i class="icon-signout"></i> Afmelden</div>
</div>
<div class="stats">
<div class="stats-oranje">
<div style="font-size: 23px;margin-bottom: 1%;"><b>4</b></div>
<div style="font-size: 18px;">Geregistreerde sites</div>
<div style="font-size: 15px;">in jouw beheer</div>
</div>
<div class="stats-groen">
<div style="font-size: 23px;margin-bottom: 1%;"><b>1810</b></div>
<div style="font-size: 18px;">Gebeurtenissen</div>
<div style="font-size: 15px;">in de logs</div>
</div>
<div class="stats-lichtblauw">
<div style="font-size: 23px;margin-bottom: 1%;"><b>5</b></div>
<div style="font-size: 18px;">Gebruikers</div>
<div style="font-size: 15px;">beheren dezelfde sites</div>
</div>
<div class="stats-donkerblauw">
<div style="font-size: 23px;margin-bottom: 1%;"><b>18324</b></div>
<div style="font-size: 18px;">Aantal keer bekeken</div>
<div style="font-size: 15px;">alle sites die jij beheert</div>
</div>
</div>
<div class="versie-message">
Uw CMS draait op de volgende versie: V3.0.0. Update's worden automatisch uitgevoerd!
</div>
</div>
</body>
</html>
<head>
<title>Dashboard | Dimitri Geers CMS</title>
<link href="dashboard.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dimitri Geers CMS" />
<meta name="author" content="Dimitri Geers" />
</head>
<body>
<div class="sidebar">
<div class="logo">
<img src="logo-wit.png" />
</div>
<div class="titel">Menu</div>
<ul>
<li>Home</li>
<div class="divider"></div>
<li>Pagina</li>
<div class="divider"></div>
<li>Menu</li>
<div class="divider"></div>
<li>Nieuws</li>
<div class="divider"></div>
<li>Agenda</li>
<div class="divider"></div>
<li>Portfolio</li>
<div class="divider"></div>
</ul>
<div class="titel">Admin Menu</div>
<ul>
<li><i class="icon-user"></i> Gebruikers</li>
<div class="divider"></div>
<li><i class="icon-sort-by-attributes"></i> Rangen</li>
<div class="divider"></div>
<li><i class="icon-pencil"></i> Website</li>
<div class="divider"></div>
<li><i class="icon-screenshot"></i> Logs</li>
<div class="divider"></div>
</ul>
</div>
<div class="container">
<div class="header">
<div class="profiel"><div style="
width: 80px;
height: 80px;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
background: url(http://www.dimitrigeers.nl/cms/profiel.png) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
float: left;
"></div> <div class="tekst">Dimitri Geers</div></div>
<div class="menu"><i class="icon-cog"></i> Instellingen | <i class="icon-signout"></i> Afmelden</div>
</div>
<div class="stats">
<div class="stats-oranje">
<div style="font-size: 23px;margin-bottom: 1%;"><b>4</b></div>
<div style="font-size: 18px;">Geregistreerde sites</div>
<div style="font-size: 15px;">in jouw beheer</div>
</div>
<div class="stats-groen">
<div style="font-size: 23px;margin-bottom: 1%;"><b>1810</b></div>
<div style="font-size: 18px;">Gebeurtenissen</div>
<div style="font-size: 15px;">in de logs</div>
</div>
<div class="stats-lichtblauw">
<div style="font-size: 23px;margin-bottom: 1%;"><b>5</b></div>
<div style="font-size: 18px;">Gebruikers</div>
<div style="font-size: 15px;">beheren dezelfde sites</div>
</div>
<div class="stats-donkerblauw">
<div style="font-size: 23px;margin-bottom: 1%;"><b>18324</b></div>
<div style="font-size: 18px;">Aantal keer bekeken</div>
<div style="font-size: 15px;">alle sites die jij beheert</div>
</div>
</div>
<div class="versie-message">
Uw CMS draait op de volgende versie: V3.0.0. Update's worden automatisch uitgevoerd!
</div>
</div>
</body>
</html>
Code (php)
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
body {
font-family: "Helvetica Neue", Helvetica, "Noto Sans", sans-serif, Arial, sans-serif;
padding: 0px;
margin: 0px;
}
/* Begin sidebar */
.sidebar {
height: 100%;
width: 20%;
background-color: #2F3543;
color: #949494;
float: left;
position: fixed;
}
.sidebar .logo {
width: 90%;
height: auto;
margin: 0px auto;
}
.sidebar .logo img {
width: 100%;
height: auto;
margin-top: 6%;
}
.sidebar .titel {
background-color: #282B34;
width: 90%;
height: auto;
padding: 4%;
padding-left: 5%;
padding-right: 5%;
font-size: #17px;
color: #FFF;
border-top: 1% solid;
border-bottom: 1% solid;
border-color: #212832;
margin-top: 6%;
}
/* sidebar menu */
.sidebar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.sidebar ul li {
width: 100%;
height: auto;
font-size: 15px;
padding: 4%;
padding-left: 5%;
padding-right: 5%;
}
.sidebar ul li:hover {
width: 90%;
background-color: #404759;
}
.sidebar ul .divider {
height: 0.25%;
width: 100%;
background-color: #404759;
}
/* Begin main content */
.container {
width: 70%;
height: auto;
margin-left: 25%;
margin-top: 1%;
position: absolute;
}
/* Header */
.header {
width: 100%;
height: auto;
color: #6C6C6E;
margin-bottom: 4%;
}
.header .profiel {
width: 50%;
height: auto;
float: left;
clear: both;
}
.header .profiel .tekst {
width: 40%;
height: auto;
float: left;
margin-left: 5%;
margin-top: 7%;
}
.header .menu {
width: 50%;
height: auto;
margin-top: 3.5%;
text-align: right;
float: left;
}
/* Statistieken */
.stats {
width: 100%;
height: auto;
margin-top: 4%;
}
.stats .stats-oranje {
background: #F26C4F;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-groen {
background-color: #00A652;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-lichtblauw {
background-color: #00BFF3;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-donkerblauw {
background-color: #0072BD;
width: 21.5%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
/* Versie bericht */
.versie-message {
background-color: #2F3543;
width: 98%;
height: auto;
margin-top: 2%;
color: #949494;
padding: 1%;
}
font-family: "Helvetica Neue", Helvetica, "Noto Sans", sans-serif, Arial, sans-serif;
padding: 0px;
margin: 0px;
}
/* Begin sidebar */
.sidebar {
height: 100%;
width: 20%;
background-color: #2F3543;
color: #949494;
float: left;
position: fixed;
}
.sidebar .logo {
width: 90%;
height: auto;
margin: 0px auto;
}
.sidebar .logo img {
width: 100%;
height: auto;
margin-top: 6%;
}
.sidebar .titel {
background-color: #282B34;
width: 90%;
height: auto;
padding: 4%;
padding-left: 5%;
padding-right: 5%;
font-size: #17px;
color: #FFF;
border-top: 1% solid;
border-bottom: 1% solid;
border-color: #212832;
margin-top: 6%;
}
/* sidebar menu */
.sidebar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.sidebar ul li {
width: 100%;
height: auto;
font-size: 15px;
padding: 4%;
padding-left: 5%;
padding-right: 5%;
}
.sidebar ul li:hover {
width: 90%;
background-color: #404759;
}
.sidebar ul .divider {
height: 0.25%;
width: 100%;
background-color: #404759;
}
/* Begin main content */
.container {
width: 70%;
height: auto;
margin-left: 25%;
margin-top: 1%;
position: absolute;
}
/* Header */
.header {
width: 100%;
height: auto;
color: #6C6C6E;
margin-bottom: 4%;
}
.header .profiel {
width: 50%;
height: auto;
float: left;
clear: both;
}
.header .profiel .tekst {
width: 40%;
height: auto;
float: left;
margin-left: 5%;
margin-top: 7%;
}
.header .menu {
width: 50%;
height: auto;
margin-top: 3.5%;
text-align: right;
float: left;
}
/* Statistieken */
.stats {
width: 100%;
height: auto;
margin-top: 4%;
}
.stats .stats-oranje {
background: #F26C4F;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-groen {
background-color: #00A652;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-lichtblauw {
background-color: #00BFF3;
width: 21.5%;
margin-right: 2%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
.stats .stats-donkerblauw {
background-color: #0072BD;
width: 21.5%;
padding: 1%;
padding-top: 2%;
padding-bottom: 2%;
color: #FFF;
float: left;
}
/* Versie bericht */
.versie-message {
background-color: #2F3543;
width: 98%;
height: auto;
margin-top: 2%;
color: #949494;
padding: 1%;
}
Goh... zou het toch niet handig zijn als je aangeeft WAT er niet goed wordt weergegeven, en als je alleen RELEVANTE code plaatst? Wat moeten we hier nu mee? "Er zit ergens een fout en iets wordt niet goed weergegeven." Leg dan aub op z'n minst uit WAT er niet goed wordt weergegeven.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
<li>Home</li>
<div class="divider"></div>
<li>Pagina</li>
<div class="divider"></div>
<li>Menu</li>
<div class="divider"></div>
<li>Nieuws</li>
<div class="divider"></div>
<li>Agenda</li>
<div class="divider"></div>
<li>Portfolio</li>
<div class="divider"></div>
</ul>
<li>Home</li>
<div class="divider"></div>
<li>Pagina</li>
<div class="divider"></div>
<li>Menu</li>
<div class="divider"></div>
<li>Nieuws</li>
<div class="divider"></div>
<li>Agenda</li>
<div class="divider"></div>
<li>Portfolio</li>
<div class="divider"></div>
</ul>
Toevoeging op 05/10/2014 17:04:10:
Waarom inline CSS?
Toevoeging op 05/10/2014 17:06:16:
Wat is dit? <i class="icon-cog">
www.dimitrigeers.nl/cms zou kijken, had je dit geweten.
Maakt verder niet uit, maar scheelt weer een post.
Dat zijn iconen. Als je nou eens op: Maakt verder niet uit, maar scheelt weer een post.
Ik plaats altijd onzin :-) Maar de w3c validator is het wel met me eens:
Je mag geen <div>'s in een <ul> plaatsen!
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dimitrigeers.nl%2Fcms%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Iconen zijn gewoon plaatjes. Images dus. die zet je niet met behulp van een <i> element.
Gewijzigd op 05/10/2014 17:46:17 door Frank Nietbelangrijk
Nu weer even on-topic. Het ging om de inhoud van de div: container.
Die wordt niet goed weergeven.
Dimitri Geers op 05/10/2014 17:51:50:
Ik snap totaal niet wat je bedoelt, maar maakt niet uit. :p
dit mag:
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li>eerste listitem</li>
<li>tweede listitem</li>
<li>derde listitem</li>
</ul>
<li>eerste listitem</li>
<li>tweede listitem</li>
<li>derde listitem</li>
</ul>
dit mag niet:
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li>eerste listitem</li>
<div>hier mag geen div!</div>
<li>derde listitem</li>
</ul>
<li>eerste listitem</li>
<div>hier mag geen div!</div>
<li>derde listitem</li>
</ul>
Toevoeging op 05/10/2014 18:03:03:
Als het jou ook niet uitmaakt dan maakt t mij ook niet uit hoor. Toedeloei
Ik had geen idee hoe ik anders de dividers erin kreeg.
Haal code die NIET word gebruikt overigens weg. Je kiest ervoor om er een div tussen te zetten(overigens erg foute html code) maar houdt de oude code nog op zijn plaats. Dit is in het begin niet erg maar na enkele (grondige )aanpassingen ga je door de bomen het bos niet meer zien.
En over de container: daar gaat inderdaad een hoop mis. Maar hoe het moet zijn is ook niet duidelijk. Moet de menu in de balk staan?
Persoonlijk vind ik het inrichten van zulke pagina erg basic css&html. Niet dat dit erg is maar misschien is het beter dat je gewoonweg html&css tutorials gaat doorlezen of desnoods een boek. Je komt nu namelijk vast te zitten op een punt dat een boek/tutorial (vaak )netjes voor je uitlegt, stap voor stap.
Niet dat het design er van opknapt maar heb je ze wel naast elkaar staan :)
Toevoeging op 06/10/2014 12:13:29:
Als het doel is dat alle 4 blokken naast elkaar komen kun je stats-oranje een clear:left geven.
Niet dat het design er van opknapt maar heb je ze wel naast elkaar staan :)