Grid werkt niet meer

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

.NET Developer Microservices

Dit ga je doen Je taken zullen voornamelijk bestaan uit: Het ontwikkelen van software, inclusief vormgeving, implementaties, integraties en (automatisch) testen (.NET, C#, Azure, Docker, Microservices, Angular); Het in kaart brengen van software requirements; Zorgen dat jouw code kwalitatief hoogstaand is; Het uitvoeren van risico analyses; Een bijdrage leveren aan het continuous quality improvement process. Hier ga je werken Dat kanker een verschrikkelijke ziekte is die de wereld uit geholpen moet worden, is duidelijk. Binnen deze Gelderse organisatie die duizenden ziekenhuizen van producten voorziet, proberen ze daar via technische innovaties aan bij te dragen. Samen met 10 collega .NET developers

Bekijk vacature »

Delphi Programmeur

Functie omschrijving Onze opdrachtgever is gespecialiseerd in kantoor-bedrijfssoftware en zit gevestigd in omgeving Numansdorp. Als programmeur ben jij bij dit bedrijf met het volgende bezig; Je vertaalt technische en functionele ontwerpen naar kwalitatieve software. Je ontwikkelt, ontwerpt en test software. Je maakt daarbij veel gebruik met de volgende tools & technologieën: Delphi 10.3 (Rio), QuickReport 6. Je krijgt in deze rol veel vrijheid en verantwoordelijkheid. Je levert projecten van A - Z op, en werkt daarbij projectmatig en gestructureerd. Bedrijfsprofiel Dit bedrijf richt zich op maatwerk software oplossingen. Deze software oplossingen worden ingezet in de financiële branche. Het betreft een

Bekijk vacature »

BizTalk/ Azure Developer

Dit ga je doen •Understanding the scope of required functionality, translate them within context of way of working of the team into developed solutions, whilst safeguarding documentation; •Planning based on assigned sprint tasks; •Acting as an expert in estimation techniques and planning; •Understanding your role in the agile process and act in this way; •Facilitating internal communication and effective collaboration; •Working closely with scrum master to handle backlogs and new requests; •Providing information to the third parties about activities and needs for compliance. Hier ga je werken Our client is a leading organization focusing on animal nutrition, offering solutions that

Bekijk vacature »

PHP Developer

Dit ga je doen Ontwikkelen, implementeren en testen van PHP-oplossingen en Apps voor klanten en bedrijfsprocessen; Opstellen van requirements en uitwerken van de oplossingen; Testen van software en borgen van een soepele overdracht, inclusief documentatie; Proactief adviseren vanuit eigen expertisegebied over ontwikkelingen en verbeterpunten in technische toepassingen en processen binnen de organisatie. Hier ga je werken De organisatie is een ambitieuze en vooruitstrevende speler in de markt in de regio Rotterdam. Ze zijn de snelst groeiende in hun branche. Met een excellent aanbod en service willen zij de beste keuze zijn voor hun bestaande en nieuwe klanten. Dit alles doen

Bekijk vacature »

PHP developer

Functie Voor een opdrachtgever in omgeving Leiden zijn wij op zoek naar een PHP developer die affiniteit heeft met C++. Ben jij reeds afgestudeerd of heb je al een paar jaar ervaring? Lees snel verder en kijk of dit iets voor jou is! Hoe kan jouw dag er straks uitzien? Je gaat software en webapplicaties ontwikkelen met behulp van de talen C / C++ / PHP. Je gaat technische klussen uitvoeren op locatie bij klanten. Je onderhoudt contact met de projectleider om er zeker van te zijn dat een projecten goed verlopen. Je gaat klanten ondersteunen op het gebied van

Bekijk vacature »

C# .NET Software Ontwikkelaar

Functie omschrijving Gezocht: Software Developer C# .NET voor een dynamische organisatie! Ben je onlangs afgestudeerd of ben je toe aan de volgende stap in je professionele carrière? Lees dan verder! We zijn momenteel op zoek naar een Software Developer die klaar is voor een nieuwe uitdaging en die onze eindklant in de regio Arnhem kan versterken. In deze functie werk je aan verschillende projecten en bezoek je vaak klanten. Je kunt een rol verwachten met veel uitdaging, diversiteit en verantwoordelijkheid. Bedrijfsprofiel Binnen welke organisatie ga je aan de slag? Je gaat werken bij een organisatie die zich specialiseert in het

Bekijk vacature »

Python developer Consultancy

Functie Als Python developer bij deze organisatie werk je voor verschillende klanten. Doordat de oprichter een groot netwerk heeft kun je zelf voorkeuren uitspreken in het type projecten dat je wilt gaan doen. Zo zijn er bijvoorbeeld langdurige of juist korte projecten, maar is ook het type klant, of project bespreekbaar. Werk jij bijvoorbeeld graag aan een nieuw, state-of-the-art web portaal of ben je liever betrokken bij een migratietraject van een bestaande applicatie? Wij gaan voor jou aan de slag! Eisen • Je bent een gedreven developer met sterke voorkeur voor Python • Je bent meer dan een codeklopper •

Bekijk vacature »

Full-stack Developer

As a Full-stack developer at KUBUS, you will develop the (web)applications and services of BIMcollab. You will work on both the front- and back-end. As a software company, KUBUS is in a unique position. We build our own products that are used by tens of thousands of users worldwide. Our company is just the right size: big enough to make a real impact in the market, but small enough that as an individual developer you can have an impact and really make a difference. Our development team consists of over 40 developers, testers, scrum masters and product owners, divided over

Bekijk vacature »

Backend Developer Integraties API HBO REST

Samengevat: Deze werkgever is een IT-consultancy. Wil jij werken als Backend Developer Integraties? Heb jij kennis van gangbare berichtformaten? Vaste baan: Backend Developer Integraties API HBO €3.100 - €4.400 Zij bieden innovatieve oplossingen die bedrijven efficiënter en wendbaarder maken, waardoor onze klanten zich net zo snel kunnen ontwikkelen als de business van hen vraagt. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Deze werkgever staat open voor elke nieuwe trend. Onze systemen zijn groot en ingewikkeld. Hou jij van diepgang

Bekijk vacature »

Traineeship Java Developer

Functie Wat ga je doen als Java Developer? Jij start via ons bij deze opdrachtgever als Trainee Java ontwikkelaar, tijdens het traineeship ga je in 1 jaar van de basis naar professioneel Java ontwikkelaar. Je start samen met een groep trainees, volgt de aangeboden cursussen en gaat aan de slag bij één van onze opdrachtgevers. Na een aantal maanden volgt de volgende opdracht. Door de groei in jouw rol kom je op steeds complexere opdrachten terecht. Veel afwisseling dus. Collega’s met ervaring helpen je bij deze groei en samen met jouw coach ga je een persoonlijke leerplan opzetten om jou

Bekijk vacature »

Back-End Web Developer

As a Back-End Web Developer at Coolblue, you ensure that our webshops work as optimal as possible. How do I become a Back-End Web Developer at Coolblue? As a Back-End Web Developer you work together with other development teams to make our webshop work as optimal as possible and to make our customers happy. Although you are a PHP Developer, you also feel confident with setting up microservices in Typescript or are open to learning this. Would you also like to become a PHP Developer at Coolblue? Read below if the job suits you. You enjoy doing this Writing pure

Bekijk vacature »

C# .Net Developer

Dit ga je doen Het bouwen van Api's; Nieuwe oplossingen bouwen met C# .Net; De huidige software uitbouwen met C# .Net; Meewerken in projecten; Meedenken aan de toekomstplannen en verbeteringen; Onderdeel van het Scrum Team. Hier ga je werken Onze klant is een dienstverlenende organisatie voor diverse soorten organisaties in Nederland. Ze zijn van oorsprong een familiebedrijf en er is een open cultuur. Ze zijn vooruitstrevend op IT gebied en hebben een eigen inhouse development team van circa 11 man. Je komt hier te werken in het subteam .Net Core. Hier werken ze volgens scrum met de nieuwste technieken en

Bekijk vacature »

Java (Java EE) Developer

In het kort Werken als Java developer betekent werken aan complexe IT projecten bij onder meer een internationaal containeroverslag bedrijf. Zo sturen we apparaten en eindgebruikers aan d.m.v. onze custom-made software oplossing, die dagelijkse vele duizenden containers verwerkt. Denk aan systemen die volautomatische kranen aansturen en op afstand bedienen, de volledige afhandeling van containernummerherkenning bij het laden en lossen van zeeschepen of het tonen van instructies aan de chauffeurs van ruim 300 straddle carriers. En dat allemaal redundant, robuust en in een dynamische 24/7 omgeving! Jij versterkt ons ontwikkelteam en gaat aan de slag met oa. Java i.c.m. Spring (Boot),

Bekijk vacature »

Junior Front end developer Onderwijssoftware

Functie Als Junior front end developer kom jij terecht in een klein, maar hecht team bestaande uit 5 andere developers (waarvan 2 senioren, 2 medior en 1 junior). Met de gezamenlijke missie om “ieder kind te helpen met onze software” wordt er dagelijks gepassioneerd en hard gewerkt aan ons in-house ontwikkeld platform. Deze software is gebaseerd is op AI, machine Learning en wetenschappelijke inzichten. Dagelijks zul jij werken met onze high traffic webapplicatie. We hebben ruim 300.00 gebruikers en meer dan 2 miljard records waar je te maken mee krijgt! Verder zul jij je bezighouden met: – Het ontwikkelen van

Bekijk vacature »

Full Stack Developer/ Applicatie Ontwikkelaar

Wat jij doet Als Applicatie Ontwikkelaar ben je onderdeel van het team die de Rimote omgeving ontwikkeld en onderhoud. Hierbij kan je denk aan de cloud, on premise en webapplicaties welke worden gebruikt in bijvoorbeeld industriële bakkerijen, biogasinstallaties en kwekerijen. Deze applicaties verzorgen (remote) de aansturing en monitoring van processen, machines en robots. Van a tot z ben je betrokken bij projecten. Dit betekent vanaf ontwerp tot oplevering. Je moet samen met jouw team een goed product neer zetten. Dit begint met het opzetten van het ontwerp. De basis van de software moet staan als een huis. Daarvoor moet jij

Bekijk vacature »
Alexander Tobe

Alexander Tobe

26/03/2025 09:19:38
Quote Anchor link
Ik was bezig met de laatste handeling namelijk 2 youtube filmpje toevoegen op de website maar nu werkt de grid opeens niet meer zoals het moet zijn.

Daarnaast krijg ik ook foutmeldingen bij de validator 2 van de youtube filmpjes.
https://i.postimg.cc/vmK6FWz8/Schermafbeelding-2025-03-26-091656.png

De lay-out van de 3 afbeeldingen en 2 filmpjes moet had de volgende lay-outs.

Vanaf 1024px alles naast elkaar met ruimte ertussen.
In 768px de 3 foto's naast elkaar en de 2 filmpjes eronder over de hele breedte.
In 320px alles onder elkaar.

De 320px is onder elkaar maar de witruimte is weg rechts.

Mijn vraag is duss of iemand mij kan helpen dit grid probleem op te lossen?

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
<!-- Foto- en video sectie -->
        <section class="media">
            <h2>Foto's en video's</h2>
            <div class="grid">
                <img src="Media/Index/Photo/Girls-on-car.jpg" alt="Meiden zitten op een auto">
                <img src="Media/Index/Photo/Navigation.jpg" alt="Navigatie">
                <img src="Media/Index/Photo/Pin-location.jpg" alt="Zet de route uitzetten">
            </div>
                <!-- YouTube Video -->
                <div class="video-container">
                    <iframe width="560" height="315"
                            src="https://www.youtube.com/embed/75nwHtfxSXI?si=_WpPWU94GMtxiGuw"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen>
                    </iframe>
                </div>
                <div class="video-container">
                    <iframe width="560" height="315"
                            src="https://www.youtube.com/embed/xOU1EFf3qik?si=u5A8mnxIjo-ZN88M"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen>
                    </iframe>
                </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
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
/* CSS-variabelen */
:root {
    --primary-color: #ff6600;
    --secondary-color: #333;
    --font: 'Roboto', sans-serif;
}

body {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    background: #f4f4f4;
}

/* Header en navigatie */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--secondary-color);
    padding: 15px 30px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    color: white;
    margin-left: 10px;
    font-family: "Monoton", sans-serif;
    font-weight: 400;
    font-style: normal;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    position: relative;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}

nav ul li a:hover {
    background: var(--primary-color);
}
.active {
    background-color: #ff6600;
}
/* Submenu */
.submenu {
    display: none;
    position: absolute;
    background: var(--secondary-color);
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li:hover .submenu {
    display: block;
}

.submenu li a {
    padding: 10px;
    display: block;
    width: 150px;
}

/* Hero afbeelding */
.hero img {
    width: 100%;
    height: 200px;
    display: block;
}

/* Content sectie */
.content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px;
    margin-right: 20px;
    margin-left: 20px;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 verhouding */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Foto's en video's */
.media {
    padding: 40px;
    text-align: center;
}

.media .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.media img, .media video {
    width: 100%;
    border-radius: 10px;
}

/* Plaatjes met tekst */
.info {
    padding: 40px;
}

.row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.row img {
    width: 128px;
    height: 128px;
}

.reverse {
    flex-direction: row-reverse;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: var(--secondary-color);
    color: white;
}

/* Responsiviteit */
@media (max-width: 1024px) {
    .content {
        flex-direction: column;
        text-align: center;
    }
    .row {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
    }
    
    nav ul {
        flex-direction: column;
    }
    .media {
        flex-direction: row;
    }
}

@media (max-width: 320px) {
    .logo h1 {
    font-size: larger;
    }
    .hero img {
        width: 100%;
        height: auto;
    }

    .media .grid {
        flex-direction: column;
    }
    .info {
        font-size: small;
    }
    .row {
        flex-direction: column;
    }
    
}
/* Google Maps container */
.map-container {
    width: 100%;
    height: 400%;
    text-align: center;
}

#map {
    width: 100%;
    height: 100%;
}

/* Contactformulier */
.contact-form {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.contact-form h2 {
    text-align: center;
    color: var(--secondary-color);
}

.contact-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--font);
}

.contact-form textarea {
    height: 150px;
}

.contact-form button {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.contact-form button:hover {
    background: #e65c00;
}

/* Responsiviteit */
@media (max-width: 768px) {
    .contact-form {
        width: 90%;
    }
}
/* Tabel */
table {
    border-collapse: collapse;
    width: 100%;
  
  }
  
  th, td {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even){background-color: #f2f2f2}
  
  th {
    background-color: #333;
    color: white;
  }
  .tabel {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px;
    margin-right: 20px;
    margin-left: 20px;
  }
  
Gewijzigd op 26/03/2025 09:26:28 door Alexander Tobe
 
PHP hulp

PHP hulp

25/04/2025 05:23:34
 
Alexander Tobe

Alexander Tobe

27/03/2025 10:00:19
Quote Anchor link
Ik heb de witruimte bij de 320px weer terug. Heb padding toegevoegd dacht dat ik dat al geprobeerd had maar blijkbaar niet.

Had trouwens nog niet toegevoegd wat ik zelf geprobeerd had om het te fixen.

Er komt ook wel wat uit dan maar het wijzigt ook bij oa. 320px de lay-out wat niet de bedoeling is natuurlijk.
De video's blijven ook groot en onder elkaar dan in plaats van naast elkaar.

Bij 1024px:

.media .grid {
grid-template-columns: repeat(3, 1fr);
}

.media .video-container {
grid-template-columns: repeat(2, 1fr);
display: grid;
gap: 20px;
}

Bij 768px:

.media .grid {
grid-template-columns: repeat(3, 1fr);
}

.media .video-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

iframe {
width: 100%;
height: auto;
}
Gewijzigd op 27/03/2025 10:05:21 door Alexander Tobe
 
Alexander Tobe

Alexander Tobe

31/03/2025 09:13:22
Quote Anchor link
Niemand die wil/kan helpen?
 
- Ariën  -
Beheerder

- Ariën -

01/04/2025 09:56:39
Quote Anchor link
Als je een testcase kan delen (in bijv. JSfiddle, of een tijdelijke pagina), dan zal het makkelijker werken. Maar hoezo zou je geen bestaand grid-framework gebruiken?
Gewijzigd op 01/04/2025 09:57:30 door - Ariën -
 
Alexander Tobe

Alexander Tobe

01/04/2025 10:34:59
Quote Anchor link
- Ariën - op 01/04/2025 09:56:39:
Als je een testcase kan delen (in bijv. JSfiddle, of een tijdelijke pagina), dan zal het makkelijker werken. Maar hoezo zou je geen bestaand grid-framework gebruiken?


bestaand grid-framework? Ik heb een template gedownload als basis die voor 80% al goed was maar moest er zelf nog dingen aan veranderen en toevoegen.

Hopelijk is deze link goed.
https://jsfiddle.net/alext305/1ojuq5cg/1/

Ik moet de site donderdag online zetten eigenlijk duss hopelijk kan het worden opgelost.
 
Alexander Tobe

Alexander Tobe

03/04/2025 10:00:58
Quote Anchor link
Niemand met de oplossing?
 



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.