Geen inhoud net onder het kop- en boven het voetdeel

Status
Niet open voor verdere reacties.
G

GerardX

Gebruiker
Lid geworden
25 jan 2022
Berichten
99
Mijn webstek bevat een vaststaand kop- en voetdeel.
De tekst met afbeeldingen daartussen schuift daar verticaal onderdoor.
Ik vind het niet mooi dat die tekst daar dan pal tegenaan staat.
Hoe kan ik net onder het kopdeel en net boven het voetdeel een ruimte van zeg 1em creëren waarin geen inhoud te zien valt?
 
Een padding toepassen?

Misschien een heads up: Tegenwoordig gebruiken veel mensen een grid-framework, zoals Bootstrap of Bulma.
het maakt je site makkelijk te ordenen, en het is ook makkelijk voor responsive designs. Dus mocht je er nog geen gebruik van maken, kijk er eens naar.
 
Laatst bewerkt:
Aar zei:
Een padding toepassen?
Klik om te vergroten...
Ja, daar begon ik mee, maar hoe ik me ook wende of keerde, ik kreeg het daarmee niet voor elkaar. Dast vond ik uiteraard vreemd, want rond afbeeldingen is dat geen probleem. Gevoelsmatig denk ik, dat ik iets met een "body"-stijl moet doen.
Misschien een heads up: Tegenwoordig gebruiken veel mensen een grid-framework, zoals Bootstrap of Bulma.
Klik om te vergroten...
Nog nooit van gehoord maar ik zal na het weekend eens gaan speuren.
het maakt je site makkelijk te ordenen,
Klik om te vergroten...
Met het ordenen heb ik eigenlijk nooit zoveel problemen (ik overdrijf graag bij het schrijven van toelichtingen ;)).
 
Laatst bewerkt:
GerardX zei:
Ja, daar begon ik mee, maar hoe ik me ook wende of keerde, ik kreeg het daarmee niet voor elkaar. Dast vond ik uiteraard vreemd, want rond afbeeldingen is dat geen probleem. Gevoelsmatig denk ik, dat ik iets met een "body"-stijl moet doen.
Klik om te vergroten...

Zet eens een voorbeeld in www.jsfiddle.net. zou ik zeggen, en deel de URL als je het opgeslagen hebt.
 
Aar zei:
Zet eens een voorbeeld in www.jsfiddle.net. zou ik zeggen,
Klik om te vergroten...
Oeps, wat is dat nou weer?

Overigens is het momenteel lastig werken voor mij omdat ik al een poos op een nieuwe 'router' zit te wachten, maar vanwege het tekort aan 'chips' is het onzeker hoe lang dat nog gaat duren. Zolang moet ik het dus van de bibliotheek(openingstijden) hebben voor contact met het internet. :(
Maar ... ik heb in het weekend middels veel uitproberen een mooie oplossing gevonden.
Aan de "kop"-stijl heb ik het volgende toegevoegd:
box-shadow: 0 50px 40px #f0ffff; /* Schaduw aan de onderkant in dezelfde zachtblauwe kleur als de achtergrondkleur van "body". */
Aan de "voet"-stijl heb ik iets dergelijks toegevoegd:
box-shadow: 0 -35px 20px #f0ffff; /* Schaduw aan de bovenkant in dezelfde zachtblauwe kleur als de achtergrondkleur van "body". */

Ik ben hier zeer tevreden mee want al vertikaal schuivend, vervaagd de tekst nu tot onzichtbaar.
en deel de URL als je het opgeslagen hebt.
Klik om te vergroten...
Even iets delen (zie boven) is lastig.
 
Laatst bewerkt:
Aar zei:
Al geklikt? ;)
Klik om te vergroten...
Nee. Zonder een motief om ergens op te klikken, spaar ik mezelf vaak veel moeite. ;)
En als je meer wilt weten, dan Google je verder:
Klik om te vergroten...
"Google"len doe ik sowieso al nooit om privacy-redenen. Een beter alternatief is https://startpage.nl Dat valt onder de strenge Europese privacyregels en vindt meer dan Google omdat het anoniem voor jou in meerder zoekmachines (waaronder ook Google) zoekt.
https://andrejsharapov.medium.com/what-is-jsfiddle-guide-9025f1081fdc
Klik om te vergroten...
Hier had ik wel wat aan. Het was leesbaar in mijn eigen taal en dat "jsfiddle" leek niet echt aantrekkelijk voor mij. Ik kan voorlopig prima met "Geany" https://nl.wikipedia.org/wiki/geany uit de voeten.

Niettemin bedankt. :)
 
JSfiddle is juist om code met anderen te delen. Geany is daar niet voor gemaakt. Dus misschien handig om je erin te verdiepen.
 
GerardX zei:
Nee. Zonder een motief om ergens op te klikken, spaar ik mezelf vaak veel moeite. ;)
Klik om te vergroten...
Fijn, maar zullen we zulke reacties achterwege laten. Je kan gewoon klikken en kijken wat het is. :)
Gewoon vertrouwen hebben.
 
off topic. Bulma zou ik niemand adviseren. Het is een vreemde afgeleide van Bootstrap en W3.CSS.

Verwarrende naamgeving (is-narrow is hetzelfde als is-narrow-tablet).
Classes met apparaat benaming ipv relatie tot de view breedte, grote valkuil.
Volgens de css is het een "touchscreen" als de view < 1023 is, huh.
Een view > 1216 is blijkbaar widescreen en view > 1408 is blijkbaar fullhd, raar!
Functionaliteit middels JavaScript / jQuery ontbreekt volledig.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan