Beste ik begon sinds kort met html en css werken ik probeer een grid te maken ik volg via youtube hoe dat moet maar nu alleen werkt het wel met mijn html maar mijn css doet nie wat ik vraag ik wou mijn grid achtergrond kleur groen doen maar die heeft geel en roze weer ik weet niet wat ik fout doet en ondertussen ben ik nog maar beginenling dus als je me helpen graag en als je het niet goed snap hier is de html en css code mvg Johan
...
code:
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
| <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<body>
<title>WebProgramming</title>
<a href="kit.html" style="border: 4px solid black; display: inline-block; padding: 6px;">Ga naar de pagina kit.html</a>
<h1>James</h1>
<div class="container">
<div>Jackie James</div>
<div>Tito </div>
<div>Olivier</div>
<div>Mats</div>
<div>Quinten</div>
<div>Dave</div>
<div>Kim</div>
<div>Lor</div>
<div>Jacob</div>
</div>
}
<p>Dit is James</p>
<ul style="list-style-type:disc">
<li>Jim</li>
<li>Fred</li>
<li>Cody</li>
<table bgcolor="black" wdith"700">
<tr bgcolor="gray">
<th width="100">Jack</th>
<th width="100">Miz</th>
<th width="100">Fack</th>
</tr>
<tr bgcolor="lightgray" align="center">
<td>Closed</td>
<td>3-5</td>
<td>3-5</td>
<td>3-5</td>
<table bgcolor="Yellow" wdith"700">
<tr>
<th width="100">Scampis</th>
<th width="100">Noedels</th>
<th width="100">Rijst</th>
</tr>
<tr>
<td>Johan</td>
<td>vind die eten lekker</td>
</tr>
<tr>
<tr bgcolor="lightgray" align="center">+++
<td>open</td>
<td>Gesloten</td>
<tr bgcolor="lightgray" align="center">
</table>
<tr></tr>
<tr></tr>
</table>
<table>
<tr>
<tr bgcolor="lightgray" align="center">
<td>Dit is een link</td>
<td>
<a href="https://www.codecenter.nl/">Klik hier</a>
</td>
</tr>
</table>
<img src="ezel.jpg" alt="Beschrijving van de afbeelding" style="float: left; margin-right: 15px;">
<p>ik ben Sean de ezel en ik eet graag appels met mayonnaise </p>
<!DOCTYPE html>
<html lang="nl">
<head>
<div class="cirkel"></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/zWLi_18NyUA?si=sjcWgZ0hhv56auQ0" 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 class="container">
<div class="grid">
<div calss="box">
<h2>Tool</h2>
<div calss="box">
<h2>Tool</h2>
<div class="row dude">
/div>
<div calss="box">
<h2>Tool</h2>
<div class="row dude2">
/div>
<div class="row dude3">
<div calss="box">
<h2>Tool</h2>
<div calss="box">
<h2>Tool</h2>
<div calss="box">
<h2>Tool</h2>
</body>
</html>
</ul>
</body>
</head>
</html> |
code:
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
| h1 {
color: red;
font-family: Palatino Linotype, 'GR Times New Roman', Gentium, serif;
}
p {
color: yellow; /* Stelt de kleur van alinea's in op groen */
}
li {
color: pink; /* Of een specifieke hexadecimale code zoals #FFC0CB */
}
body {
background-color: blue; /* Stelt de achtergrond van het hele document in op blauw */
display: grid;
grid-template-colums: 20vw 15vw 15vw 20vw;
grid-template-rows: 10vh 45vh auto;
}
#nav
background-color yellow;
grid-colum 2 /6;
grid-row: 1 /2;
}
#storyleft {
background-color: green;
grid-column: 1 / 4;
grid-row: 2 / 3;
}
#storyright {
background-color: purple;
grid-column: 1 / 4;
grid-row: 2 / 3;
}
#article1 {
background-color: gray;
grid-column: 1 / 4;
grid-row: 2 / 3;
}
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: yellow;
padding: 5px;
}
.container > div {
background-color: #FFC0CB;
border: 1px solid black;
padding: 5px;
font-size: 35px;
text-align: center;
.cirkel {
width: 100px; /* Bepaalt de breedte van het element */
height: 100px; /* Bepaalt de hoogte van het element */
background-color: yellow; /* Kleur van de cirkel */
border-radius: 50%; /* Maakt het element rond */
}
.container{
width: 80%;
margin: 0 auto;
background-color: white;
padding: 20px;
}
.row{
display: grid;
margin: 20px;
gap: 20px;
}
.box{
background: #00FF00
padding: 50px;
border-radius: 15px;
}
.row dude{
grid-template-columns: 6fr 6fr;
}
.row dude2{
grid-template-columns: 3fr 6fr 3fr;
}
.row dude3{
grid-template-columns: 6fr 6fr;
} |
...
:strip_icc():strip_exif()/u/284419/Mexican%2520Wolf%2520Klein.jpg?f=community)
/u/102105/crop56f481fe1f74f.png?f=community)
Dit topic is gesloten.