CutCodeDown

Web Development => HTML / CSS => Topic started by: GrumpyYoungMan on 6 Feb 2020, 04:11:35 pm

Title: Ideas... Display Flex?
Post by: GrumpyYoungMan on 6 Feb 2020, 04:11:35 pm
Help again...

How can I merge these two pages so the navigation is on the left and the table is on the right? or what ever is selected from the menu:

Template:
Code: [Select]
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Control Panel</title>
<link rel="stylesheet" type="text/css" href="usercp.css">
</head>

<body>
<div>
<div class="user_HeaderNavigation">Logged in as: GrumpyYoungMan [ <a href="?module=LogOut">Log Out</a> ]</div> </div>

<div id="mainContainer"><h1>User Control Panel</h1><div>
<ul id="usercp_NavigationMenu">
<li>User Options</li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangeNickName>Change Nick Name</a></li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangeEmail>Change Email</a></li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangePassword>Change Password</a></li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangeUsername>Change Username</a></li></ul>
  </div><div>
<ul id="usercp_NavigationMenu">
<li>Vehicle Options</li><li><a href=?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=Add>Add MOT</a></li><li><a href=?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List>List MOTs</a></li></ul>
  </div> </div>

</body>

</html>

CSS:
Code: [Select]
html {}

* { box-sizing: border-box; }

body {
 
  font-family: Verdana;
  /*    font-size: 1em; */
  margin: 0;
  background: #b1bdc9;

}

.user_HeaderNavigation {

padding: 0.75em;
background: #7799de;

}
 
#mainContainer {

    max-width: 90em;
margin: auto;
    background: #fff;
    border-left: 2px solid #4472d0;
    border-right: 2px solid #4472d0;
    height: 100%;
   
}

#usercp_NavigationMenu {

    list-style: none;
    padding: 0.5em;
    background: #ccc;
    font-weight:  bold;
    max-width: 20em;

}

#usercp_NavigationMenu li {

    margin: 1em;
    border: 1px solid black;
    padding: 0.5em;
    border-radius: 0.25em;
    background: slategrey;

}

#usercp_NavigationMenu a:link, #usercp_NavigationMenu a:link, #usercp_NavigationMenu a:link {

    color: inherit;
    font-weight: normal;
    text-decoration: none;

}

#usercp_NavigationMenu a:hover {

    color: red;

}

.expired { color: red; }

.expiring { color: orange; }

.valid { color: green; }

table {
    position: relative;
    margin: auto;
    border-collapse: collapse;
    background-color: #f0f0f0;
 }

table th, table td {
    padding: 0.25em;
    border:1px solid #000;
    word-break: break-all;
 }

table th {
position: sticky;
    top: 0;
background-color: #000;
color:#fff;
 }

tr td:nth-of-type(2) div {
    padding: 0.3em;
    border: 2px solid #000;
    border-radius: 0.3em; 
    font-weight: bold;
    text-align: center;
 }

tr:nth-child(odd) td:nth-of-type(2) div {
    background-color: #ff0;
 }

tr:nth-child(even) td:nth-of-type(2) div {
    background-color: #fff;
 }

#paginationWrapper {

    display: flex;
    background: grey;
    padding: 1em;
    margin: 0.75em;
   
}

#paginationWrapper div {

    border: 0.1em solid black;
    padding: 0.5em;
    margin: 0.25em;

}

#paginationWrapper a:link, #paginationWrapper a:visited, #paginationWrapper a:active {

    text-decoration: none;
    color: inherit;
    /*border: 0.1em solid black;*/
    /*padding: 0.5em;*/
    /*margin: 0.25em;*/

 }

#paginationWrapper a:hover {

    color: white;

}

.currentPage {

    border: 0.1em solid black;
    padding: inherit;
    margin: inherit;
    background: orange;

}

Option from the menu:
Code: [Select]
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Control Panel - List MOTs</title>
<link rel="stylesheet" type="text/css" href="usercp.css">
</head>

<body>
<div>
<div class="user_HeaderNavigation">Logged in as: GrumpyYoungMan [ <a href="?module=LogOut">Log Out</a> ]</div> </div>

<div id="mainContainer"><h1>Your MOT reminders:</h1><table>
<tr>
<th></th>
<th><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;Page=1">VRM</a></th>
<th><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Expiry&amp;Page=1">Expiry</a></th>
<th colspan="2">Status</th>
<th><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Remind&amp;Page=1">Remind?</a></th>
<th>Actions</th>
<th></th>
</tr>
<tbody>
<tr>
<td>1</td>
<td><div>JH58 VAB</div></td>
<td>February 14th 2019</td>
<td><div class="expired">Expired</div></td>
<td>11 months ago</td>
<td>No</td>
<td>[ Edit | Delete | <a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=View&amp;id=374">View</a> ]</td>

<td>1</td>
</tr><tr>
<td>2</td>
<td><div>OUL 057M</div></td>
<td>February 16th 2019</td>
<td><div class="expired">Expired</div></td>
<td>11 months ago</td>
<td>No</td>
<td>[ Edit | Delete | <a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=View&amp;id=147">View</a> ]</td>

<td>2</td>
</tr><tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=DESC&amp;Page=3">Change Order</a></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Expiry&amp;order=DESC&amp;Page=3">Change Order</a></td>
<td></td>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Remind&amp;order=DESC&amp;Page=3">Change Order</a></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=DESC&amp;Page=6">Change Order</a></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Expiry&amp;order=DESC&amp;Page=6">Change Order</a></td>
<td></td>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Remind&amp;order=DESC&amp;Page=6">Change Order</a></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table><div id="paginationWrapper"><div>Page: 6</div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=1">&laquo;</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=5">&lt;</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=4">4</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=5">5</a></div><div class="currentPage">6</div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=7">7</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=8">8</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=7">&gt;</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=23">&raquo;</a></div></div> </div>

</body>

</html>

I probably should have posted this to my CodePen - I am sorry...

Please be aware the above is demo data and doesn't reflect any "real" actual data I hold.
Title: Re: Ideas...
Post by: GrumpyYoungMan on 7 Feb 2020, 08:51:33 am
Well I always like to give it a go, it's far from ideal and needs a lot of work in both HTML and CSS but it works, it just is not pretty but I can work on that. (I think)

Anyway, here is my CodePen (https://codepen.io/GrumpyYoungMan/pen/abOzzWO).

I know the CSS needs work, I also can't get the background colours to work on the page link... as I have the selected page a different colour...
Title: Re: Ideas... Display Flex?
Post by: Jason Knight on 9 Feb 2020, 10:33:46 pm
What makes "User Control Panel" or "Your MOT reminders:" the name of the site and/or heading that everything on every page is a subsection of. You know, what a H1 means semantically/grammatically? In the case of the latter one, why isn't that a CAPTION for the TABLE?

Also, this is 2020 not 2009, you can stop saying type="text/css", and where's your MEDIA target? Omitting media="" is as bad as setting media="all" and a epic /FAIL/ at web development. No matter how many know-nothing framework "experts" skip right past that.

Where's your THEAD? Your SCOPE? Wouldn't the VRM TD make proper TH with SCOPE="row"?

Where's your "" around your HREF URI? Those haven't been optional in HTML since 1996.

What makes the titles of your links be LI? Or if they are LI wouldn't their children be UL/LI inside that LI for hierarchy?

Or the pagination. Pagination is a LIST of links, we have tags for lists.

... and seriously, learn to format your code. You've got your closures all over the place, nothing lines up, making it hard to even figure out what's wrapping what.

Otherwise you're asking how to make a normal columnar layout... so float, flex, or grid. I'd probably float for maximum compatibility and relative simplicity. Gimme a bit, having dinner... but then I'll toss together a rewrite.


Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
What makes "User Control Panel" or "Your MOT reminders:" the name of the site and/or heading that everything on every page is a subsection of. You know, what a H1 means semantically/grammatically? In the case of the latter one, why isn't that a CAPTION for the TABLE?

Also, this is 2020 not 2009, you can stop saying type="text/css", and where's your MEDIA target? Omitting media="" is as bad as setting media="all" and a epic /FAIL/ at web development. No matter how many know-nothing framework "experts" skip right past that.

Where's your THEAD? Your SCOPE? Wouldn't the VRM TD make proper TH with SCOPE="row"?

Where's your "" around your HREF URI? Those haven't been optional in HTML since 1996.

What makes the titles of your links be LI? Or if they are LI wouldn't their children be UL/LI inside that LI for hierarchy?

Or the pagination. Pagination is a LIST of links, we have tags for lists.

... and seriously, learn to format your code. You've got your closures all over the place, nothing lines up, making it hard to even figure out what's wrapping what.

Otherwise you're asking how to make a normal columnar layout... so float, flex, or grid. I'd probably float for maximum compatibility and relative simplicity. Gimme a bit, having dinner... but then I'll toss together a rewrite.
Thanks for ripping my code apart! I thought I was getting on well! any how I have updated the 'Pen with some of the comments you made above, will work on the others later.

As for the formatting, some of it is lost when I post - in my editor, it lines up. :) I'll work on the browser source as your right that is a mess... (some of it is better now as I made some small tweaks to the PHP source code (PHP_EOL?)

What quotes have I missed around a href? I can't find it?

Thanks again for the feedback and comments - I appreciate it! :)

What makes the titles of your links be LI? Or if they are LI wouldn't their children be UL/LI inside that LI for hierarchy?
I didn't even think of doing a list - within a list... I didn't think that would work... but thats why I post here, I appreciate the continued help! Sorry for posting the 'junk'
Title: Re: Ideas... Display Flex?
Post by: Jason Knight on 10 Feb 2020, 09:14:32 pm
As for the formatting, some of it is lost when I post - in my editor, it lines up. :) I'll work on the browser source as your right that is a mess... (some of it is better now as I made some small tweaks to the PHP source code (PHP_EOL?)
If you're properly using PHP -- aka using comma delimited echo, not wasting time derping everything into stupid strings for nothing, not using the dumbass double quotes or {$variable} idiocy, there's little reason your PHP code cannot echo out well formatted HTML.

Sadly I've seen a lot of your PHP now, and you still refuse to break yourself of using the dumbass double quotes, garbage {$variable) inside them, or slopping everything into strings instead of just echo'ing it right then and there.

What quotes have I missed around a href? I can't find it?
Your entire first code block with the side menu.

... and sorry I didn't get to the rewrite yesterday. I actually fell asleep mid-meal. Just put my head down ont he table for a second... Old man needs his naps I guess.

I'll see if I can squeeze it in tonight, but I've got two paying clients I need to at least do SOME work on first.
Title: Re: Ideas... Display Flex?
Post by: Jason Knight on 10 Feb 2020, 11:12:41 pm
... and here's that rewrite:

https://cutcodedown.com/for_others/grumpyYoungMan/userCP/

I tossed a copy of the markup in as a .txt for those who are timid about "view source".

As you can see I played a bit with the style, you had a lot of areas of dubious colour contrast from a legibility standpoint. In that same vein your original felt a bit too crowded so I tried to open things up a bit. I added a footer to show how/where you would add one, and even laid the groundwork for making it responsive, including my current technique for a burger menu.

Though I didn't touch the table for responsiveness since tables suck for responsiveness. I'd probably set the td:last-child to display:block, and hide "thead th:last-child" to help open things up a bit in the media queries. Eventually setting them all to block based on the needs of the content and the screen size.

If I have time later I'll revisit this to give you a section by section breakdown of the how/what/why of the markup and CSS.

Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 11 Feb 2020, 01:16:27 am
As for the formatting, some of it is lost when I post - in my editor, it lines up. :) I'll work on the browser source as your right that is a mess... (some of it is better now as I made some small tweaks to the PHP source code (PHP_EOL?)
If you're properly using PHP -- aka using comma delimited echo, not wasting time derping everything into stupid strings for nothing, not using the dumbass double quotes or {$variable} idiocy, there's little reason your PHP code cannot echo out well formatted HTML.

Sadly I've seen a lot of your PHP now, and you still refuse to break yourself of using the dumbass double quotes, garbage {$variable) inside them, or slopping everything into strings instead of just echo'ing it right then and there.

What quotes have I missed around a href? I can't find it?
Your entire first code block with the side menu.

... and sorry I didn't get to the rewrite yesterday. I actually fell asleep mid-meal. Just put my head down ont he table for a second... Old man needs his naps I guess.

I'll see if I can squeeze it in tonight, but I've got two paying clients I need to at least do SOME work on first.
Actually I’m trying really hard to break the habit, and much has been changed since the very first code I posted, you must have noticed that?

Thanks, for the feedback.
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 11 Feb 2020, 01:18:06 am
... and here's that rewrite:

https://cutcodedown.com/for_others/grumpyYoungMan/userCP/

I tossed a copy of the markup in as a .txt for those who are timid about "view source".

As you can see I played a bit with the style, you had a lot of areas of dubious colour contrast from a legibility standpoint. In that same vein your original felt a bit too crowded so I tried to open things up a bit. I added a footer to show how/where you would add one, and even laid the groundwork for making it responsive, including my current technique for a burger menu.

Though I didn't touch the table for responsiveness since tables suck for responsiveness. I'd probably set the td:last-child to display:block, and hide "thead th:last-child" to help open things up a bit in the media queries. Eventually setting them all to block based on the needs of the content and the screen size.

If I have time later I'll revisit this to give you a section by section breakdown of the how/what/why of the markup and CSS.
That is looking much better, although mine was very much a work a work in progress you were spot on about the colours!

Thanks again Jason!
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 11 Feb 2020, 01:36:59 am
What quotes have I missed around a href? I can't find it?
Your entire first code block with the side menu.
I think you are right - obviously, I didn;t update that - but I did my CodePen!

... and sorry I didn't get to the rewrite yesterday. I actually fell asleep mid-meal. Just put my head down ont he table for a second... Old man needs his naps I guess.

I'll see if I can squeeze it in tonight, but I've got two paying clients I need to at least do SOME work on first.
That's alright, I appreciate the feedback,  I seem to be having more come backs than Tyson!

Hopefully I won't be broken!

Thanks again!
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 11 Feb 2020, 07:13:43 am
I haven't integrated it fully yet - but this is what I have done so far:

CodePen (https://codepen.io/GrumpyYoungMan/pen/abOzzWO)

Thank you - that was the kind of look I was heading towards... I really do appreciate it...

And to prove I am trying to change here's a code snippet
Code: [Select]
// TABLE Header:
echo '<table id="reminders">
<caption>Your MOT reminders:</caption>
<thead>
<tr>

<th scope="col"><a href="', $link, '&amp;sort=VRM&amp;Page=', $page, '">VRM</a> <a href="', $link, '&amp;sort=VRM', $link_OrderChange, '&amp;Page=', $page, '">', ( $queryOrder == "ASC" ? "&#38;#38;#9660;" : "&#38;#38;#9650;" ), '</a></th>
<th scope="col"><a href="', $link, '&amp;sort=Expiry&amp;Page=', $page, '">Expiry</a> <a href="', $link, '&amp;sort=Expiry', $link_OrderChange, '&amp;Page=', $page, '">', ( $queryOrder == "ASC" ? "&#38;#38;#9660;" : "&#38;#38;#9650;" ), '</a></th>
<th scope="col" colspan="2">Status</th>
<th scope="col"><a href="' , $link , '&amp;sort=Remind&amp;Page=' , $page , '">Remind?</a> <a href="', $link, '&amp;sort=Remind', $link_OrderChange, '&amp;Page=',$page, '">', ( $queryOrder == "ASC" ? "&#38;#38;#9660;" : "&#38;#38;#9650;" ), '</a></th>
<th scope="col">Actions</th>

</tr>
</thead>
<tbody>';

One day, Jason hopefully you will say to me that I have posted really good code, if you bear with me... and keep steering me - I think my code is already starting to improve slightly?
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 11 Feb 2020, 03:42:02 pm
I can not style the top log out link?

Code: [Select]
#top a {}
doesn't work...
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 12 Feb 2020, 01:19:15 am
I can not style the top log out link?

Code: [Select]
#top a {}
doesn't work...
Try altering the right CSS file...   :o ::) Safe to say its working okay now...  :-\
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 12 Feb 2020, 03:37:00 am
... and here's that rewrite:

https://cutcodedown.com/for_others/grumpyYoungMan/userCP/

I tossed a copy of the markup in as a .txt for those who are timid about "view source".

As you can see I played a bit with the style, you had a lot of areas of dubious colour contrast from a legibility standpoint. In that same vein your original felt a bit too crowded so I tried to open things up a bit. I added a footer to show how/where you would add one, and even laid the groundwork for making it responsive, including my current technique for a burger menu.

Though I didn't touch the table for responsiveness since tables suck for responsiveness. I'd probably set the td:last-child to display:block, and hide "thead th:last-child" to help open things up a bit in the media queries. Eventually setting them all to block based on the needs of the content and the screen size.

If I have time later I'll revisit this to give you a section by section breakdown of the how/what/why of the markup and CSS.
Thanks again for the rewrite and the CSS - I appreciate it! I had to make a few tweaks to make it work with my actual panel, but nothing major... :) Thank you!  ;D  :D  ;)  :)
Title: Re: Ideas... Display Flex?
Post by: Jason Knight on 12 Feb 2020, 11:03:39 am
I haven't integrated it fully yet - but this is what I have done so far:
A vast improvement, though as mentioned before your "variables for nothing" are really wasteful here. I also think it doesn't make a lot of sense to have order and item in the same $_GET, showing the SAME sort order on all items, and your formatting still needs help. Don't slop everything onto the same line like that if it can be avoided.

In general I think the link on the text should be moved to a independent arrow, just like the one to change the sort order. Likewise the current sort should be individually marked.

Leveraging some functions so as to DRY...

Code: [Select]
function template_reminderColHeader($name, $link = false, $colspan = false) {

echo '
<th scope="col"', (
$colspan ? ' colspan="' . $colspan . '"' : ''
), '>
', $name;


if ($link) {

$column = ($name == empty($_GET['sort']) ? 'VRM' : $_GET['sort']);
$desc = !empty($_GET['order']) && ($_GET['order'] == 'DESC');

echo (
$column && !$desc ? '
<span>&#38;#38;#x25B2;</code>'
: '
<a href="', $link, '">&#38;#38;#x25B2;</a>'
), (
$column && $desc ? '
<span>&#38;#38;#x25B2;</code>'
: '
<a href="', $link, '&order=DESC">&#38;#38;#x25BC;</a>'
);

}

echo '
</th>';

} // template_reminderColHeader

function template_reminderHeader($link) {

echo '
<table id="reminders">
<caption>Your MOT reminders:</caption>
<thead>
<tr>';

$link .= '&sort=' . $name . '&page=' . $page;

template_reminderColHeader('VRM', $link);
template_reminderColHeader('Expiry', $link);
template_reminderColHeader('Status', false, 2);
template_reminderColHeader('Remind', $link);
template_reminderColHeader('Actions');

echo '
</tr>
</thead><tbody>';

} // template_reminderHeader

A little different from how yours works, but not significantly. Again though, do the logic when you NEED it for the template, don't store it in some sort of global variable.
Title: Re: Ideas... Display Flex?
Post by: Jason Knight on 12 Feb 2020, 06:16:02 pm
Oh, and side note, as of HTML 5 you don't have to do the &amp; nonsense anymore in URI's. NOT that ANY legitimate UA ever actually cared -- they were at least smart enough to go "hey, this is in double quotes".
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 13 Feb 2020, 12:57:04 am
Thanks, for the feedback!

I’m working on a div tableless design...
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 13 Feb 2020, 02:15:48 am
Oh, and side note, as of HTML 5 you don't have to do the &amp; nonsense anymore in URI's. NOT that ANY legitimate UA ever actually cared -- they were at least smart enough to go "hey, this is in double quotes".
Thank you, and about time!
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 13 Feb 2020, 03:36:05 am
Jason, why do you think the information I am putting in to a table isn't tabular data?
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 13 Feb 2020, 11:27:45 am
For your amusement: CodePen (https://codepen.io/GrumpyYoungMan/pen/GRJoZmv)

Annoying problem is that the status looks at a different height to the rest? and I know the HTML needs a lot of tidying and minimalising...
Title: Re: Ideas... Display Flex?
Post by: Jason Knight on 13 Feb 2020, 11:52:32 am
Jason, why do you think the information I am putting in to a table isn't tabular data?
For what you have in this thread, it IS tabular data... are you confusing with some other code snippet you posted?
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 13 Feb 2020, 02:02:19 pm
Jason, why do you think the information I am putting in to a table isn't tabular data?
For what you have in this thread, it IS tabular data... are you confusing with some other code snippet you posted?
maybe I miss interpreted what you said... or my memory is playing tricks on me! Lol!

So a div box is a waste of time then I guess...
Title: Re: Ideas... Display Flex?
Post by: GrumpyYoungMan on 13 Feb 2020, 03:10:44 pm
So I have reverted back to the table design and this is what I have managed to do so far - at my CodePen (https://codepen.io/GrumpyYoungMan/pen/abOzzWO)

I know there is till work to do...