Groeperen van items
;-)
Hieronder de HTML. Ik heb wel wat diersoorten eruit gehaald, want een enorme bulk HTML code op de zondag ochtend wil ik jullie niet aan doen :-)
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<html>
<head>
<title>Alle Dieren</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
text-align:center;
background-color: #EEEEEE;
font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
}
.container{
width:1023px;
margin: auto;
background-color:white;
font-family:Helvetica,arial;
font-weight: normal;
}
div.item2 {
width: 1000px;
display: inline-block;
margin: auto;
background-color: white;
font-size: 22px;
}
div.item{
font-size: 13px;
width: 300px;
height: 200px;
margin: 20px;
float: left;
}
img{
border-radius: 3%;
}
a{
text-decoration:none;
color: inherit;
}
@media only screen and (max-width: 70em) {
.container{
width: 98%;
}
div.item2{
width: 95%;
}
}
</style>
</head>
<body>
<section class='container'>
<div class='item2'>
<br>
Aholeholes
<hr>
</div>
<div class='item'>
<a href='images_normal/262.jpg'><img src='images/262.jpg' ></a><br>
<b>Strange-tailed flagtail</b><br>
</div></a><div class='item2'>
<br>
Wrasses
<hr>
</div>
<div class='item'>
<a href='images_normal/6.jpg'><img src='images/6.jpg' ></a><br>
<b>Scale-rayed wrasse</b><br>
</div></a>
<div class='item'>
<a href='images_normal/571.jpg'><img src='images/571.jpg' ></a><br>
<b>Klunzinger's wrasse</b><br>
</div></a>
<div class='item'>
<a href='images_normal/590.jpg'><img src='images/590.jpg' ></a><br>
<b>Pearly razorfish</b><br>
</div></a></section>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<html>
<head>
<title>Alle Dieren</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
text-align:center;
background-color: #EEEEEE;
font-family: font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;;
}
.container{
width:1023px;
margin: auto;
background-color:white;
font-family:Helvetica,arial;
font-weight: normal;
}
div.item2 {
width: 1000px;
display: inline-block;
margin: auto;
background-color: white;
font-size: 22px;
}
div.item{
font-size: 13px;
width: 300px;
height: 200px;
margin: 20px;
float: left;
}
img{
border-radius: 3%;
}
a{
text-decoration:none;
color: inherit;
}
@media only screen and (max-width: 70em) {
.container{
width: 98%;
}
div.item2{
width: 95%;
}
}
</style>
</head>
<body>
<section class='container'>
<div class='item2'>
<br>
Aholeholes
<hr>
</div>
<div class='item'>
<a href='images_normal/262.jpg'><img src='images/262.jpg' ></a><br>
<b>Strange-tailed flagtail</b><br>
</div></a><div class='item2'>
<br>
Wrasses
<hr>
</div>
<div class='item'>
<a href='images_normal/6.jpg'><img src='images/6.jpg' ></a><br>
<b>Scale-rayed wrasse</b><br>
</div></a>
<div class='item'>
<a href='images_normal/571.jpg'><img src='images/571.jpg' ></a><br>
<b>Klunzinger's wrasse</b><br>
</div></a>
<div class='item'>
<a href='images_normal/590.jpg'><img src='images/590.jpg' ></a><br>
<b>Pearly razorfish</b><br>
</div></a></section>
</body>
</html>
Als ik zelf probeer te analyseren wat er mis gaat; de section sluit wel keurig na het laatste item, dus je zou verwachten dat de plaatjes worden ingesloten. Maar dat gebeurt dus niet. Wellicht heeft het iets met de hoogte (height) in .container te maken? Ik heb daar wel mee gespeeld, maar geen resultaat.
Voor de volledigheid ook nog even gevisualiseerd:
Ben benieuwd!
Groet,
Johan
<div class='item'><a ...></div></a>
Een inline element (de <a> tag) kan ook nooit een block level element (de <div> tag) omvatten.
En dan nog een CSS-sidenote:
Code (php)
1
2
3
4
5
2
3
4
5
<div class='item2'>
<br>
Aholeholes
<hr>
</div>
<br>
Aholeholes
<hr>
</div>
Die <br> en <hr> zijn niet nodig, die zou je respectievelijk kunnen vervangen door een marge aan de bovenkant en een border aan de onderkant. Ook zou het wellicht beter zijn als je hier headers (of een ander semantisch equivalent element) voor gebruikt zodat het document een betere hiërarchische opbouw heeft.
Gewijzigd op 17/05/2020 12:54:37 door Thomas van den Heuvel
Dank voor je hulp weer! Ik heb bovenstaande tips doorgevoerd en ik moet zeggen, het ziet er allemaal weer beter uit. Alleen de headers moet ik nog even induiken.
Helaas is het probleem in mijn post hier niet mee opgelost. Dus wat dat betreft staat mijn vraag nog wel open.
Groet,
Johan
Elke sectie is een nieuw diersoort en elk item is een dier uit een groep dieren (soort). Dan zou je er nu mee weg moeten komen lijkt mij :).
Tip van de dag; kijk je code eens door om te zien of er niet items dubbel of op een verkeerde plek staan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<section class="container">
<header>
<h2>Diersoort</h2>
</header>
<div class="item">
<a href="">
<img src="">
<b>Dier 1</b>
</a>
</div>
</section>
<header>
<h2>Diersoort</h2>
</header>
<div class="item">
<a href="">
<img src="">
<b>Dier 1</b>
</a>
</div>
</section>
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
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
.container {
width:1023px;
min-height: 200px;
margin: 0px auto;
overflow: hidden;
background: #FFFFFF;
}
.container header {
width: 999px;
height: 60px;
float: left;
margin: 0px 12px;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #000000;
}
div.item {
width: 300px;
height: 200px;
margin: 20px;
float: left;
display: inline-block;
font-size: 13px;
background-color: #00FF00;
}
width:1023px;
min-height: 200px;
margin: 0px auto;
overflow: hidden;
background: #FFFFFF;
}
.container header {
width: 999px;
height: 60px;
float: left;
margin: 0px 12px;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #000000;
}
div.item {
width: 300px;
height: 200px;
margin: 20px;
float: left;
display: inline-block;
font-size: 13px;
background-color: #00FF00;
}
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
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
<?php
$animals = [
['species' => 'beer', 'name' => 'Allistair'],
['species' => 'beer', 'name' => 'Amos'],
['species' => 'beer', 'name' => 'Anthony'],
['species' => 'beer', 'name' => 'Armando'],
['species' => 'beer', 'name' => 'Colt'],
['species' => 'beer', 'name' => 'Deirdre'],
['species' => 'beer', 'name' => 'Griffin'],
['species' => 'beer', 'name' => 'Ian'],
['species' => 'beer', 'name' => 'Jelani'],
['species' => 'beer', 'name' => 'Jesse'],
['species' => 'beer', 'name' => 'Quamar'],
['species' => 'beer', 'name' => 'Quinn'],
['species' => 'beer', 'name' => 'Sage'],
['species' => 'dolfijn', 'name' => 'Alexander'],
['species' => 'dolfijn', 'name' => 'Chaim'],
['species' => 'dolfijn', 'name' => 'Colette'],
['species' => 'dolfijn', 'name' => 'Hayfa'],
['species' => 'dolfijn', 'name' => 'Ifeoma'],
['species' => 'dolfijn', 'name' => 'Maris'],
['species' => 'dolfijn', 'name' => 'Marny'],
['species' => 'dolfijn', 'name' => 'Oren'],
['species' => 'dolfijn', 'name' => 'Orson'],
['species' => 'dolfijn', 'name' => 'Preston'],
['species' => 'dolfijn', 'name' => 'Sara'],
['species' => 'dolfijn', 'name' => 'September'],
['species' => 'dolfijn', 'name' => 'Summer'],
['species' => 'giraf', 'name' => 'Chanda'],
['species' => 'giraf', 'name' => 'Malik'],
['species' => 'giraf', 'name' => 'Nell'],
['species' => 'krokodil', 'name' => 'Aidan'],
['species' => 'krokodil', 'name' => 'Alexander'],
['species' => 'krokodil', 'name' => 'Arden'],
['species' => 'krokodil', 'name' => 'Ashton'],
['species' => 'krokodil', 'name' => 'Ethan'],
['species' => 'krokodil', 'name' => 'Seth'],
['species' => 'leeuw', 'name' => 'Abra'],
['species' => 'leeuw', 'name' => 'Armand'],
['species' => 'leeuw', 'name' => 'Bethany'],
['species' => 'leeuw', 'name' => 'Damon'],
['species' => 'leeuw', 'name' => 'Darrel'],
['species' => 'leeuw', 'name' => 'Dora'],
['species' => 'leeuw', 'name' => 'Drew'],
['species' => 'leeuw', 'name' => 'Grace'],
['species' => 'leeuw', 'name' => 'Igor'],
['species' => 'leeuw', 'name' => 'Isabelle'],
['species' => 'leeuw', 'name' => 'Nayda'],
['species' => 'leeuw', 'name' => 'Sarah'],
['species' => 'leeuw', 'name' => 'Talon'],
['species' => 'olifant', 'name' => 'David'],
['species' => 'olifant', 'name' => 'Irene'],
['species' => 'olifant', 'name' => 'Josiah'],
['species' => 'olifant', 'name' => 'Kasimir'],
['species' => 'olifant', 'name' => 'Melvin'],
['species' => 'olifant', 'name' => 'Nina'],
['species' => 'olifant', 'name' => 'Rhea'],
['species' => 'olifant', 'name' => 'Sharon'],
['species' => 'olifant', 'name' => 'Vivien'],
['species' => 'olifant', 'name' => 'Zephr'],
['species' => 'slang', 'name' => 'Britanni'],
['species' => 'slang', 'name' => 'Byron'],
['species' => 'slang', 'name' => 'Camden'],
['species' => 'slang', 'name' => 'Catherine'],
['species' => 'slang', 'name' => 'Grant'],
['species' => 'slang', 'name' => 'Inez'],
['species' => 'slang', 'name' => 'Kyla'],
['species' => 'slang', 'name' => 'Lael'],
['species' => 'tijger', 'name' => 'Beck'],
['species' => 'tijger', 'name' => 'Brittany'],
['species' => 'tijger', 'name' => 'Caldwell'],
['species' => 'tijger', 'name' => 'Denise'],
['species' => 'tijger', 'name' => 'Eleanor'],
['species' => 'tijger', 'name' => 'Ivan'],
['species' => 'tijger', 'name' => 'Miriam'],
['species' => 'tijger', 'name' => 'Simon'],
['species' => 'tijger', 'name' => 'Winifred'],
['species' => 'vis', 'name' => 'Azalia'],
['species' => 'vis', 'name' => 'Bo'],
['species' => 'vis', 'name' => 'Brielle'],
['species' => 'vis', 'name' => 'Catherine'],
['species' => 'vis', 'name' => 'Gail'],
['species' => 'vis', 'name' => 'Jamal'],
['species' => 'vis', 'name' => 'Marshall'],
['species' => 'vis', 'name' => 'Nayda'],
['species' => 'vis', 'name' => 'Savannah'],
['species' => 'vis', 'name' => 'Shana'],
['species' => 'vis', 'name' => 'Shea'],
['species' => 'vis', 'name' => 'Solomon'],
['species' => 'vis', 'name' => 'Wynne'],
['species' => 'zebra', 'name' => 'Genevieve'],
['species' => 'zebra', 'name' => 'Gregory'],
['species' => 'zebra', 'name' => 'Irma'],
['species' => 'zebra', 'name' => 'Kennan'],
['species' => 'zebra', 'name' => 'Kessie'],
['species' => 'zebra', 'name' => 'Kevyn'],
['species' => 'zebra', 'name' => 'Minerva'],
['species' => 'zebra', 'name' => 'Simon'],
['species' => 'zebra', 'name' => 'Sloane'],
['species' => 'zebra', 'name' => 'Tiger'],
['species' => 'zebra', 'name' => 'Tyrone'],
['species' => 'zebra', 'name' => 'Willa'],
];
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPHulp</title>
<style>
.grid__container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 10px; padding: 40px; border: 1px solid #ccc; border-radius: 10px;}
.grid__item { border: 1px solid tomato; border-radius: 5px; padding: 20px; }
</style>
</head>
<body>
<?php $species_prev = null;?>
<?php foreach ($animals as $animal): ?>
<?php if ($species_prev !== $animal['species']): ?>
<?php if ($species_prev): ?>
</div>
<?php endif;?>
<div class="grid__container">
<?php $species_prev = $animal['species'];?>
<?php endif;?>
<div class="grid__item">
<?=$animal['species'];?>
<?=$animal['name'];?>
</div>
<?php endforeach;?>
</div>
</body>
</html>
$animals = [
['species' => 'beer', 'name' => 'Allistair'],
['species' => 'beer', 'name' => 'Amos'],
['species' => 'beer', 'name' => 'Anthony'],
['species' => 'beer', 'name' => 'Armando'],
['species' => 'beer', 'name' => 'Colt'],
['species' => 'beer', 'name' => 'Deirdre'],
['species' => 'beer', 'name' => 'Griffin'],
['species' => 'beer', 'name' => 'Ian'],
['species' => 'beer', 'name' => 'Jelani'],
['species' => 'beer', 'name' => 'Jesse'],
['species' => 'beer', 'name' => 'Quamar'],
['species' => 'beer', 'name' => 'Quinn'],
['species' => 'beer', 'name' => 'Sage'],
['species' => 'dolfijn', 'name' => 'Alexander'],
['species' => 'dolfijn', 'name' => 'Chaim'],
['species' => 'dolfijn', 'name' => 'Colette'],
['species' => 'dolfijn', 'name' => 'Hayfa'],
['species' => 'dolfijn', 'name' => 'Ifeoma'],
['species' => 'dolfijn', 'name' => 'Maris'],
['species' => 'dolfijn', 'name' => 'Marny'],
['species' => 'dolfijn', 'name' => 'Oren'],
['species' => 'dolfijn', 'name' => 'Orson'],
['species' => 'dolfijn', 'name' => 'Preston'],
['species' => 'dolfijn', 'name' => 'Sara'],
['species' => 'dolfijn', 'name' => 'September'],
['species' => 'dolfijn', 'name' => 'Summer'],
['species' => 'giraf', 'name' => 'Chanda'],
['species' => 'giraf', 'name' => 'Malik'],
['species' => 'giraf', 'name' => 'Nell'],
['species' => 'krokodil', 'name' => 'Aidan'],
['species' => 'krokodil', 'name' => 'Alexander'],
['species' => 'krokodil', 'name' => 'Arden'],
['species' => 'krokodil', 'name' => 'Ashton'],
['species' => 'krokodil', 'name' => 'Ethan'],
['species' => 'krokodil', 'name' => 'Seth'],
['species' => 'leeuw', 'name' => 'Abra'],
['species' => 'leeuw', 'name' => 'Armand'],
['species' => 'leeuw', 'name' => 'Bethany'],
['species' => 'leeuw', 'name' => 'Damon'],
['species' => 'leeuw', 'name' => 'Darrel'],
['species' => 'leeuw', 'name' => 'Dora'],
['species' => 'leeuw', 'name' => 'Drew'],
['species' => 'leeuw', 'name' => 'Grace'],
['species' => 'leeuw', 'name' => 'Igor'],
['species' => 'leeuw', 'name' => 'Isabelle'],
['species' => 'leeuw', 'name' => 'Nayda'],
['species' => 'leeuw', 'name' => 'Sarah'],
['species' => 'leeuw', 'name' => 'Talon'],
['species' => 'olifant', 'name' => 'David'],
['species' => 'olifant', 'name' => 'Irene'],
['species' => 'olifant', 'name' => 'Josiah'],
['species' => 'olifant', 'name' => 'Kasimir'],
['species' => 'olifant', 'name' => 'Melvin'],
['species' => 'olifant', 'name' => 'Nina'],
['species' => 'olifant', 'name' => 'Rhea'],
['species' => 'olifant', 'name' => 'Sharon'],
['species' => 'olifant', 'name' => 'Vivien'],
['species' => 'olifant', 'name' => 'Zephr'],
['species' => 'slang', 'name' => 'Britanni'],
['species' => 'slang', 'name' => 'Byron'],
['species' => 'slang', 'name' => 'Camden'],
['species' => 'slang', 'name' => 'Catherine'],
['species' => 'slang', 'name' => 'Grant'],
['species' => 'slang', 'name' => 'Inez'],
['species' => 'slang', 'name' => 'Kyla'],
['species' => 'slang', 'name' => 'Lael'],
['species' => 'tijger', 'name' => 'Beck'],
['species' => 'tijger', 'name' => 'Brittany'],
['species' => 'tijger', 'name' => 'Caldwell'],
['species' => 'tijger', 'name' => 'Denise'],
['species' => 'tijger', 'name' => 'Eleanor'],
['species' => 'tijger', 'name' => 'Ivan'],
['species' => 'tijger', 'name' => 'Miriam'],
['species' => 'tijger', 'name' => 'Simon'],
['species' => 'tijger', 'name' => 'Winifred'],
['species' => 'vis', 'name' => 'Azalia'],
['species' => 'vis', 'name' => 'Bo'],
['species' => 'vis', 'name' => 'Brielle'],
['species' => 'vis', 'name' => 'Catherine'],
['species' => 'vis', 'name' => 'Gail'],
['species' => 'vis', 'name' => 'Jamal'],
['species' => 'vis', 'name' => 'Marshall'],
['species' => 'vis', 'name' => 'Nayda'],
['species' => 'vis', 'name' => 'Savannah'],
['species' => 'vis', 'name' => 'Shana'],
['species' => 'vis', 'name' => 'Shea'],
['species' => 'vis', 'name' => 'Solomon'],
['species' => 'vis', 'name' => 'Wynne'],
['species' => 'zebra', 'name' => 'Genevieve'],
['species' => 'zebra', 'name' => 'Gregory'],
['species' => 'zebra', 'name' => 'Irma'],
['species' => 'zebra', 'name' => 'Kennan'],
['species' => 'zebra', 'name' => 'Kessie'],
['species' => 'zebra', 'name' => 'Kevyn'],
['species' => 'zebra', 'name' => 'Minerva'],
['species' => 'zebra', 'name' => 'Simon'],
['species' => 'zebra', 'name' => 'Sloane'],
['species' => 'zebra', 'name' => 'Tiger'],
['species' => 'zebra', 'name' => 'Tyrone'],
['species' => 'zebra', 'name' => 'Willa'],
];
?>
<!DOCTYPE html>
<html>
<head>
<title>PHPHulp</title>
<style>
.grid__container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; margin: 10px; padding: 40px; border: 1px solid #ccc; border-radius: 10px;}
.grid__item { border: 1px solid tomato; border-radius: 5px; padding: 20px; }
</style>
</head>
<body>
<?php $species_prev = null;?>
<?php foreach ($animals as $animal): ?>
<?php if ($species_prev !== $animal['species']): ?>
<?php if ($species_prev): ?>
</div>
<?php endif;?>
<div class="grid__container">
<?php $species_prev = $animal['species'];?>
<?php endif;?>
<div class="grid__item">
<?=$animal['species'];?>
<?=$animal['name'];?>
</div>
<?php endforeach;?>
</div>
</body>
</html>
Dank weer voor het meedenken en ook voorde code!
@Milo, jouw code werkt erg prettig, ik heb het toegepast en het probleem is opgelost. Enige nadeel is wel dat de bottom-border nu niet meer centreert, omdat float: left;. Is daar nog een nette oplossing voor te bedenken ipv een nieuwe <div> creeeren?
@Jan, ik ben nog een beginner in PHP, dus ik heb je code nog niet helemaal begrepen. Maar het lijkt erop dat $animals statisch is en vooraf ingegeven moet worden? Dit is niet echt handig, omdat de content dynamisch is. Maargoed,wellicht begrijp ik de code niet goed.
@alle lezers, mochten jullie een soortgelijk probleem hebben, ik heb deze vraag ook op een HTML forum geplaatst (aangezien hier de focus toch een beetje op PHP moet blijven). Het probleem zit hem in de 'clearing space' :
https://web.archive.org/web/20160524140725/http://css-discuss.incutio.com/wiki/Clearing_Space
Groet,
Johan
Johan Steel op 19/05/2020 21:51:55:
@Jan, ik ben nog een beginner in PHP, dus ik heb je code nog niet helemaal begrepen. Maar het lijkt erop dat $animals statisch is en vooraf ingegeven moet worden? Dit is niet echt handig, omdat de content dynamisch is. Maargoed,wellicht begrijp ik de code niet goed.
In mijn voorbeeld doe ik het statisch, maar je moet mijn voorbeeld natuurlijk niet letterlijk overnemen. Het werkt op elke associatieve array die je erin stopt. Wat verder belangrijk is: mijn voorbeeld werkt niet met floats. Dat is namelijk tegenwoordig niet meer echt nodig.
Maar goed, als je meer wilt weten over het clearen van een float, verwijs ik je graag naar CSS tricks:
https://css-tricks.com/snippets/css/clear-fix/