The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Sticky Table Header and href
Don S
post Feb 13 2021, 01:50 PM
Post #1





Group: Members
Posts: 4
Joined: 13-February 21
Member No.: 27,796



I am working on a website (https://simard57.synology.me/LHVCResortMap.html)

The site uses usemaps that has hrefs that link to a table that has a sticky header. The trouble I am having is when one of the "hot spot" areas (for example clicking Villa 9 in the Royal Villa map) on the map is clicked and the table is navigated to - the Target table entry (for Villa 9) is hidden under the sticky header and the page has to be scrolled to reveal the entry. Is there a way to ensure that does not happen? relatively new to much of what I am trying to do - and learning a lot but this is haunting me and affects the spit and polish of the site.

thank you
Don S

This post has been edited by Don S: Feb 13 2021, 01:52 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 13 2021, 02:38 PM
Post #2


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,531
Joined: 9-August 06
Member No.: 6



I don't think there is a solution, not as long as the headers are part of the table.

'position: sticky' is 'position: fixed' on demand, so to speak. If you have a fixed bar at the top of the page, the top of the page's content will be hidden behind the bar. That's because
a box that's positioned fixed or absolute takes up no space and is on top of other, non positioned, content.

The same thing happens with your sticky TH row, but the row isn't fixed until the page is scrolled and it reaches the top of the window. So it looks normal at first when you scroll down the page (normal scrolling, I mean), but as soon as the blue bar reaches the top of the window it turns fixed and covers the top of the rest of the table.

The fix for this is normally to add some top margin to the content so it isn't covered by the fixed bar initially. But there is no such thing as margins between table elements so I don't see how this can be fixed without removing the TH row and have the headers in a DIV or something above the table. But then your sorting script probably would need rewriting. Or maybe not, I didn't look at it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 13 2021, 05:24 PM
Post #3


.
********

Group: WDG Moderators
Posts: 8,731
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 13 2021, 08:38 PM) *

The fix for this is normally to add some top margin to the content so it isn't covered by the fixed bar initially. But there is no such thing as margins between table elements

How about adding top padding or border to the targetted row's cells? Like this:

CODE
tr:target td {border-top: 1em solid;}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 13 2021, 06:00 PM
Post #4


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,531
Joined: 9-August 06
Member No.: 6



Well, padding would probably be better and the id needs to be moved from the TR to a TD. But problem is all rows are targeted, so the table would end up looking pretty wonky. So even more JS would be needed to change the style dynamically as the image map is clicked, I suppose. Feels rather convoluted. But yeah, probably doable.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 13 2021, 06:15 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,731
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Feb 14 2021, 12:00 AM) *

the id needs to be moved from the TR to a TD.

Why?

QUOTE
But problem is all rows are targeted, so the table would end up looking pretty wonky.

No, since I'm using the :target pseudo-class, only the currently targetted row's cells get styled. No javascript needed either. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 13 2021, 07:02 PM
Post #6


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,531
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Feb 14 2021, 12:15 AM) *

QUOTE(pandy @ Feb 14 2021, 12:00 AM) *

the id needs to be moved from the TR to a TD.

Why?


I don't know. Actually, when I tried it worked best with the id inside the cell (on the link for example). Thought it was odd, because one would think the higher up the id is, the less would be hidden.

QUOTE

QUOTE
But problem is all rows are targeted, so the table would end up looking pretty wonky.

No, since I'm using the :target pseudo-class, only the currently targetted row's cells get styled. No javascript needed either. happy.gif


Oh christ. I didn't notice and I didn't even think about that. Well, that should mean the problem is solved after all! 👍
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Don S
post Feb 13 2021, 07:05 PM
Post #7





Group: Members
Posts: 4
Joined: 13-February 21
Member No.: 27,796



QUOTE(pandy @ Feb 13 2021, 02:38 PM) *

I don't think there is a solution, not as long as the headers are part of the table.

'position: sticky' is 'position: fixed' on demand, so to speak. If you have a fixed bar at the top of the page, the top of the page's content will be hidden behind the bar. That's because
a box that's positioned fixed or absolute takes up no space and is on top of other, non positioned, content.

The same thing happens with your sticky TH row, but the row isn't fixed until the page is scrolled and it reaches the top of the window. So it looks normal at first when you scroll down the page (normal scrolling, I mean), but as soon as the blue bar reaches the top of the window it turns fixed and covers the top of the rest of the table.

The fix for this is normally to add some top margin to the content so it isn't covered by the fixed bar initially. But there is no such thing as margins between table elements so I don't see how this can be fixed without removing the TH row and have the headers in a DIV or something above the table. But then your sorting script probably would need rewriting. Or maybe not, I didn't look at it.


is there a way to "float" the table header so the rest of the table fills the space below it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 13 2021, 07:57 PM
Post #8


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,531
Joined: 9-August 06
Member No.: 6



No. But read what Christian wrote. He thought of a solution.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Don S
post Feb 13 2021, 08:08 PM
Post #9





Group: Members
Posts: 4
Joined: 13-February 21
Member No.: 27,796



QUOTE(pandy @ Feb 13 2021, 07:57 PM) *

No. But read what Christian wrote. He thought of a solution.


I tried adding the border-top to the class for the <td> and it created an unappealing black bar across the top of the cells in the row and it was partially covered by the header. I then tried to add it to the <td> and it was not much different

what am I missing?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 14 2021, 04:38 AM
Post #10


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,531
Joined: 9-August 06
Member No.: 6



You must use the selector Christian used. It only matches the cells in the targeted row, not all of them. And obviously you need to style the border further.

But you can use padding instead. I think it needs to be a little larger, either you use border or padding, like 1.4 or 1.5 em.

Try this.
CODE

tr:target td { padding-top: 1.4em !important }


I used !important to override other styling you have for padding.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Don S
post Feb 14 2021, 09:13 AM
Post #11





Group: Members
Posts: 4
Joined: 13-February 21
Member No.: 27,796



QUOTE(pandy @ Feb 14 2021, 04:38 AM) *

You must use the selector Christian used. It only matches the cells in the targeted row, not all of them. And obviously you need to style the border further.

But you can use padding instead. I think it needs to be a little larger, either you use border or padding, like 1.4 or 1.5 em.

Try this.
CODE

tr:target td { padding-top: 1.4em !important }


I used !important to override other styling you have for padding.


Awesome - I misunderstood what Christian posted and just added to the tr I had in CSS. adding the line as posted fixed it and it now works as I hoped it would. Appreciate the wisdom all of you share. Thank you again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 14 2021, 09:43 AM
Post #12


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,531
Joined: 9-August 06
Member No.: 6



Thank Christian. I totally overlooked this option. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th February 2021 - 04:50 PM