Groeperen van items

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

BI Ontwikkelaar

Ben jij gek op het verzamelen en analyseren van informatie? En wil je met deze passie graag zorgorganisaties meer inzicht verschaffen? Lees dan snel verder. Jouw baan Als BI ontwikkelaar Datawarehouse help je zorgorganisaties bij het inzichtelijk maken en grafisch presenteren van hun data. De ene dag werk je aan rapportages en kubussen, een dag later spreek je af met je collega’s om je in een ingewikkeld zorgproces te verdiepen. Je verwerkt informatiewensen samen met onze ontwikkelaars in de software. Afwisselend en uitdagend, want je werkt aan meerdere projecten tegelijk. Wat voor projecten? Dat stemmen we zoveel mogelijk af op

Bekijk vacature »

Full stack software .NET C# developer, domotica me

Voor een bedrijf in de regio Hendrik Ido Ambacht zijn we op zoek naar een fullstack .NET C#developer. Het gaat hier om een bedrijf dat systemen ontwikkeld die via domotica oplossing bieden voor maatschappelijke instellingen. Zo verwerken hun systemen meldingen waarover ze rapporteren, maar ook zorgen ze voor de automatisering van toezicht. Het systeem bestaat uit apps, web interfaces, backend en BI rapportage tools. Het gaat het hier om een MKB bedrijf van circa 70 mensen met een team van 5 developers. Bestaande uit hardware, embedded en backend developers. Momenteel is er daarom sterke behoefte aan iemand die zowel back-

Bekijk vacature »

Database Developer / SQL Ontwikkelaar / Analist

Functieomschrijving Database / SQL / Ontwikkelaar / Analist De requirements in kaart brengen van de klant Het analyseren en ontwerpen maken de bedrijfsprocessen van de klant Het maken van functioneel ontwerp Het ontwikkelteam aansturen De database ontwikkelen en onderhouden Queries schrijven en inrichten Tabellen maken in SQL Programmeren in lowcode Het testen en uitleveren van nieuwe functionaliteiten naar de acceptatie en productieomgeving Het bieden van customer support Functie-eisen HBO werk en/of denkniveau, opgedaan door ervaring of opleiding is een eis; Ruime ervaring met SQL (tabellen maken / stored procedures / inrichten) is een eis;Zowel Nederlands als Engels spreken en schrijven;

Bekijk vacature »

JavaScript developer met geweldige arbeidsvoorwaar

Functieomschrijving Als JavaScript developer werk je samen met je team op diverse vlakken. Het team bestaat uit 8 personen en is een multidisciplinair Scrum/Agile DevOps team. Jij werkt op de Front- en Backend en in de cloud. Je werkt hier aan interne applicaties (portalen) die vanuit vraagstukken van de business moeten worden omgezet naar werkende applicaties. Je zult dus samen met het team requirements omzetten naar goede oplossingen waarbij er vanuit het team een grote mate van verantwoordelijkheid wordt gevraagd. Daarin krijg je als team veel vrijheid om je creativiteit erop los te laten en zul je dit samen met

Bekijk vacature »

IT Logistics Consultant

Weet jij altijd als eerste de nieuwste IT-trends op te pikken? Raak je gefrustreerd als het systeem op je werk niet efficiënt werkt en denk jij dat je dit beter vorm kan geven? Dan hebben we een match! Waar mag jij je in vastbijten? Als IT consultant bij Boltrics heb je de keuze uit 3 verschillende smaken consultancy. Als support consultant help je onze bestaande klanten met het oplossen van acute problemen, oftewel 'alles wat het gister nog wel deed en vandaag niet meer'. De requests op deze afdeling zijn heel divers en het oplossen ervan resulteert in blije klanten

Bekijk vacature »

Fullstack Developer / .NET / C#

Functieomschrijving Wil jij als Fullstack Developer aan de slag bij een organisatie die continue aan het groeien is en werkt met innovatieve producten? Lees dan snel verder over deze uitdaging! Ontwikkelen van complexe web- en (mobiele)applicaties; Meedenken met de verbetering van processen en applicaties; Voornamelijk ontwikkelen op de back-end, maar ook op front-end. Functie-eisen Je hebt een afgeronde IT gerelateerde HBO opleiding; Je hebt ervaring met het ontwikkelen van geavanceerde webapplicaties op basis van ASP.NET MVC; Je bent bekend met C#, HTML, jQuery, JavaScript & CSS; Je kan zowel zelfstandig werken als in teamverband; Je bent communicatief vaardig; Kennis en

Bekijk vacature »

C# developer met breed profiel

Functieomschrijving Gezocht wordt naar een breed ontwikkelde .NET developer die mee gaat bouwen aan een nieuw online platform. Brede ervaring is zeer wenselijk omdat er veel moet worden afgestemd op applicaties van derden maar vooral C#, ASP.NET, HTML, XML en JavaScript zijn belangrijk. Je gaat dit samen met een andere developer / architect voor je rekening nemen en het gaat om een interne functie binnen een informele en dynamische onderneming. Functie-eisen - Je hebt een afgeronde HBO (ICT) opleiding - Je hebt ervaring met C#, ASP.NET, SQL Server – Je hebt ervaring met HTML, CSS, JavaScript - Je bent een

Bekijk vacature »

.NET Developer Medicatie / Apotheek

Jij krijgt een kick van het ontwikkelen van complexe software. Voor onze vestiging in Hoogeveen zoeken wij een .NET Developer Medicatie / Apotheek die graag met de laatste Microsoft-tools en -technieken wilt werken, interessant? Jouw baan Je bent verantwoordelijk voor het ontwerpen, ontwikkelen, ondersteunen en onderhouden van de module Medicatie / Logistiek & Apotheek. Je gaat nauw samen werken met zowel interne als externe klant om nieuwe functionaliteiten te ontwikkelen om onze klanten te ondersteunen in hun werkproces. Het gaat om complexe ICT-producten die feilloos moeten functioneren binnen de complexe omgeving van een zorgorganisatie. ChipSoft maakt gebruik van een zelf

Bekijk vacature »

Senior richting Lead PHP developer e-platforms

Functieomschrijving Als Lead PHP Developer binnen deze unieke organisatie ga je samen met de directie en team bepalen welke richting jullie met onze software opgaan. Er is een grote mate van eigen inbreng en vrijheid binnen je team en er heerst een leuke sfeer. Je komt te werken met sympathieke collega's. Het is belangrijk dat je naast PHP ervaring ook een prettige persoon bent in de omgang waar het prettig mee samenwerken is. Daarnaast help je met het uitbouwen van zowel de e-platform als de team van ontwikkelaars. Er is momenteel ruimte voor een PHP ontwikkelaar met 4 (of meer)

Bekijk vacature »

Servicedesk Medewerker

OVER AUMATICS Wij zijn een gedreven en professionele IT organisatie. Aumatics heeft haar hele organisatie en dienstverlening ingericht om samen met de klant te groeien en op tijd te anticiperen in een snel veranderende wereld. Wij doen dat door onze klanten de juiste tools te bieden en te begeleiden in een interactief proces. Hierin staat de continuïteit van de business altijd centraal. Samen groeien is een speerpunt in onze aanpak en we zien die onderlinge verbondenheid als fundamentele waarde in de samenwerking met de klant. Voor de uitbreiding van onze organisatie zijn we op zoek naar een teamspeler en professional:

Bekijk vacature »

Salesforce Developer

Ben jij die SalesForce Professional die op zoek is naar het verder ontwikkelen van een nieuw geavanceerd service platform? Wil jij een bijdrage leveren aan ons bedrijfskritische systeem met duizenden gebruikers? Dan heb je wellicht interesse in de positie van: Salesforce Developer 32 - 40 uur Over de positie: Binnen Oranje Groep BV hebben wij een nieuw servicemanagementsysteem. Je bent verantwoordelijk voor het ontwerpen en doorontwikkelen van serviceprocessen, zodat deze van het begin tot het eind optimaal verlopen. Hierbij vertaal je werkprocessen naar softwareoplossingen om tot duidelijke application requirements te komen. Je komt te werken op onze modern nieuw ingerichte

Bekijk vacature »

.NET developer / C# / Azure / Zorg

Functieomschrijving Ben jij een .NET Developer met minimaal 2-3 jaar ervaring en ben je toe aan de volgende stap in je carrière? Wil jij werken op het hoogste niveau en aan de slag gaan bij de .NET ontwikkel organisatie van Brabant? Dan is deze functie perfect voor jou! Als .NET Ontwikkelaar ga je: Programmeren van high-availability en high-security applicaties in C#; Samen met je teamgenoten nieuwe applicaties/diensten ontwikkelen in .NET; Overleggen met de informatie analisten en testers; Ontwikkelen van webservices (WCF); 20% van je tijd besteden aan innovatie; Deelnemen aan projecten om nieuwe ketenpartijen toe te voegen; Bouwen van unit

Bekijk vacature »

PHP developer voor Agile team nabij Eindhoven

Functieomschrijving In deze PHP functie werk je samen met je collega's aan verschillende projecten. Hierbij werken ze in sprints en krijg je regelmatig met elkaar de mogelijkheid om nieuwe technieken en tools te ontdekken. Je bent zelf verantwoordelijk voor de ontwikkeling van je eigen deel en draagt hier zorg voor uiteraard ook de code standaarden, reviews en GIT vanzelfsprekend. Uitdagende mogelijkheden zijn onder andere semantic versioned webservices, formulieren en rekenregels. Momenteel zijn ze bezig met kunstmatige intelligentie. Ze willen namelijk graag dat het systeem uit zichzelf dingen gaat leren herkennen en toepassen. Dit vereist vele uren werk en overleg en

Bekijk vacature »

Full-stack .NET developer gezocht, Goeree-Overflak

Ben je een .NET software developer en op zoek naar een professionele werkomgeving binnen een wat groter innovatief en ambitieus bedrijf? Waar sprake is van een uitgebreid applicatielandschap met elke dag nieuwe uitdagingen, waar alles mogelijk is, binnen een goede collegiale sfeer? Lees dan verder! Voor een bedrijf in Goeree-Overflakke zijn we momenteel op zoek naar een ervaren software developer. De IT afdeling bestaat uit circa 60 mensen waarvan zo'n 15 developers. Voor de recente architectuur wordt gebruikt gemaakt van de nieuwste technieken waaronder .NET Core, Docker en Angular. Echter bestaat het applicatielandschap uit een groot aantal verschillende applicaties waarbij

Bekijk vacature »

C# backend developer gezocht, hardware component,

Ben je een C# developer en zoek je een baan in Rotterdam waar je systemen ontwikkeld die communiceren met hardware? Bij een klein bedrijf met korte lijnen, een open cultuur en veel vrijheid? Wellicht dat dit dan iets voor je is. Voor een klant in Rotterdam zijn we op zoek naar een ervaren C# developer. Het gaat hier om een bedrijf dat gericht is om voor overheden en ondernemingen informatie vanuit bepaalde meetsystemen te verwerken en te presenteren. Zo is bijvoorbeeld een van de projecten waar je als ontwikkelaar aan gaat werken; het bouwen van een website waar gebruikers informatie

Bekijk vacature »

Pagina: « vorige 1 2

- Ariën -
Beheerder

- Ariën -

16/05/2020 22:58:44
Quote Anchor link
Een zicht op je HTML-broncode lijkt mij zinvoller. Je wilt juist weten hoe je layout opgebouwd wordt.
 
PHP hulp

PHP hulp

01/06/2020 02:21:11
 
Johan Steel

Johan Steel

16/05/2020 23:08:17
Quote Anchor link
toegevoegd!
 
- Ariën -
Beheerder

- Ariën -

16/05/2020 23:11:10
Quote Anchor link
Ik zie niks...

;-)
 
Thomas van den Heuvel

Thomas van den Heuvel

16/05/2020 23:59:37
Quote Anchor link
@Ariën bedoelt waarschijnlijk, hoe ziet de broncode van de uiteindelijke gegenereerde HTML-pagina er uit, mogelijk zit daar iets scheef qua opbouw.
 
Johan Steel

Johan Steel

17/05/2020 11:10:23
Quote Anchor link
Ah, excuus, verkeerd begrepen! Uiteindelijke gegenereerde HTML snijdt meer hout :-)

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


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:

https://i.ibb.co/PT6LPM6/wrasses.jpg

Ben benieuwd!

Groet,

Johan
 
Thomas van den Heuvel

Thomas van den Heuvel

17/05/2020 12:53:56
Quote Anchor link
Je piest sowieso naast de pot met de hyperlinks want deze zijn niet goed genest:
<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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<div class='item2'>
<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
 
Johan Steel

Johan Steel

17/05/2020 15:35:42
Quote Anchor link
Hi Thomas,

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

Milo S

19/05/2020 12:46:22
Quote Anchor link
In je huidige code staat er een aantal zaken dubbel en door elkaar... Als ik de tip mag geven, probeer eens wat meer in te springen en op een nieuwe regel te beginnen. Al is het maar voor het overzicht. Hieronder een voorbeeld van wat ik denk dat jij bedoeld. Uiteindelijk heb ik niet veel veranderd van wat er in jou code staat en wel de opbouw die je wenst.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>



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

Jan Koehoorn

19/05/2020 20:13:36
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
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>
 
Johan Steel

Johan Steel

19/05/2020 21:51:55
Quote Anchor link
Gents,

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

Jan Koehoorn

19/05/2020 22:19:05
Quote Anchor link
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/
 

Pagina: « vorige 1 2



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.