kolommen onder elkaar op mobile device
Zodra ik echter een van deze woorden voorzie van een link dan werkt dit niet meer. in de code zie je bij boerenzwaluw een woord zonder link, daarboven zijn de woorden voorzien van een link. hieronder de Css style
en html. Wie weet hier een oplossing voor?
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Vogelalfabet</title>
<meta name="Vogelfoto's A tot en met Z" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
a:link {
text-decoration: none;
}
/* unvisited link */
a:link {
color: white;
}
/* visited link */
a:visited {
color: white;
}
a:visited {
text-decoration: none;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #666666;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #666666;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #666666;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #666666;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
}
</style>
</head>
<body style=" background-color: #999999;"> <br>
<div class="header">
<h2 style="background-color: rgb(102, 102, 102); text-align: center;"><span
style="font-family: Gentium Book Basic;">Houjesnavel</span></h2>
</div>
<div class="row">
<div class="col-3">
<div style="text-align: center;">
<p><span style="color: #e0e0e0;">A </span></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Aalscholver/Aalscholver.html" title="Aalscholver"><span style="color: #e0e0e0;">Aalscholver</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Alk/Alk.html" title="Alk"><span style="color: #e0e0e0;">Alk</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Appelvink/Appelvink.html" title="Appelvink"><span style="color: #e0e0e0;">Appelvink</span></a></p>
</div>
<p> </p>
<p> </p>
<div style="text-align: center;">
<p><span style="color: #e0e0e0;">B</span></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Bergeend/Bergeend.html" title="Bergeend"><span style="color: #e0e0e0;">Bergeend</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Blauwborst/Blauwborst.html"><span style="color: #e0e0e0;">Blauwborst</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="file:///D:/Nieuwe%20website/Alle%20bestanden/Website2025/Blauwe%20kiekendief/Blauwe%20kiekendief.html"><span
style="color: #e0e0e0;">Blauwe kiekendief</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Blauwe%20kiekendief/Blauwe%20kiekendief.html"><span style="color: #e0e0e0;">Blauwe
reiger</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><span style="color: #e0e0e0;">Boerenzwaluw</span></p>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Vogelalfabet</title>
<meta name="Vogelfoto's A tot en met Z" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
a:link {
text-decoration: none;
}
/* unvisited link */
a:link {
color: white;
}
/* visited link */
a:visited {
color: white;
}
a:visited {
text-decoration: none;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #666666;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #666666;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #666666;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #666666;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
}
</style>
</head>
<body style=" background-color: #999999;"> <br>
<div class="header">
<h2 style="background-color: rgb(102, 102, 102); text-align: center;"><span
style="font-family: Gentium Book Basic;">Houjesnavel</span></h2>
</div>
<div class="row">
<div class="col-3">
<div style="text-align: center;">
<p><span style="color: #e0e0e0;">A </span></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Aalscholver/Aalscholver.html" title="Aalscholver"><span style="color: #e0e0e0;">Aalscholver</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Alk/Alk.html" title="Alk"><span style="color: #e0e0e0;">Alk</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Appelvink/Appelvink.html" title="Appelvink"><span style="color: #e0e0e0;">Appelvink</span></a></p>
</div>
<p> </p>
<p> </p>
<div style="text-align: center;">
<p><span style="color: #e0e0e0;">B</span></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Bergeend/Bergeend.html" title="Bergeend"><span style="color: #e0e0e0;">Bergeend</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Blauwborst/Blauwborst.html"><span style="color: #e0e0e0;">Blauwborst</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="file:///D:/Nieuwe%20website/Alle%20bestanden/Website2025/Blauwe%20kiekendief/Blauwe%20kiekendief.html"><span
style="color: #e0e0e0;">Blauwe kiekendief</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><a href="Blauwe%20kiekendief/Blauwe%20kiekendief.html"><span style="color: #e0e0e0;">Blauwe
reiger</span></a></p>
</div>
<p> </p>
<div style="text-align: center;">
<p><span style="color: #e0e0e0;">Boerenzwaluw</span></p>
Toevoeging op 17/01/2025 14:09:17:
Mijn fout; ik had niet alleen links toegevoegd maar ook de meta name gewijzigd; was viewport en dat moet natuurlijk blijven staan zo weet ik nu. Ik weet even niet hoe ik dit topic kan verwijderen.
Gewijzigd op 18/01/2025 10:56:46 door - Ariën -
file:///D:/Nieuwe%20website/Alle%20bestanden/Website2025/Blauwe%20kiekendief/Blauwe%20kiekendief.html
Misschien via JSfiddle bijvoorbeeld?
ik had vanmiddag al een reactie bij het bericht geplaatst namelijk: in de meta name had ik 'viewport' verwijderd. Dom maar dat was de oorzaak. De link heb ik inmiddels aangepast en die werkt nu. Bedankt voor jullie reacties.
Fijn dat het opgelost is. Het topic wordt overigens niet verwijderd omdat het forum ook een kennisbank is.