Tekst van website niet volledig zichtbaar

[Verwijderd]

Ik ben bezig met het maken van een website op basis van een template. Ik heb de template inmiddels dusdanig aangepast dat de lay-out naar mijn zin is, maar nu blijkt dat de hoofdtekst van mijn pagina niet volledig zichtbaar is. Ik kan maar een stukje naar beneden scrollen en dan "bots" ik tegen mijn footer aan.

Verder blijkt in de mobiele weergave dat het gekleurde deel van de footer niet helemaal tot onder doorloopt waardoor niet alle tekst in de footer goed te lezen is. En tussen mijn header en de hoofdtekst zit in de mobiele weergave een groot wit vlak.

Ik ben niet echt technisch onderbouwd en bouw deze website echt dmv trial and error. Ik hoop dat er iemand is die mij in simpele taal kan uitleggen hoe ik dit probleem kan oplossen.

Ik heb de pagina die ik tot nu toe heb gemaakt even als tijdelijke index geupload: https://www.natuurboerder...t.nl/index-tijdelijk.html

Alvast enorm bedankt voor de hulp.

[DJMaze]

Cascading Stylesheet:

#main {
    padding-bottom: 200px;
}

[Verwijderd]

Hé DJMaze, bedankt voor je reactie. Mijn tekst loopt nu netjes door 👍.

Heb je misschien ook nog een oplossing voor mijn mobiele weergave? Tussen de header en de hoofdtekst staat een groot wit blok en onder loopt de kleur van de footer niet helemaal door waardoor de laatste regel van de footer niet leesbaar is.

[b2vjfvj75gjx7]

Verwijderd schreef op zaterdag 11 augustus 2018 @ 14:49:
Hé DJMaze, bedankt voor je reactie. Mijn tekst loopt nu netjes door 👍.

Heb je misschien ook nog een oplossing voor mijn mobiele weergave? Tussen de header en de hoofdtekst staat een groot wit blok en onder loopt de kleur van de footer niet helemaal door waardoor de laatste regel van de footer niet leesbaar is.

code:

#footer-wrapper <- deze heeft een fixed height van 200px

Zo min mogelijk vaste waarden gebruiken voor de lay-out van je site...

Beste is om de content gewoon het ontwerp te laten bepalen, dan andersom;

Als je een ontwerp maakt en je maakt alles exact zo hoog / breed als je 'mooi' vindt, dan krijg je problemen bij dynamische content.

Dus als je meer content hebt, wordt de footer hoger, heb je minder content - dan wordt die lager... maar nooit je content laten bepalen door de vorm. (form follows content, niet andersom).

[NMe]

Verwijderd schreef op zaterdag 11 augustus 2018 @ 14:49:
Hé DJMaze, bedankt voor je reactie. Mijn tekst loopt nu netjes door 👍.

Heb je misschien ook nog een oplossing voor mijn mobiele weergave? Tussen de header en de hoofdtekst staat een groot wit blok en onder loopt de kleur van de footer niet helemaal door waardoor de laatste regel van de footer niet leesbaar is.

Ik zou hier eens mee beginnen.

[Verwijderd]

Dank je wel voor de reacties.

Als ik in de footer wrapper de hoogte op "auto" zet dan is het probleem van de footer opgelost maar dan is mijn initiële probleem van de hoofdtekst die niet doorloopt weer terug. Ik heb inmiddels van alles geprobeerd met aanpassen van de fixed heights van de verschillende onderdelen, maar ik krijg het niet opgelost.

Voor nu ben ik blij dat in ieder geval alle tekst leesbaar is. De problemen die er nu nog zijn zijn vooral esthetisch. Ik ga me eerst maar eens concentreren op de link van NMe, ik had geen idee dat deze checker bestond. Dank voor de link. Als ik er dan nog niet uitkom dan ga ik maar eens op zoek naar iemand in mijn directe omgeving die verstand heeft van programmeren en die even live met me mee wil kijken en mijn hele stylesheet eens mee door wil lopen.

In ieder geval enorm bedankt voor jullie hulp.

[_NooT_]

En tussen mijn header en de hoofdtekst zit in de mobiele weergave een groot wit vlak.

Je hebt je header-wrapper een vaste hoogte gegeven in je stylesheet en gebruikt een background-image om deze container te vullen. Echter heb je de background-size op '100%' staan, waardoor deze altijd even breed als de container getoond wordt. Aangezien de verhouding van deze afbeelding niet overeenkomt met de container, blijft er een grote ruimte ongevuld.

Wat je waarschijnlijk wil is 'background-size: cover';
Dan wordt de afbeelding zo geschaald dat de hele container wordt gevuld.
Positionering gaat standaard vanuit de hoek linksboven. Als je dit aan wil passen, kan je dat met de property 'background-position'.

Extra tip:
Sla je logo nooit op in je afbeelding, maar gebruik een apart bestand en positioneer en schaal deze apart. Dit geldt ook voor tekst e.d.. Dergelijke elementen kan je beter afzonderlijk van elkaar stylen.

[_NooT_]

Als ik in de footer wrapper de hoogte op "auto" zet dan is het probleem van de footer opgelost maar dan is mijn initiële probleem van de hoofdtekst die niet doorloopt weer terug.

1. Haal de hoogte property helemaal weg (auto is de default value)
2. Haal de property position weg van #footer-wrapper, of zet deze op relative
3. Haal de padding-bottom weg van #main

Veel de de properties die je gebruikt om iets te positioneren zijn helemaal niet nodig en daardoor heb je weer 'hacks' nodig om de effecten hiervan tegen te werken.

Probeer in eerste instantie om zo min mogelijk elementen 'absolute' of 'fixed' te positioneren.
CSS is easy to learn, hard to master. Lang niet altijd krijg je het verwachte effect.