Bokt.nl • Hulp met html/css
Pagina 1 van de 1

Hulp met html/css

Link naar dit berichtGeplaatst: 23-09-16 18:49
door thirteenn
Voor school moet ik een website in elkaar zetten. Het lukt me aardig, alleen heb ik ruzie met mijn footer?

Iemand die voor mij de html/css wilt bekijken?

Hier zie je wat er mis gaat:

http://student.aii.avans.nl/CMD/mhamelin1/

Re: Hulp met html/css

Link naar dit berichtGeplaatst: 23-09-16 19:18
door Shadow0
Je gebruikt position: absolute; op de sections boven de footer. Maar position: absolute heeft veel bij-effecten. Als je je daarin verdiept kun je denk ik wel vinden waarom het misgaat en hoe het anders kan.

Link naar dit berichtGeplaatst: 23-09-16 19:46
door thirteenn
Shadow0 schreef:
Je gebruikt position: absolute; op de sections boven de footer. Maar position: absolute heeft veel bij-effecten. Als je je daarin verdiept kun je denk ik wel vinden waarom het misgaat en hoe het anders kan.


Ik heb de position absoluut weg gehaald, maar het enige wat veranderd is dat de tekst niet meer in t midden staat.

Re: Hulp met html/css

Link naar dit berichtGeplaatst: 23-09-16 20:53
door Shadow0
Ik zie het, misschien was ik iets te snel met mijn antwoord. Wat er gebeurt is dat css een standaard manier heeft om alle elementen op je pagina te zetten: de flow. Die standaardmanier is overigens vrij simpel: alles (of eigenlijk, alle block-level elementen) komen onder elkaar.

Als je position: absolute gebruikt, maar ook als je floats gebruikt, trek je elementen uit die flow. Dat is handig, omdat je dan het 'allemaal onder elkaar' kunt doorbreken en dingen dus naast elkaar kunt zetten, maar ook onhandig want op dat moment nemen ze niet meer de normale ruimte in. Alles wat daarna komt, wordt dan geplaatst alsof die elementen (met float of absolute) er (zeker in de hoogte) helemaal niet zijn. En dus vallen de dingen over elkaar.

https://www.sitepoint.com/clearing-floa ... x-methods/ geeft een aantal opties om het op te lossen als je floats gebruikt. Je dwingt de andere elementen om die verticale ruimte toch te respecteren en de rest van je elementen eronder te plaatsen en niet op dezelfde hoogte.

Je kunt ook kijken naar het hippere en modernere flex ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )

Overigens: gebruik je firefox of chrome? Dan kun je met de developer tools (F12) makkelijk experimenteren en kijken wat er gebeurt als je bepaalde eigenschappen weghaalt of toevoegt.

Link naar dit berichtGeplaatst: 23-09-16 21:13
door thirteenn
Shadow0 schreef:
Ik zie het, misschien was ik iets te snel met mijn antwoord. Wat er gebeurt is dat css een standaard manier heeft om alle elementen op je pagina te zetten: de flow. Die standaardmanier is overigens vrij simpel: alles (of eigenlijk, alle block-level elementen) komen onder elkaar.

Als je position: absolute gebruikt, maar ook als je floats gebruikt, trek je elementen uit die flow. Dat is handig, omdat je dan het 'allemaal onder elkaar' kunt doorbreken en dingen dus naast elkaar kunt zetten, maar ook onhandig want op dat moment nemen ze niet meer de normale ruimte in. Alles wat daarna komt, wordt dan geplaatst alsof die elementen (met float of absolute) er (zeker in de hoogte) helemaal niet zijn. En dus vallen de dingen over elkaar.

https://www.sitepoint.com/clearing-floa ... x-methods/ geeft een aantal opties om het op te lossen als je floats gebruikt. Je dwingt de andere elementen om die verticale ruimte toch te respecteren en de rest van je elementen eronder te plaatsen en niet op dezelfde hoogte.

Je kunt ook kijken naar het hippere en modernere flex ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )

Overigens: gebruik je firefox of chrome? Dan kun je met de developer tools (F12) makkelijk experimenteren en kijken wat er gebeurt als je bepaalde eigenschappen weghaalt of toevoegt.


Ik werk met chrome. Maar ik gebruik Brackets en dan heb je live preview, dus dat werkt ook prettig! Moet zeggen ik snap nog steeds niet helemaal hoe ik dit oplos.. Ben nu beide pagina's aan het lezen maar het zegt me nog niks.

Link naar dit berichtGeplaatst: 23-09-16 21:15
door coldsummers
Heb je deze code al eens geprobeerd?

position: fixed;
right: 0;
bottom: 0;
left: 0;

Ik heb alleen ipv bottom top, zodat mijn menu boven aan staat en niet meebeweegt: http://monsoonsandrain.tumblr.com

Link naar dit berichtGeplaatst: 23-09-16 21:20
door thirteenn
coldsummers schreef:
Heb je deze code al eens geprobeerd?

position: fixed;
right: 0;
bottom: 0;
left: 0;

Ik heb alleen ipv bottom top, zodat mijn menu boven aan staat en niet meebeweegt: http://monsoonsandrain.tumblr.com


Jij hebt position fixed, dus dan scrolt je menu automatisch mee. Maar ik wil dat mijn footer gewoon beneden blijft staan en niet meescrolt of iets. :)

Link naar dit berichtGeplaatst: 23-09-16 21:23
door coldsummers
mirthheee schreef:
coldsummers schreef:
Heb je deze code al eens geprobeerd?

position: fixed;
right: 0;
bottom: 0;
left: 0;

Ik heb alleen ipv bottom top, zodat mijn menu boven aan staat en niet meebeweegt: http://monsoonsandrain.tumblr.com


Jij hebt position fixed, dus dan scrolt je menu automatisch mee. Maar ik wil dat mijn footer gewoon beneden blijft staan en niet meescrolt of iets. :)


Fixed blijft die staan, mijn menu met ask, about etc blijft staan als je scrolt...

Link naar dit berichtGeplaatst: 23-09-16 21:28
door thirteenn
Coldsummers:

Oh ja idd, dat bedoel ik.. foutje. Bedoel dat ik hem pas wilt zien als ik onderaan de pagina ben.

Anyway... bedankt shadow0! Het is gelukt!

Link naar dit berichtGeplaatst: 23-09-16 21:29
door coldsummers
mirthheee schreef:
Coldsummers:

Oh ja idd, dat bedoel ik.. foutje. Bedoel dat ik hem pas wilt zien als ik onderaan de pagina ben.

Anyway... bedankt shadow0! Het is gelukt!

Oh zo.
Ik zie al dat het gelukt is.
Ik heb zelf een nieuwe #container gemaakt voor mijn footer. :')