Hello and thanks for reading.
HTML-5 does not want us to use tables for presentation.
I am trying, again with CSS Grid, CSS Flex-box, and grid-template-areas.
Obviously I have failed or I would not be here asking for help.
My efforts are at https://codepen.io/FKlusmann/pen/BaVqJRG
I would appreciate your suggestions.
Thank you.
– Fred
may I ask you why did you decide you use tables for this?
Hi @lolek55507
The table has evolved from my old (1998 ?) work and is does the job I want. I’d like to keep its style.
– Fred
I will check back tomorrow. Thanks.
Your page is kind of all over the place. It would help if you told us exactly what you wanted help with.
Ahh, I see, you put some questions in the content on the page.
On a side note, if you really wanted to continue to use a table for layout then you could do it by adding the role="presentation" attribute to the opening table tag. One of the big reasons why you shouldn’t use tables for layout is because it is bad for accessibility. Adding role="presentation" to the opening table tag will remove the native semantics for the table and thus it will appear as if you aren’t using a table to people using assistive technology (such as screen readers) accessing your page.
There are other reasons not to use layout tables. If you narrow your page down to 320px I think you will agree that it would be much better to shift the layout of your header around so that things stack on top of each other, that way you will have much more room to display each part of the header. So I would encourage you to make the shift from a table.
Thank you, Bruce @bbsmooth .
My goal is to duplicate the table in a HTML-5 CSS-3 comparable way.
I believe that enclosing the table within <header> and the site navigation within <nav> work on most screen readers. These are my current work-rounds. Yes, I can add the role="presentation".
I have squashed the table to 400 px and it stacked the navigation buttons nicely.
The mess is my attempt to find away to replace the table.
I appreciate your suggestions.
– Fred
This is your header when the viewport is narrowed to 320px (which to be accessible is the minimum you need to support):
Don’t you think it would be better if you stacked these boxes on top of each other so that they each had more room to display their content. Your logo could be bigger. You will have more room to display your site name without having to split it onto new lines in the middle of words. And I’m assuming the text for those links is something other than “Link_2”, “Link_3”, etc… so you will have more room to display the link text as well.
This is the theory behind responsive design. At narrow widths you stack things on top of each other instead of side-by-side so that you can take advantage of as much horizontal space as possible. Then as you widen the view port you can shift things around to be side-by-side since you will have more horizontal space.
Most people use a “narrow-first” (or “mobile-first”) approach to styling the page. Narrow your browser in all the way and style it so the page looks good at that narrow width. That will be your default CSS. You most likely will not need to use grid or flexbox here since most elements stack on top of each other by default. Then after you have that down, you can widen your browser and use media queries to shift things around as you like using grid/flexbox. This is one of the main advantages to using CSS instead of tables to arrange the layout on your page.
Thanks, @bbsmooth.
I do understand what you are suggesting.
I have played with just the site name and a hamburger menu. My audience did not appreciate it.
@bbsmooth Hi Bruce.
I have updated my latest attempt and would appreciate your input.
The sponsor accepts the header as is.
I would like to remove some of the height, which appears to be the remains of prior header components after I tried to remove them.
I left the blue background so that this is more obvious.
Do you have a better solution to this? It seems like too much code just to eliminate the old table.
No hurry my friend.
Thank you.
– Fred
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.