Footer onder Absolute DIV element

Overzicht

Sponsored by: Vacatures door Monsterboard

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »

Freelance senior ICT ontwikkelaar (zzp)

Belastingdienst B/cao Startdatum inzet: 9-1-2023 Einddatum inzet: 31-12-2023 Uren per week: 36,00 Standplaats: Apeldoorn Max tarief: € 86,00 Team LIV is op zoek naar een enthousiaste, flexibele, multitaskende en hands-on ontwikkelaar met veel ervaring in het gedeeltelijk of volledig zelfstandig bepalen van ontwikkel- en realisatie aanpak. Onze nieuwe collega moet in staat zijn te werken in een hectische omgeving waarbij er sprake is van zeer verschillen realisatietrajecten voor wat betreft(technische)diepgang, startmoment (wel/geen beschrijvingen beschikbaar) en klantcontact. De gekozen ontwikkelmethodiek dient passend te zijn voor het op te lossen vraagstuk waarbij samenwerking met de testengineer in relatie tot Systeem integratie test

Bekijk vacature »

Java-softwaredeveloper

Wat je gaat doen: Dit ga je doen Daar kunnen we heel kort over zijn: software ontwikkelen met de agile-/scrumteams van toonaangevende organisaties. Zoals ministeries, gemeentes, financiële instellingen en retail- en energiebedrijven. En als het bij je past, begeleid je collega-developers in het ontwikkelproces. Doordat je tijdelijk aan een opdracht werkt, doe je in korte tijd veel mooie ervaringen op en leer je nieuwe technieken en tools kennen. Je teamleden werken bijvoorbeeld met Spring, JPA/Hibernate, AJAX, REST/JSON, GIT, AWS en TDD. Het interessante is dat jij volledig in control bent en zelf kiest welke opdrachten je oppakt. Het soort rol,

Bekijk vacature »

Medior Frontend developer

Wat je gaat doen: Of beter nog, wat wil jij doen? Bij DPA GEOS werken onze consultants als Frontend Developer in Agile teams bij onze klanten en zijn ze verantwoordelijk voor de grotere webapplicaties. Wil jij dit ook, want we zijn op zoek naar enthousiaste Frontend Developers om ons development team te versterken. Je draagt positief bij aan de teamgeest binnen een projectteam je kijkt verder dan je eigen rol. Eventueel begeleid je ook andere ontwikkelaars in het softwareontwikkelproces. Je gaat webapplicaties maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit

Bekijk vacature »

Java-softwaredeveloper

Wat je gaat doen: Dit ga je doen Daar kunnen we heel kort over zijn: software ontwikkelen met de agile-/scrumteams van toonaangevende organisaties. Zoals ministeries, gemeentes, financiële instellingen en retail- en energiebedrijven. En als het bij je past, begeleid je collega-developers in het ontwikkelproces. Doordat je tijdelijk aan een opdracht werkt, doe je in korte tijd veel mooie ervaringen op en leer je nieuwe technieken en tools kennen. Je teamleden werken bijvoorbeeld met Spring, JPA/Hibernate, AJAX, REST/JSON, GIT, AWS en TDD. Het interessante is dat jij volledig in control bent en zelf kiest welke opdrachten je oppakt. Het soort rol,

Bekijk vacature »

Freelance applicatieontwikkelaar (zzp)

Belastingdienst B/cao Startdatum : 2-1-2023 Tijdelijke functie, met optie op vast Aantal uren per week : 36 Standplaats in overleg : Apeldoorn Applicatieontwikkelaar bij het Ministerie van Financiën- Belastingdienst We zoeken een consultant/developer met ervaring in de ontwikkeling van back-end systemen. Als consultant heb je kennis en ervaring met de wijze waarop Open Formulieren is opgezet. Je bent een vraagbaak voor collega’s en deelt waar nodig je kennis. Je hebt ervaring met het werken in een open source omgeving. Je bent thuis in verschillende frameworks of je kunt je die snel eigen maken. Je hebt aantoonbaar ruime kennis van en

Bekijk vacature »

Junior stack developer

Vacaturebeschrijving: Python, PHP en C++. 3 termen die bij veel mensen direct voor vraagtekens in de ogen zorgen, maar jij weet precies waar ik het over heb! Gelukkig maar, anders werd het een moeilijk verhaal voor deze junior stack developer vacature. Hier krijg je de kans om het vak van A tot Z onder de knie te krijgen. Beginnend bij A natuurlijk. Wat je precies gaat doen? Van het opzetten van low codes tot het uitwerken van volledige workflows. Al je uitwerkingen komen in goed overleg met de klant tot stand. Voelt het als starter soms alsof je zoekt naar

Bekijk vacature »

Java Developer

Wat wij bieden Hybride werken, met als uitgangspunt 50% op kantoor en 50% vanuit huis; Flexibele werktijden en direct een contract voor onbepaalde tijd; Een goed salaris wat aansluit bij je kennis en ervaring; Een mobiliteitsbudget dat aansluit bij jouw manier van reizen; Opleidingsmogelijkheden op basis van behoefte en ambitie; dus geen vast budget; Een pensioenregeling, waar je niet verplicht aan hoeft bij te dragen; 20 vakantiedagen en daarnaast 4,7% van je salaris om flexibel in te vullen, bijvoorbeeld goed voor 7 extra vakantiedagen. Wat jij meeneemt Een hbo- of wo-diploma in een technische richting; Ervaring met het ontwikkelen van

Bekijk vacature »

Senior Integration Developer

Functieomschrijving As senior integration developer at Randstad Groep Nederland IT you play an integral role in innovating and optimising our processes and way of working. As we continue to move towards a more internationally connected tech environment and build new global platforms, our integration team continues to grow. You will join the APK team (Applicatie Koppelingen), consisting of business analysts, developers, a product owner and scrum master. Together you are responsible for a fundamental aspect of our applications, providing the basis for our other development teams. What will you do as senior integrations developer? As senior integrations developer you work

Bekijk vacature »

Integratie Ontwikkelaar

Dit ga je doen Je houdt je voornamelijk bezig met het maken en onderhouden van koppelingen tussen verschillende ERP systemen en de ESB (Enterprise Service Bus) van klanten. Je schakelt met de klanten om hen zo goed mogelijk van dienst te zijn. Je bent meer werkzaam met integratie producten dan met projecten. Je bent werkzaam voormaatschappelijk relevante organisaties. Je bent werkzaam in zelfsturende teams, waardoor je ook de mogelijkheid hebt om wat meer leidinggevende taken uit te kunnen voeren; Hier ga je werken Deze organisatie is er een waar je bij wilt horen! Lijkt jou het gaaf om de ultieme

Bekijk vacature »

Back-end PHP Developer

Dit ga je doen Her- en uitbouwen van het inhouse softwareplatform dmv PHP; Onderhouden van bovengenoemd platform in PHP; Sparren met het team; Meedenken over nieuwe functionaliteiten, security etc; Jouw input leveren aan het proces door op de hoogte te blijven van nieuwe ontwikkelingen etc. Hier ga je werken Onze klant, gevestigd in de omgeving van Alkmaar, levert wereldwijd oplossingen op het gebied van IT. Dag in dag uit werken zij met veel passie aan hun product waarmee ze streven naar verbeteringen binnen zorg. Voor onze klant zijn we op zoek naar een medior PHP Developer. Je komt te werken

Bekijk vacature »

Projectdeveloper circulariteit en duurzaamheid

Ben jij die netwerker en verbinder die opgaves voor duurzaamheid en circulariteit weet te vertalen naar resultaatgerichte programma's en projecten, in nauwe samenwerking met overheden, ondernemers en kennisinstellingen? Herken jij signalen uit de markt en weet je partijen hiervoor aan elkaar te verbinden die de ambities waarmaken? Heb jij een ondernemende mentaliteit en wil je werken aan het verhogen van het Bruto Twents Geluk? Dan zoekt de Twente Board jou! Functie omschrijving Wil jij werken aan dé economisch en maatschappelijk relevante thema's voor Twente? Wil jij organisaties en mensen binnen en buiten de regio met elkaar verbinden? Dat is namelijk

Bekijk vacature »

.NET Developer Medior Senior

Dit ga je doen Ontwikkelprocessen verder optimaliseren en verder ontwikkelen met C#; CI/CD-pipelines automatiseren; Herbruikbare componenten maken; Testen; Front-end pagina's gebruiksvriendelijk maken. Hier ga je werken Als .NET Developer kom jij terecht binnen een grote en internationale organisatie. Zij streven naar een positieve impact op de mens, milieu en maatschappij. Het bedrijf is oorspronkelijk een familiebedrijf en werkt aan de productie van hoogwaardige en technische systemen voor de gezondheidszorg. Momenteel willen zij betere ontwikkelprocessen creëren op internationaal gebied en staat kwaliteit en veiligheid voor hun op nummer 1! Als .NET Developer werk jij aan het ontwikkelen van verbeterde software voor

Bekijk vacature »

.NET Developer

Dit ga je doen Programmeren in .NET, Javascript & C# en ontwikkelen in Web Services, Windows Services en MS SQL Server; Zelfstandig verbanden maken Analyseren, testen, bugs fixen, reviewen en rapporteren; Juiste prioriteiten stellen en verantwoordelijkheid nemen; Op architectuur niveau meedenken; Af en toe klanten bezoeken. Hier ga je werken Voor onze relatie zijn wij opzoek naar een .NET ontwikkelaar met minimaal 3 jaar werkervaring. Je komt te werken in een groeiend bedrijf met betrokken collega's die zorgen voor een familiaire sfeer op de werkvloer. Als .NET ontwikkelaar word jij vanaf de eerste werkdag betrokken bij het gehele ontwikkelproces. De

Bekijk vacature »

Front-End Developer Design System

You work together with other development teams and designers to build and improve user experiences on a daily basis to make our customers happy. How do I become a Front-End Developer Design System at Coolblue? The Design System team at Coolblue is responsible for building interfaces and interactions that help our colleagues build coherent, seamless and high-quality experiences for our users. By combining product, design & engineering know-how, we provide expertise on front-end, brand, usability and accessibility matters as part of our day-to-day. Would you also like to become a Front-End Developer Design System at Coolblue? Read below if the

Bekijk vacature »
Peter Brok

Peter Brok

13/03/2021 23:00:11
Anchor link
Ik kom er niet uit. Ik wil een Footer hebben die onderaan de pagina komt te staan ongeacht de hoogte van het scherm en die naar beneden schuift als de hoogte van de content groter wordt. Ik heb de CSS hiervoor gevonden en het werkt als de div elementen van de content Relative zijn.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
Gewijzigd op 13/03/2021 23:17:21 door Peter Brok
 
PHP hulp

PHP hulp

01/02/2023 09:57:12
 
- Ariën  -
Beheerder

- Ariën -

13/03/2021 23:03:52
Anchor link
Zou je de code tussen code-tags kunnen plaatsen? Dat kan via de editor.
Alvast bedankt!
Gewijzigd op 13/03/2021 23:10:10 door - Ariën -
 
Peter Brok

Peter Brok

13/03/2021 23:10:30
Anchor link
Ja, natuurlijk, even kijken waar de editor zit.
Gewijzigd op 13/03/2021 23:20:07 door Peter Brok
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/03/2021 10:08:40
Anchor link
>> 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?
 
Ad Fundum

Ad Fundum

14/03/2021 15:51:43
Anchor link
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
 
Peter Brok

Peter Brok

14/03/2021 20:51:31
Anchor link
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




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)
PHP script in nieuw venster Selecteer het PHP script
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

<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?


Quote:
Kan je voorbeeld voor mij posten?
 
Frank Nietbelangrijk

Frank Nietbelangrijk

14/03/2021 22:21:21
Anchor link
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
Gewijzigd op 14/03/2021 22:21:41 door Frank Nietbelangrijk
 
Peter Brok

Peter Brok

15/03/2021 00:14:08
Anchor link
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


Quote:

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....................





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


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....................


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
 
Paul Ulje

Paul Ulje

16/03/2021 15:16:58
Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#footer {
   position:fixed;
   bottom:0px;
   margin-left:auto;
   margin-right:auto;
   font-size:80%;
   z-index:1000;
   }
 
Peter Brok

Peter Brok

16/03/2021 21:25:34
Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#footer {
   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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
#footer {
   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.



Overzicht

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.