Hoe krijg divs naast elkaar en onder elkaar

Door Mohamed nvt op 11-09-2022 22:42

6.664 views

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:


<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


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

Ozzie PHP

12-09-2022 22:09

Jan Koehoorn op 12/09/2022 20:24:58

[quote="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 ;-)
[/quote]
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 ;-)

M Mohamed nvt

12-09-2022 22:31

Jan Koehoorn op 12/09/2022 14:13:03


<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

13-09-2022 03:12 gewijzigd op 13-09-2022 03:13

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.


* {
    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:


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

M Mohamed nvt

14-09-2022 13:42

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

14-09-2022 16:04

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.

M Mohamed nvt

15-09-2022 11:16

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!

Reageren

Inloggen om te reageren