Lettertypes werken niet en lay-out klopt niet.

Overzicht

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Alexander Tobe

Alexander Tobe

06/08/2024 11:00:07
Anchor link
Voor een opdracht moet ik een website veranderen.
Ik heb inmiddels 28 punten opgelost maar 2 punten kom ik niet uit.
Gebruik van grid, tabellen en Java(script) mag niet.

Namelijk de lettertypes veranderen werkt niet en de website lay-out bij andere venstergrootte klopt niet.

Er stonden 3 lettertypes ingesteld en deze moet worden gewijzigd maar welke google-link van een lettertype ik ook pak ze veranderen niet.
In de code hieronder staat het nog zoals het was.

Dit staat erin de opdracht;
Gebruik drie verschillende lettertypes die u van Google haalt. De drie verschillende lettertypes gebruikt u voor:
- menu, lettertype 1
- letter in de cirkel, lettertype 2
- de rest, lettertype 3.

De website moet goed werken op een smartphone, tablet en laptop maar de uitlijning klopt niet.

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

Dit staat erin de opdracht;
Venstergrootte: 320px, 768px, 1024px, 1440px.

• Het menu moet met flexbox worden gemaakt. (Heb ik gedaan als het goed is.)
• 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.
• Onder de lijn staan letterblokjes die zijn voorzien van een kopje met een schaduweffect.
• 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.
• 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.

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=Montserrat:wght@700&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
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    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: 768px) {
    .artikel-content {
        column-count: 3;
        column-gap: 20px;
        border-left: 1px solid red;
        border-right: 1px solid red;
        padding: 0 10px;
    }
}

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

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

.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: 'Montserrat', sans-serif;
    font-size: 24px;
}

@media(min-width: 1024px) {
    .blokjes-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}
 
PHP hulp

PHP hulp

09/11/2024 18:17:37
 
- Ariën  -
Beheerder

- Ariën -

06/08/2024 11:18:27
Anchor link
Misschien is het handig om op JSfiddle te laten zien wat je tot nu toe hebt.
 
Alexander Tobe

Alexander Tobe

06/08/2024 11:47:17
Anchor link
Hierbij gedaan.
https://jsfiddle.net/q6gp1r35/

Foto's kan ik niet toevoegen volgens mij?
 
Alexander Tobe

Alexander Tobe

12/08/2024 09:52:42
Anchor link
Is er niemand die mij hierbij kan helpen?
 
- Ariën  -
Beheerder

- Ariën -

12/08/2024 10:18:34
Anchor link
Als ik in de developer-tool kijk, dan worden je fonts gewoon gebruikt.
 
Alexander Tobe

Alexander Tobe

12/08/2024 18:11:13
Anchor link
- Ariën - op 12/08/2024 10:18:34:
Als ik in de developer-tool kijk, dan worden je fonts gewoon gebruikt.


De lettertypes moeten worden gewijzigd en van die er nu staan naar een andere via google fonts maar als ik de link verander gebeurd er niks.

Het is ook een hele andere link in het bestand dan als ik er 1 uitzoeken.
 
- Ariën  -
Beheerder

- Ariën -

12/08/2024 21:27:50
Anchor link
Welke link? Leg eens uit?
 
Alexander Tobe

Alexander Tobe

13/08/2024 10:10:11
Anchor link
Rij 7 tot 9 moeten links gewijzigd worden. Ik moet bijvoorbeeld het tweede lettertype wijzigen in een speels lettertype.

Nu staat er https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap maar als ik naar Google fonts ga kan ik nergens vinden waar ik de link van een andere lettertype kan kopiëren.

In het boek staat dat als je een lettertype hebt geselecteerd er rechtsboven een knop moet staan (blokjes met een plusje).
 
- Ariën  -
Beheerder

- Ariën -

13/08/2024 11:08:02
Anchor link
Websites willen soms wel eens veranderen, en dus loont het om even verder te kijken dan de manual voorschrijft.
Als ik bijvoorbeeld naar het font Lobster kijk, dan zie ik rechtsboven een grote knop met 'Get Font', warana je op 'Embed code' drukt.

De stappen wijzen zich dan vanzelf.
 
Alexander Tobe

Alexander Tobe

14/08/2024 09:56:14
Anchor link
Bedankt voor de hulp.

Weer een voorbeeld waarom het boek waardeloos is.
En heb de Embed code knop helemaal over het hoofd gezien terwijl ik aan het zoeken was.

Dat lost dat probleem op.

Hopelijk is er nog iemand die mij met het venstergrootte probleem kan helpen want wat ik ook probeer ik krijg ze niet in lijn zoals ze het willen.

Ik zag trouwens wel dat ik per ongeluk de 320px-sectie heb verwijderd toen ik aan het proberen was.

Heb dat nog even aangepast bij jsfiddle: https://jsfiddle.net/7qhxkn1L/
Gewijzigd op 14/08/2024 09:59:38 door Alexander Tobe
 
- Ariën  -
Beheerder

- Ariën -

14/08/2024 10:05:09
Anchor link
Websites, zoals Google Fonts, veranderen gewoon, en hoewel de functionaliteit behouden blijft maakt dat een boek heus niet waardeloos hoor. Pas als het dingen beschrijft die niet meer relevant zijn, zou ik het waardeloos noemen. Zoals een boek wat over PHP 4 gaat, ofzo. ;-)
Gewijzigd op 14/08/2024 10:05:28 door - Ariën -
 
Adoptive Solution

Adoptive Solution

14/08/2024 10:26:36
Anchor link
Hier kan je de venstergrootte van je website testen.

http://responsivedesignchecker.com/
 
Alexander Tobe

Alexander Tobe

14/08/2024 10:38:22
Anchor link
Adoptive Solution op 14/08/2024 10:26:36:
Hier kan je de venstergrootte van je website testen.

http://responsivedesignchecker.com/


Testen is geen probleem. Dat kan met inspecteren en bovenaan de venstergrootte aanklikken.
De lay-out bij de verschillende venstergrootte is het probleem.
De code klopt niet.

Kan trouwens zonder url niet testen op die website en de bestanden staan natuurlijk op mijn pc zelf.
 
Adoptive Solution

Adoptive Solution

14/08/2024 11:42:43
Anchor link
Hier aanmelden voor gratis webhosting.

https://byet.host/free-hosting/news
 
Alexander Tobe

Alexander Tobe

15/08/2024 09:55:43
Anchor link
Adoptive Solution op 14/08/2024 11:42:43:
Hier aanmelden voor gratis webhosting.

https://byet.host/free-hosting/news


Wil niet sarcastisch klinken maar ik zie precies dezelfde problemen als bij inspecteren die nog steeds moeten worden opgelost maar kan ze nu ook in venstergrootte zien die niet gevraagd worden.

Kom met deze suggestie duss niks verder.
 
Adoptive Solution

Adoptive Solution

15/08/2024 11:38:43
Anchor link
Zet de webpagina op de server zodat iedereen zelf kan zien hoe het eruit ziet.
 
Alexander Tobe

Alexander Tobe

16/08/2024 09:58:45
Anchor link
Adoptive Solution op 15/08/2024 11:38:43:
Zet de webpagina op de server zodat iedereen zelf kan zien hoe het eruit ziet.


Ik kan er niet meer bij op die free hosting website.
Nergens een inlog te vinden en nieuwe aanmaken gaat ook niet, krijg geen e-mail.
 
- Ariën  -
Beheerder

- Ariën -

16/08/2024 10:28:57
Anchor link
Vul op Google in: "Free website hosting", en je vindt genoeg.
 
Adoptive Solution

Adoptive Solution

16/08/2024 10:36:21
 
Jan Koehoorn

Jan Koehoorn

16/08/2024 14:23:50
Anchor link
Op regel 158 van je CSS staat per ongeluk een spatie in het woord 'media', tussen de 'i' en de 'a'. Maak daar eens dit van:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
@media screen and (min-width: 1024px) {
    .blokjes-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}
 
Alexander Tobe

Alexander Tobe

16/08/2024 18:58:02
Anchor link
Adoptive Solution op 16/08/2024 10:36:21:


Ik weet niet wat ik verkeerd heb gedaan maar hij zegt nu dat het niet bestaat.
Ik heb een andere gevonden die volgens mij werkt ga het zo uitproberen.

Jan Koehoorn op 16/08/2024 14:23:50:
Op regel 158 van je CSS staat per ongeluk een spatie in het woord 'media', tussen de 'i' en de 'a'. Maak daar eens dit van:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
@media screen and (min-width: 1024px) {
    .blokjes-grid {
        flex-direction: row;
        justify-content: space-around;
    }
}


Media is alleen in de jsfiddle-versie, in de versie in de eerste post en in mijn bestand is het niet, heb wel 'screen and' toegevoegd maar ze blijven klein en niet schermvullend.


Toevoeging op 17/08/2024 18:24:28:

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

http://alext.free.nf/
 

Pagina: 1 2 volgende »

 

Dit topic is gesloten.



Overzicht

 
 

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.