I added a sticky first line to a dump file,
<https://prino.neocities.org/@temp/dump.html>,
to make it a bit easier to see what's where, but for some reason, the background color for the sticky part only extends to what's visible, and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?
Robert Prins writes:
I added a sticky first line to a dump file,
<https://prino.neocities.org/@temp/dump.html>,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible,
and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?
Add width: fit-content; to the style.
"Ben Bacarisse" wrote:
Robert Prins writes:
I added a sticky first line to a dump file,
<https://prino.neocities.org/@temp/dump.html>,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible,
and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?
Add width: fit-content; to the style.
That didn't work in Firefox but for some strange reason this did:
display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".
On 2023-04-03 21:24, Apd wrote:
"Ben Bacarisse" wrote:
Add width: fit-content; to the style.
That didn't work in Firefox but for some strange reason this did:
display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".
Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)
"Robert Prins" wrote:
On 2023-04-03 21:24, Apd wrote:
"Ben Bacarisse" wrote:
Add width: fit-content; to the style.
That didn't work in Firefox but for some strange reason this did:
display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".
Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)
Ok, mine's an older version. Other browsers may vary.
BTW, your date is in the future. From your header:
Date: Tue, 4 Apr 2023 09:55:52 +0000
Injection-Date: Tue, 4 Apr 2023 06:55:48 -0000 (UTC)
On 2023-04-03 21:24, Apd wrote:
"Ben Bacarisse" wrote:
Robert Prins writes:
I added a sticky first line to a dump file,
<https://prino.neocities.org/@temp/dump.html>,
to make it a bit easier to see what's where, but for some reason, the
background color for the sticky part only extends to what's visible,
and not the part that scrolls right into view.
Resizing the font and reloading does color the whole top...
What am I doing wrong?
Add width: fit-content; to the style.
That didn't work in Firefox but for some strange reason this did:
display: inline;
It doesn't mess up the "pre" formatting but he might want to add a
margin to the "div".
Actually, the "width: fit-content;" does work in FF (111.0.1 64-bit)
This all works swell, however, I now have two other problems:
1) Ctrl-PgUp no longer works, as the top-of-page is already at the top
2) If I use the ":target" pseudo-selector, it does highlight the target,
but it also scrolls it behind the fixed sticky line (unless I'm somewhere
at the very bottom). Tried using two <div>'s to split the <body> added a "top:1" to the "target" CSS, but that doesn't change anything, so any
clues how I can solve these ones?
"Robert Prins" wrote:
This all works swell, however, I now have two other problems:
1) Ctrl-PgUp no longer works, as the top-of-page is already at the top
Pgup, pgdn, home and end work as expected without the "ctrl" modifier.
2) If I use the ":target" pseudo-selector, it does highlight the target,
but it also scrolls it behind the fixed sticky line (unless I'm somewhere
at the very bottom). Tried using two <div>'s to split the <body> added a
"top:1" to the "target" CSS, but that doesn't change anything, so any
clues how I can solve these ones?
A couple of ways here: <https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html>
| Sysop: | Keyop |
|---|---|
| Location: | Huddersfield, West Yorkshire, UK |
| Users: | 379 |
| Nodes: | 16 (2 / 14) |
| Uptime: | 41:03:58 |
| Calls: | 8,141 |
| Calls today: | 4 |
| Files: | 13,085 |
| Messages: | 5,857,726 |