Hoe krijg divs naast elkaar en onder elkaar

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mohamed nvt

Mohamed nvt

11/09/2022 22:42:56
Quote Anchor link
Ik ben bezig met het volgende:

Ik probeer circa 20 foto op een pagina weer te geven met elk eigen tekst eronder.
Ik gebruik hiervoor de volgende code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

CSS code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
.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;
  }

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.
 
PHP hulp

PHP hulp

01/11/2024 00:51:52
 

12/09/2022 09:49:23
Quote Anchor link
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.
 
Jan Koehoorn

Jan Koehoorn

12/09/2022 12:12:47
Quote Anchor link
Mohamed nvt op 11/09/2022 22:42:56:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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
 
Mohamed nvt

Mohamed nvt

12/09/2022 12:28:45
Quote Anchor link
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:
Mohamed nvt op 11/09/2022 22:42:56:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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.
 
Jan Koehoorn

Jan Koehoorn

12/09/2022 13:31:26
Quote Anchor link
Een voorbeeld met CSS grid:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
Mohamed nvt

Mohamed nvt

12/09/2022 14:00:30
Quote Anchor link
Jan Koehoorn op 12/09/2022 13:31:26:
Een voorbeeld met CSS grid:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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?
 
Jan Koehoorn

Jan Koehoorn

12/09/2022 14:13:03
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
Mohamed nvt

Mohamed nvt

12/09/2022 14:23:17
Quote Anchor link
Jan Koehoorn op 12/09/2022 14:13:03:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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!
 
Ozzie PHP

Ozzie PHP

12/09/2022 15:43:21
Quote Anchor link
@Jan Koehoorn

Heeft class="grid-item" een specifieke functie?
 
Jan Koehoorn

Jan Koehoorn

12/09/2022 20:24:58
Quote Anchor link
Ozzie PHP op 12/09/2022 15:43:21:
@Jan Koehoorn

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 ;-)
 

12/09/2022 21:43:58
Quote Anchor link
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.
 
Ozzie PHP

Ozzie PHP

12/09/2022 22:09:01
Quote Anchor link
Jan Koehoorn op 12/09/2022 20:24:58:
Ozzie PHP op 12/09/2022 15:43:21:
@Jan Koehoorn

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 ;-)
 
Mohamed nvt

Mohamed nvt

12/09/2022 22:31:14
Quote Anchor link
Jan Koehoorn op 12/09/2022 14:13:03:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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!
 
Jan Koehoorn

Jan Koehoorn

13/09/2022 03:12:39
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
* {
    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)
PHP script in nieuw venster Selecteer het PHP script
1
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>
                ...
Gewijzigd op 13/09/2022 03:13:30 door Jan Koehoorn
 
Mohamed nvt

Mohamed nvt

14/09/2022 13:42:24
Quote Anchor link
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.
 
Jan Koehoorn

Jan Koehoorn

14/09/2022 16:04:48
Quote Anchor link
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.
 
Mohamed nvt

Mohamed nvt

15/09/2022 11:16:48
Quote Anchor link
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.


Jij hebt mij genoeg geholpen hoor, Tnx!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.