Hoe krijg ik de witte achtergronden op de afbeelding en naast de tabel.
Ik ben vandaag in de goede richting gekomen, maar kan er nog steeds niet achter komen hoe ik het witte achtergrondgedeelte op de afbeelding krijg.
Dit staat erin de opdracht;
"een transparante rand om een achtergrondafbeelding en plaats daar wat tekst in. Plaats een dunne zwarte rand om het item. Deze beslaat precies de helft van de breedte van het blok."
Ik heb dus achtergrondafbeelding met text maar nog geen witte achtergrond zoals in het voorbeeld hieronder.
Daarnaast moet ik dus nog de achtergrondafbeelding naast de tabel krijgen.
Ik mag geen flex- en grid-technieken gebruiken.
Minimaliseer het gebruik van div, gebruik het alleen als er geen ander geschikt element is.
Dit is het voorbeeld dat ze mij hebben gegeven.
** spamknip **
Ik hoef alleen maar achtergrond + tekst en tabelgedeelte goed te maken.
Code (php)
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
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
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Opdracht Lay-out - boxmodel en weergavemodel</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Spelletjes</h1>
<div class="div1">
<h2>Bordspellen</h2>
<figure>
<img class=scaled src="images/Schaakbord.jpg" alt="Schaakbord met enkele schaakstukken">
<figcaption>Schaakbord met enkele schaakstukken</figcaption>
</figure>
<div class="block">
<div class="text">Hiernaast staat een lijst van een aantal bordspellen.</div>
</div>
<table class="games">
<tr>
<td class="rijgroep">Naam</td>
<td class="rijgroep" colspan="3">Leeftijd (van tot)</td>
<td class="rijgroep" colspan="3">Aantal spelers (min max)</td>
</tr>
<tr>
<td class="naam">Monopoly</td>
<td class="leeftijd">8</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">6</td>
</tr>
<tr>
<td class="naam">30 seconds</td>
<td class="leeftijd">12</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">3</td>
<td class="scheiding">-</td>
<td class="spelers">20</td>
</tr>
<tr>
<td class="naam">De kolonisten van Catan</td>
<td class="leeftijd">10</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">3</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Levensweg</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Rummikub</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Statego</td>
<td class="leeftijd">8</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">2</td>
</tr>
<tr>
<td class="naam">Risk</td>
<td class="leeftijd">10</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">5</td>
</tr>
<tr>
<td class="naam">Mens erger je niet!</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">6</td>
</tr>
</table>
</div>
<div class="div2">
<h3>Schaakbord</h3>
<table class="chess">
<tr>
<td class="white">♜</td>
<td class="grey">♞</td>
<td class="white">♝</td>
<td class="grey">♛</td>
<td class="white">♚</td>
<td class="grey">♝</td>
<td class="white">♞</td>
<td class="grey">♜</td>
</tr>
<tr>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
</tr>
<tr>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
</tr>
<tr>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
</tr>
<tr>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
</tr>
<tr>
<td class="grey">♖</td>
<td class="white">♘</td>
<td class="grey">♗</td>
<td class="white">♔</td>
<td class="grey">♔</td>
<td class="white">♗</td>
<td class="grey">♘</td>
<td class="white">♖</td>
</tr>
</table>
</div>
</body>
</html>
<html lang="nl">
<head>
<title>Opdracht Lay-out - boxmodel en weergavemodel</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Spelletjes</h1>
<div class="div1">
<h2>Bordspellen</h2>
<figure>
<img class=scaled src="images/Schaakbord.jpg" alt="Schaakbord met enkele schaakstukken">
<figcaption>Schaakbord met enkele schaakstukken</figcaption>
</figure>
<div class="block">
<div class="text">Hiernaast staat een lijst van een aantal bordspellen.</div>
</div>
<table class="games">
<tr>
<td class="rijgroep">Naam</td>
<td class="rijgroep" colspan="3">Leeftijd (van tot)</td>
<td class="rijgroep" colspan="3">Aantal spelers (min max)</td>
</tr>
<tr>
<td class="naam">Monopoly</td>
<td class="leeftijd">8</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">6</td>
</tr>
<tr>
<td class="naam">30 seconds</td>
<td class="leeftijd">12</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">3</td>
<td class="scheiding">-</td>
<td class="spelers">20</td>
</tr>
<tr>
<td class="naam">De kolonisten van Catan</td>
<td class="leeftijd">10</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">3</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Levensweg</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Rummikub</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">4</td>
</tr>
<tr>
<td class="naam">Statego</td>
<td class="leeftijd">8</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">2</td>
</tr>
<tr>
<td class="naam">Risk</td>
<td class="leeftijd">10</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">5</td>
</tr>
<tr>
<td class="naam">Mens erger je niet!</td>
<td class="leeftijd">6</td>
<td class="scheiding">-</td>
<td class="leeftijd">99</td>
<td class="spelers">2</td>
<td class="scheiding">-</td>
<td class="spelers">6</td>
</tr>
</table>
</div>
<div class="div2">
<h3>Schaakbord</h3>
<table class="chess">
<tr>
<td class="white">♜</td>
<td class="grey">♞</td>
<td class="white">♝</td>
<td class="grey">♛</td>
<td class="white">♚</td>
<td class="grey">♝</td>
<td class="white">♞</td>
<td class="grey">♜</td>
</tr>
<tr>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
<td class="grey">♟</td>
<td class="white">♟</td>
</tr>
<tr>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
</tr>
<tr>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
</tr>
<tr>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
<td class="grey"></td>
<td class="white"></td>
</tr>
<tr>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
<td class="white">♙</td>
<td class="grey">♙</td>
</tr>
<tr>
<td class="grey">♖</td>
<td class="white">♘</td>
<td class="grey">♗</td>
<td class="white">♔</td>
<td class="grey">♔</td>
<td class="white">♗</td>
<td class="grey">♘</td>
<td class="white">♖</td>
</tr>
</table>
</div>
</body>
</html>
Code (php)
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
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
.div1 {
display: flow-root;
border: 3px solid silver;
margin-bottom: 10px;
}
.div2 {
height: 650px;
border: 3px solid silver;
}
h2 {
text-align: center;
font-size: 20px;
}
figure {
float: center;
width: 25%;
text-align: center;
text-indent: 0;
border: 2px silver solid;
margin: 0.2em;
padding: 0.2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
img.scaled {
width: 100%;
}
.block {
width: 50%;
height: auto;
float: left;
background-image: url(images/background.jpg);
background-size: cover;
background-position: center;
padding: 100px;
border: 1px solid #000;
border-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
border-image-slice: 1;
}
.block.text {
color: #000000;
font-size: 18px;
padding: 10px;
}
table.games {
border: 2px solid black;
width: 50%;
float: right;
TABLE { border-collapse: separate; border-spacing: 2px; }
TABLE, TD { border: solid 1px white; }
TD {color:black; padding: 2px; }
.rijgroep{
background-color: lightblue;
text-align: center;
font-weight: 700;
}
.naam{
background-color: peachpuff;
text-align: left;
}
.leeftijd{
background-color: sandybrown;
text-align: center;
}
.scheiding{
text-align: center;
}
.spelers{
background-color: orange;
text-align: center;
}
}
h3 {
text-align: center;
font-size: 20px;
padding-bottom: 25px;
}
table.chess{
border: 3px solid red;
border-spacing: 0px;
box-shadow:
0 0 0 15px white,
0 0 0 30px black;
text-align: center;
font-size: 35px;
margin-left: auto;
margin-right: auto;
}
.white{
background-color: white;
width: 60.5px;
height: 60.5px;
}
.grey{
background-color: grey;
width: 60.5px;
height: 60.5px;
}
display: flow-root;
border: 3px solid silver;
margin-bottom: 10px;
}
.div2 {
height: 650px;
border: 3px solid silver;
}
h2 {
text-align: center;
font-size: 20px;
}
figure {
float: center;
width: 25%;
text-align: center;
text-indent: 0;
border: 2px silver solid;
margin: 0.2em;
padding: 0.2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
img.scaled {
width: 100%;
}
.block {
width: 50%;
height: auto;
float: left;
background-image: url(images/background.jpg);
background-size: cover;
background-position: center;
padding: 100px;
border: 1px solid #000;
border-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
border-image-slice: 1;
}
.block.text {
color: #000000;
font-size: 18px;
padding: 10px;
}
table.games {
border: 2px solid black;
width: 50%;
float: right;
TABLE { border-collapse: separate; border-spacing: 2px; }
TABLE, TD { border: solid 1px white; }
TD {color:black; padding: 2px; }
.rijgroep{
background-color: lightblue;
text-align: center;
font-weight: 700;
}
.naam{
background-color: peachpuff;
text-align: left;
}
.leeftijd{
background-color: sandybrown;
text-align: center;
}
.scheiding{
text-align: center;
}
.spelers{
background-color: orange;
text-align: center;
}
}
h3 {
text-align: center;
font-size: 20px;
padding-bottom: 25px;
}
table.chess{
border: 3px solid red;
border-spacing: 0px;
box-shadow:
0 0 0 15px white,
0 0 0 30px black;
text-align: center;
font-size: 35px;
margin-left: auto;
margin-right: auto;
}
.white{
background-color: white;
width: 60.5px;
height: 60.5px;
}
.grey{
background-color: grey;
width: 60.5px;
height: 60.5px;
}
Edit:
Spam weggeknipt uit je post. Deze lijkt te zijn meegelift uit een copypaste van je imageuploader.
Graag daarop letten in het vervolg.
Graag daarop letten in het vervolg.
Gewijzigd op 24/06/2024 10:27:19 door - Ariën -
Alexander Tobe op 24/06/2024 10:21:33:
Ik moet een opdracht doen, maar ik ben de afgelopen weken uren bezig geweest.
Uren bezig geweest in een periode van weken? Ik wilde dat ik zoveel vrije tijd had!
Alexander Tobe op 24/06/2024 10:21:33:
Ik ben vandaag in de goede richting gekomen, maar kan er nog steeds niet achter komen hoe ik het witte achtergrondgedeelte op de afbeelding krijg.
Dit staat erin de opdracht;
"een transparante rand om een ??achtergrondafbeelding en plaats daar wat tekst in. Plaats een dunne zwarte rand om het item. Deze beslaat precies de helft van de breedte van het blok."
Dit staat erin de opdracht;
"een transparante rand om een ??achtergrondafbeelding en plaats daar wat tekst in. Plaats een dunne zwarte rand om het item. Deze beslaat precies de helft van de breedte van het blok."
Een achtergrondafbeelding regel je met CSS background-image, en als je geen flex mag gebruiken is dat echt achterlijk, echt iets voor een docent om zoiets kinderachtigs te doen. Aan de andere kant kan het ook prima met een float op een <div> met een width: 50%; of zelfs een <table>.
Maar dat is dus enorm achterhaald. Hebben jullie soms niets beters te doen?
Heb ook zeker niet alle tijd van de wereld maar 3x per week wel 1,5 uur.
Werd er ook helemaal gek van dat het zolang duurde want het boek wat ik heb staat vol tekst met weinig uitleg/voorbeelden.
Inmiddels heb ik contact gehad met de docent en ze rekent flex ook goed omdat float achterhaald is.
Ook wat aanwijzingen gehad.
Flex is trouwens het volgende hoofdstuk volgens mij dus dan kan ik het de volgende opdracht gebruiken.
Maar ben er zo klaar mee dat ik geen zin meer heb om het om te zetten.
Enige wat ik nu nog moet doen is die transparante rand goed krijgen alleen krijg ik dat witte blok achter de tekst niet goed.
Ik kan het morgenochtend uploaden maar wilde het eind morgenmiddag wel versturen dus dan heb ik al het antwoord nodig.
EDIT: code toegevoegd met afbeelding zoals ik het zie.
(je moet op dat blauwe dingetje links onder het plaatje drukken voor een groter versie.)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.block {
width: 50%;
height: 250px;
float: left;
background-image: url(images/background.jpg);
background-size: cover;
background-position: center;
border-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
border-image-slice: 1;
}
.text {
background-color: rgba(255, 255, 255);
font-size: 18px;
padding: 15px;
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
border: 50px solid rgb(255, 0, 0);
opacity: 0.5;
}
width: 50%;
height: 250px;
float: left;
background-image: url(images/background.jpg);
background-size: cover;
background-position: center;
border-image: linear-gradient(to left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%);
border-image-slice: 1;
}
.text {
background-color: rgba(255, 255, 255);
font-size: 18px;
padding: 15px;
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
border: 50px solid rgb(255, 0, 0);
opacity: 0.5;
}
Gewijzigd op 01/07/2024 09:47:03 door Alexander Tobe
Dat komt omdat je het hele blok transparant maakt met "opacity: 0.5;". Dat moet je niet doen.
Je moet de "opacity" en "border"-regels vervangen door "box-shadow" met een transparante kleur:
Code (php)
1
box-shadow: 0 0 0 50px #FF00007F;
#FF000077 is hexacimaal, en kan je ook schrijven als decimaal met rgba(255, 0, 0, 127);
Gewijzigd op 03/07/2024 06:47:00 door Ad Fundum
Heb de opdracht wel ingeleverd met die andere waarde.
Ook nog geen antwoord op gehad duss weet niet of ze dit ook wilde.
In ieder geval gewijzigd op mijn eigen pc.
Bedankt voor de hulp.
Ad Fundum op 03/07/2024 06:46:27:
#FF000077 is hexacimaal, en kan je ook schrijven als decimaal met rgba(255, 0, 0, 127);
Nooit geweten dat je hexadecimale notatie ook met 8 ipv 6 tekens kunt doen om de alpha aan te geven. Zie het hier nu ook; https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
Goede tip!
Ramon van Dongen op 04/07/2024 17:31:38:
Nooit geweten dat je hexadecimale notatie ook met 8 ipv 6 tekens kunt doen om de alpha aan te geven.
Goede tip!
Ad Fundum op 03/07/2024 06:46:27:
#FF000077 is hexacimaal, en kan je ook schrijven als decimaal met rgba(255, 0, 0, 127);
Nooit geweten dat je hexadecimale notatie ook met 8 ipv 6 tekens kunt doen om de alpha aan te geven.
Goede tip!
In dit geval kan het zelfs met vier tekens: #f007
Alexander Tobe op 24/06/2024 10:21:33:
Ik mag geen flex- en grid-technieken gebruiken.
En daarom worden we dus geen docent IT; voor je het weet heb je geen tijd meer om de laatste technieken bij te houden ;-)
Code (php)
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
font: 16px Verdana;
color: black;
height: 100vh;
background: black;
padding: 0;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 300px;
}
.left {
display: grid;
place-items: center;
background: url('phphulp.jpg') center center / cover no-repeat;
}
.transparent {
display: grid;
place-items: center;
width: 80%;
height: 100px;
background: rgba(255, 255, 255, .5);
padding: 40px;
}
.content {
display: grid;
place-items: center;
background-color: white;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="transparent">
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="right">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
font: 16px Verdana;
color: black;
height: 100vh;
background: black;
padding: 0;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 300px;
}
.left {
display: grid;
place-items: center;
background: url('phphulp.jpg') center center / cover no-repeat;
}
.transparent {
display: grid;
place-items: center;
width: 80%;
height: 100px;
background: rgba(255, 255, 255, .5);
padding: 40px;
}
.content {
display: grid;
place-items: center;
background-color: white;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="transparent">
<div class="content">Lorem ipsum dolor sit amet</div>
</div>
</div>
<div class="right">
<table>
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
Ik heb leren front-enden in de tijd dat je speciaal voor Internet Explorer speciale extra stylesheets moest maken, en conditional comments moest gebruiken. Iets horizontaal en verticaal centreren was een ramp.
De minst erge oplossing was toen:
parent position: relative geven
child postion: absolute geven, left: 50% en right: 50%
en vervolgens transform: translate gebruiken om het child element 50% te verschuiven langs de x- en de y-as.
Tegenwoordig (dus met grid) is het echt kip-simpel. Het kan met twee regels CSS:
Code (php)
1
2
2
display: grid;
place-items: center;
place-items: center;
Aanvulling: voor de image phphulp.jpg moet je zelf even een dummy image aanmaken.
Gewijzigd op 11/07/2024 21:50:29 door Jan Koehoorn
Zoals ik al eerder zei het boek is voor mij ook waardeloos vooral uitlegteksten en weinig voorbeelden en al helemaal geen voorbeelden waarmee je inzicht krijgt in de gevraagde onderdelen in opdrachten.
Nog 1 oefen-opdracht en eind-opdracht te gaan.
Niet met boeken, maar gewoon met wat er op het internet te vinden is.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
Meer dan hun posters heb je niet snel nodig.