Mijn vraag
Beste mensen, ik ben nieuw hier dus, hallo! Ik ben 1 maand begonnen met programmeren in HTM & CSS voor mijn studie. We moeten een website maken waar je een product toont en wat informatie geeft, dus soort van als bol. Ik kwam een beetje vast, want de text die ik in de tweede section heb geplaats, komt rechts te staan bij de eerste section, terwijl het onder had moeten staan onder de border van de eerste section. Ik heb gaan controleren of de HTML hierarchie goed klopt en het moet kloppen. Ik denk persoonlijk niet dat het aan de CSS code ligt. Heb het ook naar ChatGPT gevraagd, maar natuurlijk wist ie het ook niet. Dus hierbij laat ik een afbeelding zien van de site en plak ik mijn code hieronder.
Relevante software en hardware die ik gebruik
Microsoft Visual Stuido Code
/f/image/gW1iv7QaHRiIRzzI6jF2qbFq.png?f=fotoalbum_large)
Alvast bedant voor het nadeken!
Beste mensen, ik ben nieuw hier dus, hallo! Ik ben 1 maand begonnen met programmeren in HTM & CSS voor mijn studie. We moeten een website maken waar je een product toont en wat informatie geeft, dus soort van als bol. Ik kwam een beetje vast, want de text die ik in de tweede section heb geplaats, komt rechts te staan bij de eerste section, terwijl het onder had moeten staan onder de border van de eerste section. Ik heb gaan controleren of de HTML hierarchie goed klopt en het moet kloppen. Ik denk persoonlijk niet dat het aan de CSS code ligt. Heb het ook naar ChatGPT gevraagd, maar natuurlijk wist ie het ook niet. Dus hierbij laat ik een afbeelding zien van de site en plak ik mijn code hieronder.
Relevante software en hardware die ik gebruik
Microsoft Visual Stuido Code
:fill(white):strip_exif()/f/image/gW1iv7QaHRiIRzzI6jF2qbFq.png?f=user_large)
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<img src="images/miraidom-2.png" class="Mirai" alt="miraidon">
<a href="#" class="Logoo">Logo</a>
<a href="#">Prijs</a>
<a href="#">Omschrijving</a>
<a href="#">Gelerateerde Producten</a>
</nav>
<header>
<h1>
Pokémon Violet
</h1>
</header>
<main>
<section class="intro">
<div class="gamecover">
<img src="images/violet.jpg" class="cover" alt="violet">
</div>
<div class="game-info">
<h2>
€59,98
</h2>
<h3 class="product-omschrijving">
Korte Productomschrijving:
Pokemon Violet is de nieuweste Pokemon game op de Nintendo Switch. Dit is de 9e generatie waarin
talloze
nieuwe Pokemon te ontdekken valt. Het is de eerste open-world Pokemon game, dus er staat een zeer
leuke
avontuur te wachten.
</h3>
<a href="#" class="Bestel">Bestellen</a>
</div>
</section>
<section class="extra-info">
<div class="punten">
<h2>
Plus-en minpunten
</h2>
<h3>
Voordeel
Nadeel
</h3>
</div>
<div class="informatie">
<h2>
Omschrijving:
</h2>
<h3>
Blablabla
</h3>
</div>
</section>
</main>
<footer>
</footer>
</body>
</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
| nav {
display: flex;
background-color: #a0c4ff;
padding: 20px;
border-bottom: 3px solid black;
}
a {
color: white;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
margin-right: 40px;
padding-right: 20px;
padding-left:20px;
padding-bottom: 10px;
padding-top: 10px;
}
body {
margin: 0px;
}
.Mirai {
width: 30px;
}
.Logoo {
background-color: #023e8a;
padding-right: 30px;
padding-left:30px;
padding-bottom: 10px;
padding-top: 10px;
}
h1 {
margin-left: 45px;
padding: 0 2px 20px 0;
font-family: Arial, Helvetica, sans-serif;
}
main {
display: flex;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
display: flex;
font-size: 15px;
}
.Bestel {
color:white;
background-color: black;
}
.intro {
display: flex;
align-content: center;
align-items: stretch;
padding: 60px;
gap: 50px;
border-bottom: 3px solid black;
width: 100%;
}
.game-info {
padding: 10px 40px 0 40px;
}
h3.product-omschrijving {
margin: -10px 0 20px;
padding:0;
white-space: pre-line;
}
.cover {
width: 250px;
border: 2px solid black;
} |
Alvast bedant voor het nadeken!
[ Voor 0% gewijzigd door Patesaus77 op 23-09-2023 22:31 . Reden: meer info ]
:strip_icc():strip_exif()/u/14853/bluepiSW.jpg?f=community)