:strip_exif()/u/65519/ava.gif?f=community)
Mijn vraag
Ik ben aan het experimenteren met HTML/CSS omdat ik een idee voor een webapp bij mijn game heb. Nu heb ik voor het laatst in 2012 iets gedaan met webdevelopment en dit leek me een mooi moment om weer wat nieuwe dingen te leren. Dus ben ik de documentatie ingedoken en daar kwam ik grid layouts tgen als fancy voor mij nieuw CSS ding. Ik moet zeggen dit is een hele stap vooruit ten opzicht van floating divjes positioneren.
Het prombleem waar ik echter tegen aan loop is dat er standaard een 8px marge ten opzichte van alle randen van de viewpoort aanwezig is! En met alle margin op 0px padding van de body op 0px en voor de zekerheid border op 0px; die rand blijft bestaan! ik krijg het voor links en rechts el weggehacked met margin -8px de header en linker bar. Maar voor de footer en rechter bar werkt dit niet. En dit lijkt me niet de echte oplossing...
het is vast iets super sufs maar loop er wel op vast. Stackoverflow en Google hiepen niet veel
/f/image/YP1wcXxQTZecc8KvZUp9qUgP.png?f=fotoalbum_large)
Ik ben aan het experimenteren met HTML/CSS omdat ik een idee voor een webapp bij mijn game heb. Nu heb ik voor het laatst in 2012 iets gedaan met webdevelopment en dit leek me een mooi moment om weer wat nieuwe dingen te leren. Dus ben ik de documentatie ingedoken en daar kwam ik grid layouts tgen als fancy voor mij nieuw CSS ding. Ik moet zeggen dit is een hele stap vooruit ten opzicht van floating divjes positioneren.
Het prombleem waar ik echter tegen aan loop is dat er standaard een 8px marge ten opzichte van alle randen van de viewpoort aanwezig is! En met alle margin op 0px padding van de body op 0px en voor de zekerheid border op 0px; die rand blijft bestaan! ik krijg het voor links en rechts el weggehacked met margin -8px de header en linker bar. Maar voor de footer en rechter bar werkt dit niet. En dit lijkt me niet de echte oplossing...
het is vast iets super sufs maar loop er wel op vast. Stackoverflow en Google hiepen niet veel
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
| <html>
<head>
<title>Test page</title>
<style>
.grid-container {
display: grid;
width: 1000px;
grid-template-columns: 200px auto 200px;
grid-template-rows: repeat(3, auto);
grid-gap: 0px;
margin: 0px;
padding: 0px;
border: 0px;
}
header {
background-color:aqua;
height: 48px;
grid-row: 1;
grid-column: 1 / 4;
}
sidebarLeft {
width: 200ox;
grid-row: 2;
grid-column: 1 / 2;
background-color: cadetblue;
}
feed {
min-height: calc(100vh - 144px);
grid-row: 2;
grid-column: 2 / 3;
background-color: white;
}
.contentBlock{
min-height: 150px;
margin: 6px;
border: 1px solid black;
border-radius: 5px;
padding: 6px
}
sidebarRight {
grid-row: 2;
grid-column: 3 / 4;
background-color: cadetblue;
}
footer {
height: 96px;
grid-row: 3;
grid-column: 1 / 4;
text-align: center;
margin-bottom: 0px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="grid-container">
<header>
header
</header>
<sidebarLeft>
sidebarLeft
</sidebarLeft>
<feed>
<div class="contentBlock">
contentBlock 1
</div>
<div class="contentBlock">
contentBlock 2
</div>
<div class="contentBlock">
contentBlock 3
</div>
<div class="contentBlock">
contentBlock 4
</div>
</feed>
<sidebarRight>
sidebarRight
</sidebarRight>
<footer>
footer
</footer>
</div>
</body>
</html> |
:fill(white):strip_exif()/f/image/YP1wcXxQTZecc8KvZUp9qUgP.png?f=user_large)
My Steam Profile (Name Switch) Worth: 889€ (225€ with sales)Games owned: 83
dan is je probleem opgelost 
