Footer onder Absolute DIV element
Maar maak ik de div-elementen van de content Absolute dan komt de Footer in het midden te staan.
Punt is dat al mijn div elementen Absolute moeten zijn. En ik wil hiervoor geen Bootstrap gebruiken.
Ik hoop dat iemand mij op weg kan helpen.
Een simpel voorbeeld hieronder,
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
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
<style>
.page-container {
z-index: 1;
position: relative;
min-height: 100vh;
background-color:silver;
}
.content-wrap {
padding-bottom: 2.5rem;
}
.footer_page {
position: absolute;
background-color:aqua;
left:0px;
bottom: 0;
width: 100%;
height: 2.5rem;
}
.p1 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:red;
}
.p2 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:blue;
}
.p3 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:green;
}
.p4 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:yellow;
}
.content {
z-index: 3;
position: relative;
}
</style>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="content">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
<div class="footer_page">
<!-- all other footer content -->
</div>
</div>
</div>
</body>
</html>
.page-container {
z-index: 1;
position: relative;
min-height: 100vh;
background-color:silver;
}
.content-wrap {
padding-bottom: 2.5rem;
}
.footer_page {
position: absolute;
background-color:aqua;
left:0px;
bottom: 0;
width: 100%;
height: 2.5rem;
}
.p1 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:red;
}
.p2 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:blue;
}
.p3 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:green;
}
.p4 {
position: absolute;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:yellow;
}
.content {
z-index: 3;
position: relative;
}
</style>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="content">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
<div class="footer_page">
<!-- all other footer content -->
</div>
</div>
</div>
</body>
</html>
Gewijzigd op 13/03/2021 23:17:21 door Peter Brok
Alvast bedankt!
Gewijzigd op 13/03/2021 23:10:10 door - Ariën -
Gewijzigd op 13/03/2021 23:20:07 door Peter Brok
Waarom ???
Je kunt toch gewoon in je layout een absolute div maken?
Kun je er een kort stukje (je layout) HTML bijvoegen?
Maar als je die van 'relative' naar 'absolute' zet, dan wordt de div 0x0 pixels groot, omdat je geen breedte hebt opgegeven.
Je kunt width:100%; gebruiken, maar ik zou eerder kiezen voor left:0;right:0; omdat het iets uitmaakt met marges.
Als je absolute posities wilt opgeven is het handig om zo vroeg mogelijk een keuze te maken in het CSS box model, met box-sizing:border-box; (of box-sizing:content-box;), zie ook https://developer.mozilla.org/nl/docs/Web/CSS/box-sizing
Ad Fundum op 14/03/2021 15:51:43:
In je voorbeeld heb je de CSS class "page-container" met een minimale hoogte van 100vh.
Maar als je die van 'relative' naar 'absolute' zet, dan wordt de div 0x0 pixels groot, omdat je geen breedte hebt opgegeven.
Je kunt width:100%; gebruiken, maar ik zou eerder kiezen voor left:0;right:0; omdat het iets uitmaakt met marges.
Als je absolute posities wilt opgeven is het handig om zo vroeg mogelijk een keuze te maken in het CSS box model, met box-sizing:border-box; (of box-sizing:content-box;), zie ook https://developer.mozilla.org/nl/docs/Web/CSS/box-sizing
Maar als je die van 'relative' naar 'absolute' zet, dan wordt de div 0x0 pixels groot, omdat je geen breedte hebt opgegeven.
Je kunt width:100%; gebruiken, maar ik zou eerder kiezen voor left:0;right:0; omdat het iets uitmaakt met marges.
Als je absolute posities wilt opgeven is het handig om zo vroeg mogelijk een keuze te maken in het CSS box model, met box-sizing:border-box; (of box-sizing:content-box;), zie ook https://developer.mozilla.org/nl/docs/Web/CSS/box-sizing
Toevoeging op 14/03/2021 20:59:15:
Onderstaande heb ik net weer geprobeerd. P1 tot P4 zijn relative. Je ziet dat netjes vier blokken onder elkaar verschijnen met daaronder de Footer. Als ik nu P1 tot P3 weghaal zodat er nog 1 blok overblijft staat de footer netjes onderin het scherm.
Maar maak ik nu P1 tot P4 absolute, dan staat de Footer ergens halverwege het scherm.
Ik heb left: 0 right:0 en width: 100% geprobeerd maar dat krijg ik niet werkend.
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
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
<html>
<body>
<style>
.page-container {
z-index: 1;
position: relative;
min-height: 100vh;
background-color:silver;
/*left:0;right:0*/
}
.content-wrap {
padding-bottom: 2.5rem;
}
.footer_page {
position: absolute;
background-color:aqua;
left:0px;
bottom: 0;
width: 100%;
height: 2.5rem;
}
.p1 {
position: relative;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:red;
}
.p2 {
position: relative;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:blue;
}
.p3 {
position: relative;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:green;
}
.p4 {
position: relative;
top:10px;
left:10px;
width: 300px;
height: 300px;
background-color:yellow;
}
.content {
z-index: 3;
position: relative;
}
</style>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="content">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
<div class="footer_page">
<!-- all other footer content -->
</div>
</div>
</div>
</body>
</html>
Toevoeging op 14/03/2021 21:22:12:
Frank Nietbelangrijk op 14/03/2021 10:08:40:
>> Punt is dat al mijn div elementen Absolute moeten zijn. En ik wil hiervoor geen Bootstrap gebruiken.
Waarom ???
Je kunt toch gewoon in je layout een absolute div maken?
Kun je er een kort stukje (je layout) HTML bijvoegen?
Waarom ???
Je kunt toch gewoon in je layout een absolute div maken?
Kun je er een kort stukje (je layout) HTML bijvoegen?
Quote:
Kan je voorbeeld voor mij posten?
Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?
Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG
Gewijzigd op 14/03/2021 22:21:41 door Frank Nietbelangrijk
Frank Nietbelangrijk op 14/03/2021 22:21:21:
Ik krijg het enkel voor elkaar als ik een parent div maak die een minimale hoogte heeft. Het is verre van ideaal. Maar nogmaals mijn vraag: Waarom wil of moet je met absolute div's werken? Je suggereert dat Bootstrap dat ook doet maar dat is helemaal niet zo.
Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?
Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG
Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?
Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG
Quote:
Ik heb het linkje geprobeerd, maar dat werkt helaas ook niet. Jammer genoeg is mijn probleem nog niet opgelost. :-(
Ik heb het linkje geprobeerd, maar dat werkt helaas ook niet. Jammer genoeg is mijn probleem nog niet opgelost. :-(
Quote:
Hoi, het zal ongetwijfeld aan mijn programmeer capaciteiten liggen, dat meen ik ook nog, maar ik heb 18 div elementen die een foto, een link, een stuk tekst etc. bevatten.
Ik weet niet hoe ik dat netjes moet krijgen zonder het absoluut te stylen.
Foto aan de linkerkant, tekst boven in, daar onder een link.Dan is het de bedoeling dat de die div blokken overal neergzet kunnen worden, dus op elke plek op het scherm. Met Media zorg ik er dan voor dat het per schermafbeelding klopt. Eigenlijk is het hele project al zoals ik het wil, alleen die Footer nog....................
Ik weet niet hoe ik dat netjes moet krijgen zonder het absoluut te stylen.
Foto aan de linkerkant, tekst boven in, daar onder een link.Dan is het de bedoeling dat de die div blokken overal neergzet kunnen worden, dus op elke plek op het scherm. Met Media zorg ik er dan voor dat het per schermafbeelding klopt. Eigenlijk is het hele project al zoals ik het wil, alleen die Footer nog....................
Toevoeging op 15/03/2021 00:16:12:
Peter Brok op 15/03/2021 00:14:08:
Frank Nietbelangrijk op 14/03/2021 22:21:21:
Ik krijg het enkel voor elkaar als ik een parent div maak die een minimale hoogte heeft. Het is verre van ideaal. Maar nogmaals mijn vraag: Waarom wil of moet je met absolute div's werken? Je suggereert dat Bootstrap dat ook doet maar dat is helemaal niet zo.
Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?
Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG
Met andere woorden: wat is je werkelijke probleem? Wat probeer je te bereiken?
Oh het linkje: https://codepen.io/frankbeen/pen/MWbxEXG
Quote:
Hoi, het zal ongetwijfeld aan mijn programmeer capaciteiten liggen, dat meen ik ook nog, maar ik heb 18 div elementen die een foto, een link, een stuk tekst etc. bevatten.
Ik weet niet hoe ik dat netjes moet krijgen zonder het absoluut te stylen.
Foto aan de linkerkant, tekst boven in, daar onder een link.Dan is het de bedoeling dat de die div blokken overal neergzet kunnen worden, dus op elke plek op het scherm. Met Media zorg ik er dan voor dat het per schermafbeelding klopt. Eigenlijk is het hele project al zoals ik het wil, alleen die Footer nog....................
Ik weet niet hoe ik dat netjes moet krijgen zonder het absoluut te stylen.
Foto aan de linkerkant, tekst boven in, daar onder een link.Dan is het de bedoeling dat de die div blokken overal neergzet kunnen worden, dus op elke plek op het scherm. Met Media zorg ik er dan voor dat het per schermafbeelding klopt. Eigenlijk is het hele project al zoals ik het wil, alleen die Footer nog....................
Quote:
Ps, ik zie nu pas wat je gemaakt hebt via de link, ik ga daar morgen naar kijken, dank je wel.
Gewijzigd op 15/03/2021 15:17:28 door Peter Brok
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#footer {
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
font-size:80%;
z-index:1000;
}
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
font-size:80%;
z-index:1000;
}
Paul Ulje op 16/03/2021 15:16:58:
Hoi Peter, ik snap niet wat precies je wilt, maar als je een voettekst blijvend zichtbaar onder op je scherm gecentreerd wilt hebben is 'fixed' de aangewezen weg. Zo gebruik ik hem.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#footer {
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
font-size:80%;
z-index:1000;
}
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
font-size:80%;
z-index:1000;
}
Quote:
Dat lijktt werken! Niet zoals ik eigenlijk wil, maar ik ga hier verder wel naar kijken.
Toevoeging op 16/03/2021 23:55:06:
Peter Brok op 16/03/2021 21:25:34:
Paul Ulje op 16/03/2021 15:16:58:
Hoi Peter, ik snap niet wat precies je wilt, maar als je een voettekst blijvend zichtbaar onder op je scherm gecentreerd wilt hebben is 'fixed' de aangewezen weg. Zo gebruik ik hem.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#footer {
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
font-size:80%;
z-index:1000;
}
position:fixed;
bottom:0px;
margin-left:auto;
margin-right:auto;
font-size:80%;
z-index:1000;
}
Quote:
Dat lijkt te werken! Niet zoals ik eigenlijk wil, maar ik ga hier verder wel naar kijken.
Dit topic is gesloten.