Groeperen van items

OK! Ik denk dat mijn eerdere post de situatie wel goed schetst, maar wellicht helpt het:

Voor de aanpassing:



Na de aanpassing:



Zou iets simpels moeten zijn, lijkt mij. Maar ik zie het niet :-)

Dit is een kwestie van de HTML-broncodes en eventueel de CSS vergelijken.

Een heleboel HTML-tags hebben een display attribuut. Deze heeft twee varianten: block of inline.

Zogenaamde "block level elementen" zullen, als je die achtereenvolgens achter elkaar zet in je broncode, altijd op een nieuwe regel getoond worden.

De "inline elementen" kunnen standaard naast elkaar gezet worden.

Het standaard display-gedrag kun je via CSS aanpassen die van deze default afwijkt (mogelijk enkele variaties of onlogische constructies daar gelaten).

Zowel <section> alsook <div> tags hebben standaard het block display-type, dus het is niet zo verwonderlijk dat deze onder elkaar worden gezet.

Wil je dit aanpassen (zodanig dat dit van het default gedrag afwijkt), dan zul je attributen als display en float -en mogelijk meer- expliciet moeten voorzien van niet-standaard waarden voor deze elementen via ofwel rechtstreekse stijldefinities (het style-attribuut), of wellicht beter, via een CSS-class.

Hi,

Dank weer voor het meedenken! Het comment van Thomas klinkt plausibel, dus ik ben een beetje op onderzoek uit gegaan. Maar ik betwijfel toch of bijvoorbeeld de display op block staat. Is het niet default inline? Immers wanneer ik block wel in de code toevoeg, zie je duidelijk dat er daadwerkelijk nieuwe regels ontstaan:

https://ibb.co/82j1D7J

Groet,

JOhan

Je kan de stijlregels eenvoudig bekijken via de Element Inspector van je browser.

Op onderstaand adres kan je album code ophalen.
Met wat aanpassingen en het toevoegen van je eigen code (o.a de head_container en item kan je 1 op 1 toevoegen) krijg je het resultaat wat je wilt.

https://phppot.com/php/php-responsive-image-gallery-using-css-media-queries/

Een uitgebreider fotooalbum is dit :

https://www.jqueryscript.net/layout/Pinterest-Like-Dynamic-Responsive-Grid-Layout-Plugin-BlocksIt.html

Hi Adoptive Solution,

Dank voor de tip! Ik heb het uitgeprobeerd (de CSS opmaak in jouw link) lijkt wel weer een stapje verder, maar tegelijk ook weer een stapje terug. Ik denk dat het komt omdat er geen gebruik gemaakt wordt van sections. DIt is het resultaat (nog niet zoals ik het wil):



Groet,

Johan

Dan voeg je sections toe.

Hier resulttaat met je eigen code
https://ibb.co/xmbtH0d

THanks, jouw output is gelijk aan mijn laatste post.

Het idee is om de opmaak juist te behouden (na de diersoort aanpassing):



Dank voor je hulp!

Gr,

JOhan

[size=xsmall]Toevoeging op 14/05/2020 17:42:47:[/size]

Gents,

Het ziet er naar uit dat het gelukt is! Uiteindelijk zullen het twee verschillende (=andere opmaak) divjes worden in een section. Zodra ik de code definitief werkend heb, zal ik het posten.

Iedereen dank voor het meedenken, anders was het zeker niet gelukt!

Gr,

Johan

Iedereen bedankt voor de input, het is gelukt, hieronder de code. Uiteindelijk werkt 1 section met twee verschillende div classes het beste:

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

<body>
   <section class='container'>
          <?php
                 while($data= mysqli_fetch_assoc($result)){
                   {
                     if($previousItem != $data['diersoort'])
                        {
                        echo "<div class='item2'>
                              <br>
                              ".$data['diersoort']."
                              <hr>
                              </div>";

                        $previousItem = $data['diersoort'];
                        }

                       echo "

                              <div class='item'>
                              <a href='images_normal/".$data['photo_id'].".jpg'><img src='images/".$data['photo_id'].".jpg' ></a><br>
                              <a href=".$data['link']." target='_blank'>
                              <b>".$data['common_name']."</b><br>
                        
                              </div></a>";
          }
          }
          ?>
</section>
</body>

Enige wat nog wel een probleem is, is dat de laatste diersoort, buiten de section valt. Doordat de achtergrond van de section wit is, lijkt het laatste diersoort daar nu buiten te vallen:



Ligt dit aan de php code?

THanks again,

Johan