Hoe krijg divs naast elkaar en onder elkaar
Ik probeer circa 20 foto op een pagina weer te geven met elk eigen tekst eronder.
Ik gebruik hiervoor de volgende code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class="main">
<div class="content">
<p> Schilderijen</p></div>
</div>
<div class="img-with-text">
<img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
<p>nr.261 60 x60</p>
</div>
<div>
<img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
<p>nr.267- 80x80</p>
</div>
</div>
<div class="content">
<p> Schilderijen</p></div>
</div>
<div class="img-with-text">
<img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
<p>nr.261 60 x60</p>
</div>
<div>
<img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
<p>nr.267- 80x80</p>
</div>
</div>
CSS code
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
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
.content {
float: left;
width: 14%;
}
.content P {
padding-left: 40px;
color: yellow;
font-size: small;
padding-right: 15px;
}
.plaatjes {
float: left;
margin-left: 40px;
width: 50%;
}
.foto{
color: #FFFFFF;
margin: 10px;
}
.tekstonder {
display: inline;
text-align: center;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.img-with-text {
display: inline-block;
margin-left: 40px;
text-align: center;
width: 250px;
}
.img-with-text img {
margin: 0 auto;
}
float: left;
width: 14%;
}
.content P {
padding-left: 40px;
color: yellow;
font-size: small;
padding-right: 15px;
}
.plaatjes {
float: left;
margin-left: 40px;
width: 50%;
}
.foto{
color: #FFFFFF;
margin: 10px;
}
.tekstonder {
display: inline;
text-align: center;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.img-with-text {
display: inline-block;
margin-left: 40px;
text-align: center;
width: 250px;
}
.img-with-text img {
margin: 0 auto;
}
En het resultaat is het volgende:
http://jocke-overwater.nl/schilderijen%20copy.php
En Ik zou graag willen dat het zo eruit ziet en met elk eigen tekst eronder:
http://jocke-overwater.nl/schilderijen.php
Alvast bedankt voor het meedenken.
Mohamed nvt op 11/09/2022 22:42:56:
Ook even opletten: de css class img-with-text heb je eerst op de div en vervolgens op de img.
Dat lijkt mij niet de bedoeling ;-)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class="main">
<div class="content">
<p> Schilderijen</p></div>
</div>
<div class="img-with-text">
<img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
<p>nr.261 60 x60</p>
</div>
<div>
<img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
<p>nr.267- 80x80</p>
</div>
</div>
<div class="content">
<p> Schilderijen</p></div>
</div>
<div class="img-with-text">
<img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
<p>nr.261 60 x60</p>
</div>
<div>
<img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
<p>nr.267- 80x80</p>
</div>
</div>
Ook even opletten: de css class img-with-text heb je eerst op de div en vervolgens op de img.
Dat lijkt mij niet de bedoeling ;-)
Gewijzigd op 12/09/2022 12:13:12 door Jan Koehoorn
Ad Fundum op 12/09/2022 09:49:23:
Divs naast elkaar kan met CSS display: inline-block; . Als je meerdere divs naast elkaar wilt hebben kan je gebruik maken van CSS flex-box, dat geeft meer mogelijkheden. En CSS grid is voor als je een soort tabel-achtige opmaakt zoekt.
Ik wil maximaal telkens 2x divs naast elkaar hebben en de volgende divs onder elkaar totdat ik alle plaatjes heb.
Moet ik dan nog steeds gebruik maken van CSS flex-box? Hiermee heb ik geen ervaring nl.
Toevoeging op 12/09/2022 12:31:12:
Jan Koehoorn op 12/09/2022 12:12:47:
Heel scherp! Betreffende class kwam maar een keer voor en ik heb het verwijderd, helaas biedt dat geen oplossing.
Mohamed nvt op 11/09/2022 22:42:56:
Ook even opletten: de css class img-with-text heb je eerst op de div en vervolgens op de img.
Dat lijkt mij niet de bedoeling ;-)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<div class="main">
<div class="content">
<p> Schilderijen</p></div>
</div>
<div class="img-with-text">
<img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
<p>nr.261 60 x60</p>
</div>
<div>
<img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
<p>nr.267- 80x80</p>
</div>
</div>
<div class="content">
<p> Schilderijen</p></div>
</div>
<div class="img-with-text">
<img src="Inc\img\Schilderijen\nr.261 60 x60.jpg" alt="">
<p>nr.261 60 x60</p>
</div>
<div>
<img class="img-with-text" src="Inc\img\Schilderijen\nr.267- 80x80.jpg" alt="">
<p>nr.267- 80x80</p>
</div>
</div>
Ook even opletten: de css class img-with-text heb je eerst op de div en vervolgens op de img.
Dat lijkt mij niet de bedoeling ;-)
Heel scherp! Betreffende class kwam maar een keer voor en ik heb het verwijderd, helaas biedt dat geen oplossing.
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
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
<html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
</div>
</div>
</body>
</html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
</div>
</div>
</body>
</html>
Jan Koehoorn op 12/09/2022 13:31:26:
Een voorbeeld met CSS grid:
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
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
<html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
</div>
</div>
</body>
</html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
<div class="grid-item"><img src="https://via.placeholder.com/150"></div>
</div>
</div>
</body>
</html>
Dankjewel voor dit voorbeeld en met gewone CSS lukt dit mij ook wel, daar het voorbeeld: http://jocke-overwater.nl/schilderijen.php
Vervolgens wil ik onder elk plaatje wat tekst hebben.
Hoe krijg ik dat nu voor elkaar met Grid?
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
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
<html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.caption {
font-size: 0.6rem;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 1</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 2</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 3</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 4</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 5</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 6</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 7</div>
</div>
</div>
</div>
</body>
</html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.caption {
font-size: 0.6rem;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 1</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 2</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 3</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 4</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 5</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 6</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 7</div>
</div>
</div>
</div>
</body>
</html>
Jan Koehoorn op 12/09/2022 14:13:03:
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
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
<html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.caption {
font-size: 0.6rem;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 1</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 2</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 3</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 4</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 5</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 6</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 7</div>
</div>
</div>
</div>
</body>
</html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.caption {
font-size: 0.6rem;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 1</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 2</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 3</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 4</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 5</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 6</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 7</div>
</div>
</div>
</div>
</body>
</html>
Helemaal TOP en erg bedankt!
Heeft class="grid-item" een specifieke functie?
Ozzie PHP op 12/09/2022 15:43:21:
@Jan Koehoorn
Heeft class="grid-item" een specifieke functie?
Heeft class="grid-item" een specifieke functie?
Nee, da's gewoonte. In de dagelijkse praktijk komt het vaak voor dat ik nog iets met die grid-items moet, vandaar ;-)
Mohamed nvt op 12/09/2022 12:28:45:
Moet ik dan nog steeds gebruik maken van CSS flex-box? Hiermee heb ik geen ervaring nl.
Van mij moet je helemaal niets, ik geef je alleen maar een idee hoe je iets zou kunnen doen. Het maakt mij ook niet uit of je dat doet met display-inline, flex, grid, floats, of met wat dan ook. Overigens, grid is zelfs lastiger dan flex, maar je hebt altijd mensen die dat soort dingen voor je willen uitwerken.
Jan Koehoorn op 12/09/2022 20:24:58:
Nee, da's gewoonte. In de dagelijkse praktijk komt het vaak voor dat ik nog iets met die grid-items moet, vandaar ;-)
Ozzie PHP op 12/09/2022 15:43:21:
@Jan Koehoorn
Heeft class="grid-item" een specifieke functie?
Heeft class="grid-item" een specifieke functie?
Nee, da's gewoonte. In de dagelijkse praktijk komt het vaak voor dat ik nog iets met die grid-items moet, vandaar ;-)
Lijkt me een vreemde gewoonte. Je gaat tig elementen een class meegeven waarmee niks wordt gedaan. Er staat gewoon een container class omheen, dus als je er wel iets mee wil doen gaat dat simpel via:
.grid-container > div
Wat je nu doet, lijkt me nogal overkill. Geen handige gewoonte dus ;-)
Jan Koehoorn op 12/09/2022 14:13:03:
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
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
<html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.caption {
font-size: 0.6rem;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 1</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 2</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 3</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 4</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 5</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 6</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 7</div>
</div>
</div>
</div>
</body>
</html>
<head>
<style>
html, body {
font: 14px Verdana;
}
.container {
margin: 0 auto;
max-width: 320px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.caption {
font-size: 0.6rem;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 1</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 2</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 3</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 4</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 5</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 6</div>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/150">
<div class="caption">Tekst bij afbeelding 7</div>
</div>
</div>
</div>
</body>
</html>
Jouw oplossing heb ik nu geïntegreerd in mijn verdere CSS-bestand, helaas werkt het nog niet zoals ik het wil.
Er is te veel ruimte tussen de plaatjes
De tekst onder de plaatjes komt niet helemaal onder, maar steekt naar rechterkant.
URL: http://jocke-overwater.nl/schilderijen.php
Graag jullie advies!
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
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
* {
padding: 0;
margin: 0;
}
.wrapper {
margin: 0 auto;
padding: 0%;
width: 70%;
min-width: 640px;
background-color: black;
border-radius: 0px 0px 5px 5px;
}
.header {
height: 150px;
}
.logo {
float: left;
width: 40%;
}
.logo img {
margin-top: 50px;
padding-left: 35px;
}
.headertekst {
float: right;
width: 20%;
margin-top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2dad6;
}
.active {
background-color: #d2dad6;
text-decoration: underline;
}
.headermenu {
padding-top: 72px;
}
.main {
clear: both;
}
.content {
}
.content P {
padding-left: 40px;
color: yellow;
font-size: small;
padding-right: 15px;
}
.plaatjes {
width: 50%;
max-width: 640px;
margin: 0 auto;
}
.foto {
color: #FFFFFF;
margin: 10px;
}
.tekstonder {
display: inline;
text-align: center;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
align-items: center;
justify-items: center;
}
.caption {
font: 0.6rem Verdana;
text-align: center;
padding-top: 8px;
color: #FFFFFF;
}
p, ul li {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.p_exposities {
font-family: Arial, Helvetica, sans-serif;
padding-left: 40px;
}
.overjockepagina {
padding-left: 40px;
font-size: small;
padding-right: 15px;
}
h2, h4 {
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.jockel {
float: right;
width: 50%;
}
.jocker {
float: left;
width: 30%;
}
.jocker p {
color: #FFFFFF;
}
.formulier {
padding-left: 40px;
font-family: Arial, Helvetica, sans-serif;
}
span {
color: red;
font-family: Arial, Helvetica, sans-serif;
}
form {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
textarea {
resize: none;
}
.footer {
clear: both;
}
.footer p {
text-align: center;
}
padding: 0;
margin: 0;
}
.wrapper {
margin: 0 auto;
padding: 0%;
width: 70%;
min-width: 640px;
background-color: black;
border-radius: 0px 0px 5px 5px;
}
.header {
height: 150px;
}
.logo {
float: left;
width: 40%;
}
.logo img {
margin-top: 50px;
padding-left: 35px;
}
.headertekst {
float: right;
width: 20%;
margin-top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #d2dad6;
}
.active {
background-color: #d2dad6;
text-decoration: underline;
}
.headermenu {
padding-top: 72px;
}
.main {
clear: both;
}
.content {
}
.content P {
padding-left: 40px;
color: yellow;
font-size: small;
padding-right: 15px;
}
.plaatjes {
width: 50%;
max-width: 640px;
margin: 0 auto;
}
.foto {
color: #FFFFFF;
margin: 10px;
}
.tekstonder {
display: inline;
text-align: center;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
align-items: center;
justify-items: center;
}
.caption {
font: 0.6rem Verdana;
text-align: center;
padding-top: 8px;
color: #FFFFFF;
}
p, ul li {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}
.p_exposities {
font-family: Arial, Helvetica, sans-serif;
padding-left: 40px;
}
.overjockepagina {
padding-left: 40px;
font-size: small;
padding-right: 15px;
}
h2, h4 {
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.jockel {
float: right;
width: 50%;
}
.jocker {
float: left;
width: 30%;
}
.jocker p {
color: #FFFFFF;
}
.formulier {
padding-left: 40px;
font-family: Arial, Helvetica, sans-serif;
}
span {
color: red;
font-family: Arial, Helvetica, sans-serif;
}
form {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
textarea {
resize: none;
}
.footer {
clear: both;
}
.footer p {
text-align: center;
}
En in je grid-container doe je dan dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
...
<div class="grid-item">
<img class="foto" src="./jocke_files/300.jpg">
<div class="caption">Caption-tekst 1</div>
</div>
<div class="grid-item">
<img class="foto" src="./jocke_files/Afbeelding 001.jpg">
<div class="caption">Caption-tekst 2</div>
</div>
...
<div class="grid-item">
<img class="foto" src="./jocke_files/300.jpg">
<div class="caption">Caption-tekst 1</div>
</div>
<div class="grid-item">
<img class="foto" src="./jocke_files/Afbeelding 001.jpg">
<div class="caption">Caption-tekst 2</div>
</div>
...
Gewijzigd op 13/09/2022 03:13:30 door Jan Koehoorn
Jan Koehoorn op 13/09/2022 03:12:39:
Ik heb je main.css even aangepast, zodat je de verschillen kunt zien. De reden dat je captions niet leken te centreren, was dat je grid te breed was en dat de afbeeldingen en de captions niet centreerden in hun eigen grid-items.
Ik heb de verschillen idd gezien.
Jouw aanpassingen heb ik doorgevoerd, initieel voor het pagina schilderijen.php en ik zie dat één probleem is opgelost en het andere niet.
De tekst onder de plaatjes krijg ik nu wel direct eronder, de ruimte tussen de plaatjes is te groot.
Verder zie ik dat je de float: left optie bij de class plaatjes heb verwijderd? Waarom eigenlijk? Bij elk pagina, heb ik te maken met een stukje tekst en plaatjes. En met float: left zorg ik voor dat plaatjes aan de linkerkant van de tekst verschijnen.
Verder vraag ik mij af of ik nu de float moet veranderen door de grid? Loopt nu alles door elkaar heen, heb ik het gevoel.
Ik ga natuurlijk niet je hele design opnieuw voor je doen. Tegenwoordig is een float bijna nooit meer nodig en kun je elke layout realiseren met CSS Grid en FlexBox. Ik adviseer iedereen die met front-end bezig is om er serieus studie van te maken.
Jan Koehoorn op 14/09/2022 16:04:48:
Niks te danken hoor, graag gedaan ;-)
Ik ga natuurlijk niet je hele design opnieuw voor je doen. Tegenwoordig is een float bijna nooit meer nodig en kun je elke layout realiseren met CSS Grid en FlexBox. Ik adviseer iedereen die met front-end bezig is om er serieus studie van te maken.
Ik ga natuurlijk niet je hele design opnieuw voor je doen. Tegenwoordig is een float bijna nooit meer nodig en kun je elke layout realiseren met CSS Grid en FlexBox. Ik adviseer iedereen die met front-end bezig is om er serieus studie van te maken.
Jij hebt mij genoeg geholpen hoor, Tnx!