Table Navigation Section Discussion (Re-Opened)

[etidd]

Wow, great responses!
Happy new year, happy holidays, and all those chestnuts.

It’s taken a while until I have been ready to respond after I spent some time with this prototype. I’m definitely leveling up a lot as I learn. Sorry for the delay. I’m working on other things but trying to stay in motion on this website business. It looks like the previous thread was closed due to inactivity.

Table Navigation Section Discussion

Hey everybody, What an exciting day it is to be able to post to the Sitepoint community. I’m here to continue our interactions regarding my popular legal templates page. There is a lot of progress that I’ve made with the page even though I am still targeting font sizes for the responsive design. The #tablenav section definitely breaks the layout, and I’ve added in a seventh table (There may be a couple more tables to be added.). I tried switching the anchor elements / links to buttons. It a…

Upon implementing this latest code, I’m seeing the JS manipulate the nav buttons, but I haven’t correctly gotten the tables to switch. I have some results from the JS validator, but I don’t think the code I have is invalid like my software says. Anyway, this post will be dedicated to the HTML/CSS as the JS will be more intricate as my ideas gestate. I will likely need to post in the JS section shortly when the CSS reaches a checkpoint.

• Just for the sake of being on the same page, I am going to outline the classes and ID’s and how I currently have the markup and styles structured (until advised otherwise): #btns-and-tables is a div containing both the buttons and the document tables. #toggle-all-tables was previously #expandhide. Here is the current markup structure:

        <!-- BEGIN TABLE NAVIGATION SECTION -->
        <section id="tablenav">
            <h3 data="click-info">Click to show a table:</h3>
            <div id="btns-and-tables"><!-- #btns-and-tables container -->
                <a href="#privateBanking" class="btn btn-nav">Private Banking</a>           
                <a href="#sovereignty" class="btn btn-nav">Sovereignty</a>
                <a href="#discharge" class="btn btn-nav">Debt Discharge</a>
                <a href="#defense" class="btn btn-nav">Civil &amp; Criminal Defense</a>                
                <a href="#forms" class="btn btn-nav">Forms</a>
                <a href="#adminProcesses" class="btn btn-nav">Administrative Processes</a>
                <a href="#notaryPresentments" class="btn btn-nav">Notary Presentments</a>
                <hr id="btndivider">
                <div id="toggle-all-tables">
                    <button class="btn expand hide-all" data-toggle="hideTables">Hide All Tables</button>
                    <button class="btn expand show-all" data-toggle="expandTables">Show Me Everything!</button>
                </div><!-- #toggle-all-tables -->
                <!-- END OF TABLE NAVIGATION BUTTONS -->
    
                <!-- BEGIN TABLE PORTION OF PAGE -->       

The second div that was serving as a container, #tablenavbuttons, was taken out, leaving the remaining section, #tablenav, as the main container.

• I designed a graphic for the hr elements, the bottom corners of the active table, and for another potential hr element between the table navigation section and/or tables and the .back div navigation links at the bottom of the page.
  

  
  
  The first divider is for the hr element within #tablenav. Its dimensions are 673 x 22 px and begins near the origin. The second cornerpieces are for and experiment with ornamental cornerpieces for the active table(s). The dimensions are 223 x 89 px and originates at coordinates 206, 32. The third divider is 279 x 9 px and begins at coordinates 179, 133. This is just a test as these look a little bit small at first glance. I thought it was best to combine the 3 graphics into one file to minimize HTTP requests, only showing portions of the image using CSS.

• I still do want the buttons to change to inline block display and away from the flex grid at a very wide width (at 65 em). I see that the order property is used to re-arrange the order of the flex grid items (which includes the tables themselves) as the width changes.
  To be honest, I’m so enamored with the single-layered buttons in block display (I think that’s correct.) with the tables appearing neatly beneath each button (turning a velvet red upon click as they do) that I might have scrapped this flex grid design, but I still love the flex grid for large devices in which the tables roll out beneath the button section. The design is broken from around 60 em and thinner as I left off coding there. Needed to try to plan with you more for fluid units that minimizes the code.
  

  

• Yes, I did upload new files to the live server that breaks the page temporarily for the sake of development (I guess I need another dummy domain to test stuff, but I don’t have one yet. Maybe I need to set up my own CodePen.). My audience has been given notice of the goings-on with a message inside of the message box at the top of the page, and I think many of them are probably happy to see me progressing. Whatever. I’m doing my best.

• I think the targets on the table styles are convoluted and anxiety-inducing. Look at this code:

/** document tables **/
section table, #tablenav table {
    width:90%;
    border-collapse:collapse;
	border:0.15em solid #000;
}
section table:first-of-type {  margin:36px auto; }    /* use the margin value to adjust space between the top and the table */
#tablenav table {display:none; }
section thead tr:first-of-type, #tablenav thead tr:first-of-type { 
	font-family:"Arial", serif;
	border-bottom:0.05em dashed #000;
}
section thead tr:first-of-type {
	text-shadow:1px 1px 4px #fcd8a9;
	font-size:2.25em;
}
#btns-and-tables thead tr:first-of-type {
	font-size:1.1em;
	border-top:none;
}
section thead tr:last-of-type, #btns-and-tables thead tr:last-of-type { font-size:1.2em; border-bottom:0.05em solid #000; }
section thead th, #btns-and-tables thead th { padding:6px 0; }
section thead th span:last-of-type, #btns-and-tables thead th span:last-of-type { display:none; }
section thead tr:last-of-type th, #btns-and-tables thead tr:last-of-type th { border-left:1px dotted #000; }
section tbody tr, #tablenav tbody tr {
	height:50px;
	border-bottom:1px dotted #000;
}
section table td, #btns-and-tables table td { width: 450px; } /* setting the width for the document name column */
section table tbody td + td, #btns-and-tables table tbody td + td { /* styling the date modified column */
	width:60px;
	padding:0;
	font-size:1.2em;
}
section table tbody tr td, #btns-and-tables table tbody tr td { border-right:1px dotted #000; }
section tbody tr td:first-of-type, #btns-and-tables tbody tr td:first-of-type { 
	padding:5px 0;
	font-family:"Courier", serif;
	font-size:1.2425em;
}
section tbody tr td:last-of-type, #btns-and-tables tbody tr td:last-of-type { width:70px; padding:0 0.2em; font-size:1.2425em; } /* styling the download column */
section table a, #btns-and-tables table a {
	font-size:0.95em;
	margin-bottom:2px;
}
section tbody tr td:last-of-type a + a , #btns-and-tables tbody tr td:last-of-type a + a {
    display:none;
}

• The #farewell div images above look terrible at narrow widths, too (as you see the space between the h4 and the #autograph image). They look jumbled and misaligned beginning around 58 em. I’m trying to resolve it myself to keep the autograph generally at the same vertical position as the flag to its left, but I’m wondering if the previous thread is still open (It’s not.). I could switch to use a single image, but I actually like the separate alt tags and think it’s better for accessibility.

-ty

[PaulOB]

@etidd

I think the targets on the table styles are convoluted and anxiety-inducing.

Yes, some of that code is nonsense or redundant now that things have changed.

For example you have this html.

      <section id="tablenav">
        <h3 data="click-info">Click to show a table:</h3>
        <div id="btns-and-tables">

Then you have this css:

section table, #tablenav table {
    width:90%;
    border-collapse:collapse;
	border:0.15em solid #000;
}

In your structure the rule (section table) is targeting the same element as ( #tablenav table) because the section has an id of tablenav. Therefore you have duplicated the rule for no reason but you have also created a logic error that may well trip up any other tables in your site because this rule (section table) is not specific and will target any table within a section anywhere it sees one.

You only need :

#tablenav table {
    width:90%;
    border-collapse:collapse;
    border:0.15em solid #000
}

You have made the same mistake all the way through that section and sometimes you use both and sometimes one or the other. There is no consistency and id rules will win out anyway so make sure the logic is always the same.

@etidd

, but I haven’t correctly gotten the tables to switch.

There is no js where you have pointed the link.

<script src="Scripts/tableSwitcher.js"></script>

If you are using mine or Russel’s code you will need to match all the details correctly including the ids and classes used and of course the css that goes with it and the js for the head section (which you can find in the codepen settings in Russell’s example).

Note that as you are using ids for styling tables you need to include an id of #tablenav in here.

    .hasJs #tablenav .tab {
      display: none;
    }

    .hasJs #tablenav .active {
      display: table;
    }

Like this:.

    /* hide and show tables only if javascript is present */
    #tablenav .btn,
    #tablenav h3.click-info {
      display: none;
    }

    .hasJs #tablenav .btn,
    .hasJs #tablenav h3.click-info {
      display: block;
    }

    .hasJs #tablenav .tab {
      display: none;
    }

    .hasJs #tablenav .active {
      display: table;
    }

@etidd

The #farewell div images above look terrible at narrow widths, too (as you see the space between the h4 and the #autograph image).

I’ve fixed that perfectly for you a number of times now so I will leave you to sort that out as you have now added an h4 in there that throws everything out. There is no natural alignment now and you will need to decide how it should look. The easiest solution would be to make the h4 display:none at smaller screen sizes but that whole section looks awkward to me now (and an h4 is not suitable for that one word as its not really a heading but is more a semantic issue than a layout issue).

I suggest you look at the minimal code and css that Russell and I used to make those tables display across all resolutions as you keep adding in fixed widths which break responsiveness. Tables are very good at being responsive if you leave them alone and let them do their job. Of course you need to style them and help them a bit but don’t keep forcing the issue with fixed widths.

@etidd

Maybe I need to set up my own CodePen.

It would be better if you did as we could then fork the code to fix the mistakes more easily.

@etidd

I designed a graphic for the hr elements, the bottom corners of the active table, and for another potential hr element between the table navigation section and/or tables and the .back div navigation links at the bottom of the page.

At the moment I don’t see your new images but don’t fall into the trap of setting fixed heights and widths if they are supposed to be responsive. You need to make sure that they fit on a responsive table without compromising the fluidity.

@etidd

The design is broken from around 60 em and thinner as I left off coding there

You have once again used fixed widths so that everything breaks again. In your 65em max-width media query you need to change the widths to something like this:

 #btns-and-tables a {
        font-size: 2em;
        /*width: 650px; removed*/
        width: 80%;/* added */
        max-width: 650px;/* added */
        margin: 5px auto 1.7rem;
      }

      #toggle-all-tables {
        /*width: 730px; removed*/
        max-width: 730px;/* added */
      }

      #toggle-all-tables button {
        font-size: 1.3em;
        padding: 5px 9px;
        width:auto;/* added */
      }

Very, very, very roughly like this:

That whole table needs to be re-coded as it is micro-managed much to much with too many fixed sizes and tweaks with too many media queries. You need to find a happy medium.