Uitlijning werkt niet.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

PHP Developer

Functieomschrijving Vanuit het hoofdkantoor in omgeving Roosendaal, ontwikkel je als PHP Developer niet alleen webapplicaties, maar ben je verder ook gefocust op het continu inspelen op nieuwe trends en ontwikkelingen m.b.t software development. Naast het bouwen van webapplicaties, ontwikkelen zij ook webshops en websites voor gave opdrachtgevers! Wat ga je doen? Het schrijven van schone en efficiënte codes volgens het Symfony framework; Het ontwerpen en implementeren van webapplicaties met het Symfony-framework; Onderhouden en updaten van bestaande applicaties die zijn gebouwd met het Symfony framework; Het testen van ontwikkelde applicaties om te zorgen dat ze goed functioneren en voldoen aan de

Bekijk vacature »

Medior/Senior Front-end Developers gezocht (Utrech

Functie Het team bestaat uit 10+ gespecialiseerde (veel senior) front-end ontwikkelaars en ontwerpers die werken aan projecten voor klanten van verschillende groottes (kan twee jaar bezig zijn met 1 klant). Je helpt klanten met ingewikkelde front-end vraagstukken, hierbij kun je denken aan: UX/UI design, CI/CD, architectuur en integratie met back-end systemen. De werkzaamheden verricht je op locatie bij de klant, dit is vaak in de Randstad. De organisatiestructuur is plat en er heerst een informele sfeer, zo kun je met vragen dus terecht bij de directie. Er wordt veel nadruk gelegd op het bevorderen van persoonlijke ontwikkeling door middel van

Bekijk vacature »

Front-end developer (Vue.js) gezocht!

Functie Als Front-end developer is het jouw doel om efficiënte en effectieve frontend code te ontwerpen, ontwikkelen en onderhouden die goed aansluit bij de functionele behoefte vanuit de klant. Je zorgt voor optimale SEO-resultaten, sitespeed en frontend security. You build it, you run it, you own it! Je maakt deel uit van een DevOps Scrum team en werkt samen met back-end developers, test-engineers, interaction designers en een projectmanager. Er zijn verschillende groepen Scrum teams. Een roadmap team is jouw ‘’thuisbasis’’, daar wordt gewerkt aan doorontwikkeling van bestaande omgevingen voor een aantal klanten. Hiernaast zijn er projectteams waar nieuwe omgevingen worden

Bekijk vacature »

Fullstack JavaScript developer (ReactJS, NodeJS, T

Functie Het team bestaat momenteel uit ruim 15 collega’s, waarvan ruim de helft in het ontwikkelteam werkzaam is. Er zijn gave plannen om het platform ook te gaan toepassen op bijv. vliegvelden, maar ook internationale groei zit in het verschiet en daarom zijn ze op zoek naar versterking. Als Fullstack JavaScript developer werk je nauw samen met 9 fullstack (Python en .NET) developers. Binnen het team ga jij je toespitsen op het creeren van de optimale toegankelijkheid en user experience. Om dit voor elkaar te krijgen zul je ontwerpen, programmeren, testen en implementeren. Het hele proces dus! Maar ook bijvoorbeeld

Bekijk vacature »

PHP Software Developer

Functie omschrijving PHP Software Developer gezocht! Voor een organisatie in de regio Zeist die zich bezighoud met het verbeteren van de medicatieveiligheid zoeken wij een Software Developer. In deze functie zijn wij op zoek naar een slimme en enthousiaste Developer die interesse heeft in farmacie, logistiek en ICT. Daarnaast beschik je over een goed analytisch vermogen en ben je van nature gestructureerd en resultaatgericht. Je moet in deze functie daadkrachtig, flexibel en communicatief goed zijn. Je verantwoordelijkheden bestaan uit: Object georiënteerd programmeren; Werken in een scrumteam aan de ontwikkeling van een medicatiebewakingssysteem; Meedenken over de mogelijkheden en onmogelijkheden van projecten;

Bekijk vacature »

Traineeship IT regio Amsterdam/Utrecht

Wat ga je doen? Het traineeship begint met een fulltime maand cursussen en praktijkdagen, waarin je de basis van het IT-vak leert op de Shared Servicedesk (SSD). Daarnaast ga je meteen aan de slag voor je eerste certificering! (ITILv4). Je start in een groep met 4 tot 10 deelnemers, waarmee jij gedurende die maand optrekt en je kennis kunt delen. Na het voltooien van de eerste maand ga je direct voor een langere periode aan de slag bij één van onze klanten of blijf je intern bij ons op de Shared Servicedesk. Je bent het eerste aanspreekpunt van de eindgebruikers

Bekijk vacature »

SQL ontwikkelaar

Functieomschrijving Voor een gave werkgever in regio Breda zijn wij per direct op zoek naar een SQL ontwikkelaar/ functioneel consultant. Hier wordt jij mede verantwoordelijk voor zowel de design en implementatie van SQL-databases als voor het verstaan van de processen van klanten naar het vertalen van deze processen naar IT-oplossingen. Jouw takenpakket komt als volgt uit te zien: Je test de ontwikkelde oplossingen om er zeker van te zijn dat deze voldoen aan de functionele specificaties en de behoeften van de organisatie; Je ontwerpt, ontwikkelt en implementeert SQL-databases om de data behoeften van de organisatie te ondersteunen; Je stelt op

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Front-end Developer

Functie omschrijving Gezocht front-end developer! Voor een toffe organisatie in de regio Rhenen zij wij op zoek naar een front-end developer die de eindverantwoordelijkheid op zich neemt van alles wat met design te maken heeft. In deze functie heb je een adviserende rol en beschik je over een grote dosis vakinhoudelijke kennis. Samen met collega’s en klanten overleg je om aangeleverde designs om te zetten naar unieke concepten. Zo draag jij je steentje bij aan de groeiambities van de klant. Voor klanten wordt jij het vaste aanspreekpunt als het gaat over planningen hierin houdt je alle betrokkenen goed op de

Bekijk vacature »

Android developer

De functie Schiphol is een plek om te reizen, te verblijven en te werken. Door middel van data en technologie richten we op al deze gebieden het leef- en werkklimaat optimaal in en zorgen we voor een slimmere en efficiëntere operatie. Wij ontwikkelen nieuwe producten en diensten vanuit de wensen en behoeften van onze klanten, voorspellen passagier flows en testen digitale oplossingen om rijen en andere pijnpunten in het proces te verminderen. Met slimme feedback van sensortechnologie maken we zelfs data van toiletten en stoelen inzichtelijk en bruikbaar. Het Commercial Platform bestaat uit multidisciplinaire teams met een end-2-end verantwoordelijkheid voor

Bekijk vacature »

Starter/junior PHP developer

Functie Momenteel zijn ze op zoek naar een junior PHP developer om het team te versterken. Als back-end developer bouw je de enterprise software die hun bedrijf helpt bij haar primaire processen. Afhankelijk van de omvang van het project werk je in een klein team aan een project. Ze hebben dagelijkse stand-ups en elke twee weken een scrumsessie, begeleid door de Scrum Master, waar je je ideeën kunt presenteren en samen met de Product Owner kunt werken aan het beste product. Ze vertrouwen enorm op hun eigen bedrijfssoftware. Dit geeft hun een groot voordeel ten opzichte van hun concurrentie. Zo

Bekijk vacature »

Integratie expert - Java Developer

Dit ga je doen Nieuw koppelingen ontwerpen, ontwikkelen en implementeren; Je schakelt met de klanten om hen zo goed mogelijk van dienst te zijn. Strategisch kijken naar nieuwe mogelijkheden op bestaande of nieuwe koppelingen zo effectief mogelijk te realiseren; Je bestaande toolset afwegen tegen nieuwe mogelijkheden om integratiedoelen steeds effectiever en/of effcienter te bewerkstelligen; Bestaande software koppelingen beheren, dit zijn koppelingen met zowel interne als externe systemen; Overleg met zowel directe collega's als met stakeholders om nieuwe integratieplannen concreet te maken; Je kunt de junioren meenemen op sleeptouw. Hier ga je werken Onze klant is op zoek naar een ervaren

Bekijk vacature »

.net developer

Hoi! Wij zijn auto.nl en wij verkopen auto's online. je bestelt bij ons een auto net zo makkelijk als een spijkerbroek. En bevalt ie niet? Dan stuur je 'm gewoon weer terug. En dat we dat goed doen bewijst onze hoge klanttevredenheid van een 9,3. Nu maken we de volgende stap bij auto.nl. We starten met fysieke winkels. Online zoeken, offline bekijken. Maar nog altijd, geen gedoe! Gewoon eerlijk, transparant en zonder zorgen een auto kopen.. Maar om dat waar te blijven maken en nóg beter te worden, zoeken we uitbreiding van ons development team. Wat ga je precies doen?

Bekijk vacature »

Backend developer

Functie omschrijving Ben jij graag bezig met de back-end van applicaties? Zou je dit graag willen doen voor een kleine werkgever waar ook tijd is voor een drankje op zijn tijd? Je taken hierbij zullen bestaan uit: Gebruik maken van de volgende technieken: .NET (core), C#, SQL, XML, MVC, JSON, REST & SOAP API. Gebruik maken van de volgende tools: Visual Studio, GIT, Jira, Jenkins. Bovengenoemde technieken en tools ga je gebruiken om: Nieuwe functionaliteiten te ontwikkelen. Wijzigingsverzoeken van klanten uitvoeren. Verzorgen van koppelingen tussen data. Bedrijfsprofiel Jouw nieuwe werkgever bevindt zich in regio Raamdonksveer en bieden oplossingen op gebied

Bekijk vacature »

Senior .NET Ontwikkelaar

In het kort Als Senior .NET ontwikkelaar ga je binnen onze business unit Transport en Logistiek aan de slag met complexe maatwerk software voor bedrijf kritische systemen binnen de technische automatisering. Denk bijvoorbeeld een IoT-oplossing voor de logistieke sector waarbij we van ruim 200.000 machines de telemetrie en events verwerken. We zijn actief in de distributielogistiek, havenlogistiek (denk aan ECT) en productielogistiek. Naast C# en .NET Core maken we ook gebruik van Azure technologie. En als trotse Microsoft Gold Partner leren we graag van en met jou. Wil jij jezelf blijven ontwikkelen binnen de technische automatisering met .NET, dan gaan

Bekijk vacature »
Alexander Tobe

Alexander Tobe

03/09/2024 09:58:36
Quote Anchor link
Voor een opdracht moet ik een website veranderen.
Ik heb inmiddels 29 punten opgelost maar 1 punt kom ik niet uit.
Gebruik van grid, tabellen en Java(script) mag niet.

De website moet goed werken op een smartphone (320px), tablet (768px) en laptop (1024px, 1440px) maar de uitlijning klopt niet.

Dit is het voorbeeld.
https://dam-cdn.loi.nl/document-output/casloi.prd.08a87b8e-fe35-4209-ab98-cbcab5a0b940/originaldocument

De volgende onderdelen kloppen nog niet;

• Vanaf 320px moet de uitlijning gecentreerd zijn, menu passend.

• Vanaf 768px moet het artikel worden getoond in drie kolommen, gescheiden door een dunne rode lijn met de kop over de drie kolommen heen.
• Vanaf 768px worden de foto's in rijen van twee getoond, waarbij de gehele breedte wordt gebruikt en een kleine marge tussen de foto's.

• Vanaf 1024px worden de foto's in één rij van vier getoond, waarbij de gehele breedte wordt gebruikt en een kleine marge tussen de foto's.
• Vanaf 1024px worden de letterblokjes in twee rijen getoond (gebruik de gehele breedte van het scherm) met een kleine ruimte tussen de blokjes, waarbij de drie blokjes horizontaal op één rij de tekst LOI tonen.

• Vanaf een venstergrootte van 1440px wordt de breedte van de content smaller gemaakt en de pagina gecentreerd weergegeven.
• Er zijn drie rijen van twee letterblokjes (gebruik de gehele breedte van het scherm) met een kleine ruimte tussen de blokjes. Op de eerste rij moet de letter L staan in de cirkel. Op de tweede rij de letter O en op de derde rij de letter I.

Hier is de link naar de site, de Responsive design checker doet het niet omdat het geen HTTPS is maar je kan nog met inspecteren van de site de verschillende venstergrootte bekijken.

http://alext.free.nf/

HTML:
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
<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opdracht Overgangen en animaties, attr() en CSS-variabelen</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="layout.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#artikel">Masterplan 2050</a></li>
                <li><a href="#foto">bedreigde diersoorten</a></li>
                <li><a href="#letterblokjes">Letterblokjes</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="artikel">
            <h1>Van dierentuin naar natuurherstel</h1>
            <div class="artikel-content">
                <p>&#9733; Blijdorp biedt de bezoekers de natuurlijke leefomgeving van de diersoorten en geeft informatie over het behoud van de biodiversiteit.
                            Als we niets doen, verdwijnen diersoorten en daarom zet Diergaarde Blijdorp zich in voor natuurherstel.
                            De urgentie en de oplossingsrichting omschreven wij in vier guiding principles: Stop the Loss, Reverse the Red, Brighten the Blue en Expand the Green.</p>
                <p>&#9733; Soortbehoud en natuurherstel gaan hand in hand, dus vormen deze twee samen onze strategie. Together we bring nature back to life.
                            Veel natuurgebieden hebben het zwaar te verduren. Allemaal op hun eigen manier.
                            Natuurherstel in deze regios is essentieel om bedreigde dier- en plantsoorten te behouden.
                </p>
            </div>
        </section>
        <section id="foto">
            <h2>Foto's van bedreigde diersoorten</h2>
            <div class="foto-grid">
                <figure>
                    <img src="Media/Elephants.jpg" alt="Elephants">
                </figure>
                <figure>
                    <img class="transparent" src="Media/Redpanda.jpg" alt="Red Panda">
                </figure>
                <figure>
                    <img class="transparent" src="Media/Rppells-vulture-sunbathing.jpg" alt="Rppells vulture sunbathing">
                </figure>
                <figure>
                    <img src="Media/Pygmy-Hippo-baby.jpg" alt="Pygmy Hippo Baby">
                </figure>
            </div>
        </section>
        <hr class="gradient-line">
        <section id="letterblokjes">
            <h2>Letterblokjes</h2>
            <div class="blokjes-grid">
                <div class="blokje">
                    <div class="cirkel">L</div>
                </div>
                <div class="blokje">
                    <div class="cirkel">O</div>
                </div>
                <div class="blokje">
                    <div class="cirkel">I</div>
                </div>
            </div>
            <div class="blokjes-grid">
                <div class="blokje">
                    <div class="cirkel">L</div>
                </div>
                <div class="blokje">
                    <div class="cirkel">O</div>
                </div>
                <div class="blokje">
                    <div class="cirkel">I</div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>


CSS:
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
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header {
    background-color: #33af6d;
    width: 100%;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 0;
}

nav ul li {
    flex: 1;
    text-align: center;
    position: relative;
}

nav ul li:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #e5f1f8;
}

nav ul li a {
    color: #e5f1f8;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    display: block;
    transition: background 0.3s;
}

nav ul li a:hover {
    background-color: #299b5e;
}

main {
    width: 100%;
    max-width: 1440px;
    padding: 20px;
}

section {
    margin: 20px 0;
}

h1, h2 {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.artikel-content {
    column-count: 1;
    column-gap: 20px;
}

.artikel-content p::before {
    content: '\2605';
}
@media(min-width: 320px){

}
@media(min-width: 768px) {
    .artikel-content {
        column-count: 3;
        column-gap: 20px;
        border-left: 1px solid red;
        border-right: 1px solid red;
        padding: 0px 10px;
    }
}

.foto-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foto-grid img {
    width: 100%;
    height: 100%;
    margin: 0;
    align-items: center;
}

.foto-grid img.transparent {
    opacity: 0.7;
}

@media(min-width: 768px) {
    .foto-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .foto-grid figure {
        width: calc(50% - 10px);
    }
}

@media(min-width: 1024px) {
    .foto-grid figure {
        width: calc(25% - 10px);
    }
}

.gradient-line {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, black, white, black);
    margin: 20px 0;
}

.blokjes-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blokje {
    background-color: #33af6d;
    border: 1px solid #df5200;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.cirkel {
    width: 50px;
    height: 50px;
    background-color: #e5f1f8;
    border: 2px solid #df5200;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-family: "Orbitron", sans-serif;
    font-size: 24px;
}

@media screen and (min-width: 1024px) {
    .blokjes-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}
Gewijzigd op 03/09/2024 09:59:27 door Alexander Tobe
 
PHP hulp

PHP hulp

08/11/2024 23:07:25
 
Alexander Tobe

Alexander Tobe

09/09/2024 09:59:50
Quote Anchor link
Niemand die de oplossing heeft voor de weergave van met name 320px en de letterblokjes?
 
Ward van der Put
Moderator

Ward van der Put

09/09/2024 10:52:14
Quote Anchor link
Jawel hoor, maar bij huiswerkopgaven voor een LOI-cursus zijn we terughoudend, omdat het bedoeling is dat je zelf je huiswerk maakt — zodat je er wat van leert.
 
- Ariën  -
Beheerder

- Ariën -

09/09/2024 10:54:02
Quote Anchor link
En daarnaast kan ik mij indenken dat je na zes dagen wel een oplossing hebt kunnen vinden. Ik zie hier niet echt wat zelfonderzoek voorbij komen. Een klein issue kunnen we vrijwillig naar kijken, maar het siert wel als je zelf ook met oplossingen komt.

Maar als het een hele eisenlijst is. Dan geef ik zo'n topic weinig tot geen enkele kans.
Gewijzigd op 09/09/2024 10:55:08 door - Ariën -
 
Alexander Tobe

Alexander Tobe

10/09/2024 10:37:48
Quote Anchor link
- Ariën - op 09/09/2024 10:54:02:
En daarnaast kan ik mij indenken dat je na zes dagen wel een oplossing hebt kunnen vinden. Ik zie hier niet echt wat zelfonderzoek voorbij komen. Een klein issue kunnen we vrijwillig naar kijken, maar het siert wel als je zelf ook met oplossingen komt.

Maar als het een hele eisenlijst is. Dan geef ik zo'n topic weinig tot geen enkele kans.


Duss je laat mijn op 6 augustus geopende topic een maand lopen en als ik dan vraag op 2 september of het goed is als ik een nieuw topic openen die specifieker is zeg je zelf
Quote:
Als je een nieuw topic wilt openen die wat beperkter is dan je vorige topic, van vind ik het prima.


En nu zeg je na een week dat ik het zelf in die 6 dagen wel had kunnen vinden?

De suggestie dat ik zelf niks doe om het op te lossen slaat nergens op ik heb elke werkdag 2 uur voor deze studie en heb voor ik het topic op 6 augustus openen die 2 uur gebruikt elke dag om deze problemen oplossen.

Dat ik sindsdien bij opstarten van de pc iets probeer en als dat niets oplevert ik naar een andere module ga waarmee ik in ieder geval niet stil staat in de complete studie lijkt mij niet onlogisch.

Ik kreeg dit forum zelfs als tip als ik er niet uitkwam...

Terug naar het topic;
Al word maar geholpen bij de 320px-versie en de blokjes.
 



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.