Hulp met html/css

Moderators: Mjetterd, Dani, ynskek, Ladybird, xingridx, Polly, Hanmar

Antwoord op onderwerpPlaats een reactie
 
 
thirteenn

Berichten: 2082
Geregistreerd: 14-06-12
Woonplaats: Eindhoven

Hulp met html/css

Link naar dit bericht Geplaatst door de TopicStarter: 23-09-16 18:49

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/

All magic comes with a price, dearie


Shadow0

Berichten: 43497
Geregistreerd: 04-06-04
Woonplaats: Utrecht

Re: Hulp met html/css

Link naar dit bericht Geplaatst: 23-09-16 19:18

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.

thirteenn

Berichten: 2082
Geregistreerd: 14-06-12
Woonplaats: Eindhoven

Link naar dit bericht Geplaatst door de TopicStarter: 23-09-16 19:46

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.

All magic comes with a price, dearie


Shadow0

Berichten: 43497
Geregistreerd: 04-06-04
Woonplaats: Utrecht

Re: Hulp met html/css

Link naar dit bericht Geplaatst: 23-09-16 20:53

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.

thirteenn

Berichten: 2082
Geregistreerd: 14-06-12
Woonplaats: Eindhoven

Link naar dit bericht Geplaatst door de TopicStarter: 23-09-16 21:13

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.

All magic comes with a price, dearie

coldsummers

Berichten: 2060
Geregistreerd: 19-06-12
Woonplaats: Zuid-Holland

Link naar dit bericht Geplaatst: 23-09-16 21:15

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

HEAVEN DOESN'T SEEM SO FAR AWAY....

thirteenn

Berichten: 2082
Geregistreerd: 14-06-12
Woonplaats: Eindhoven

Link naar dit bericht Geplaatst door de TopicStarter: 23-09-16 21:20

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

All magic comes with a price, dearie

coldsummers

Berichten: 2060
Geregistreerd: 19-06-12
Woonplaats: Zuid-Holland

Link naar dit bericht Geplaatst: 23-09-16 21:23

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

HEAVEN DOESN'T SEEM SO FAR AWAY....

thirteenn

Berichten: 2082
Geregistreerd: 14-06-12
Woonplaats: Eindhoven

Link naar dit bericht Geplaatst door de TopicStarter: 23-09-16 21:28

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!

All magic comes with a price, dearie

coldsummers

Berichten: 2060
Geregistreerd: 19-06-12
Woonplaats: Zuid-Holland

Link naar dit bericht Geplaatst: 23-09-16 21:29

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. :')

HEAVEN DOESN'T SEEM SO FAR AWAY....


Antwoord op onderwerpPlaats een reactie

Wie is er online

Gebruikers op dit forum: bella24, Benzz, Blijgeestig, ComscoreBot, Dorien_Boy, ellen05, Fleuribelle, lovemaylo, SANEX en 65 bezoekers