Alright guy all fun aside . . . I’m using a different counter (from hiStats, still free but much more data without a 200 visit cap and up to 300 sites for free account come-to-daddy) but I want the little box to display in the center at the bottom of the page.
Actually anybody could help me with this . . .
I thought I’d better check in with you first because of that absolute in your counter code that I borrowed from the other page you did for me. (((Paging @snadyleiby))) Get back in the house man I know you’re out there somewhere hiking. 
Here is a severely-shortened toc. Do you see how the counter is riding up overlapping the main content? That’s supposed to be at the bottom of the page (shoot none of it shows). So I want it at the bottom of the page and centered. Any ideas how I can get this counter working? By the way, their code is rife with errors tsk. 
I’m afraid to touch it though.
<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<title>TABLE OF CONTENTS ᰄ semicodin</title>
<style>
body {
width: 1080px;
background-color: black;
margin: 0;
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
#counter {
position: absolute;
bottom: 0;
max-width: 100%;
}
.ssz1 {
margin-top: 3.13rem;
text-align: center;
font-family: 'crete round';
font-size: 2rem;
line-height: 2.25rem;
font-weight: bold;
color: #ebf6ff; /* PALE BLUE */
}
.ssz2 {
text-align: center;
margin-bottom: 1.75rem;
font-family: 'crete round';
font-size: 1.75rem;
line-height: 2rem;
font-weight: bold;
color: #ebf6ff; /* PALE BLUE */
}
.henpen {
text-align: center;
color: #ffffee; /* ivory */
margin: 2.5rem 16% 0rem 16%;
font-size: 3.75rem;
line-height: 3.88;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
.thanks {
margin: 2.5rem 15% 6.25rem 15%;
color: #ffffee; /* ivory */
text-align: center;
font-style: italic;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.hilite {
margin: 2rem 2.94rem 1rem 2.94rem;
text-align: center;
font-style: italic;
color: black;
background-color: white;
font-family: 'crete round', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
.design1 {
width: 88%; /* DESCRIPTION */
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.here {
color: #888888;
font-family: 'roboto slab', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 2.63rem;
}
/* ━━━━━━━━ TABLE 2 ━━━━━━━━ */
.table2 th {
border-bottom: 1.75rem groove #bbac86; /* mushrooms */
width: auto;
color: #ffffee; /* ivory */
text-align: center;
font-style: italic;
background-color: black;
font-family: 'crete round', serif;
font-size: 4rem;
line-height: 4.25rem;
font-weight: bold;
}
.group2 { /* CLASS LETTER (A-E) */
width: 8%;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
color: blue;
}
.design2 {
width: 88%; /* DESCRIPTION */
color: blue;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 2.63rem;
}
.table2 {
width: auto;
margin: 2.25rem 9% 0rem 9%;
border-top: 1.75rem groove #bbac86; /* mushrooms */
border-left: 1.75rem groove #bbac86; /* mushrooms */
border-right: 1.75rem groove #bbac86; /* mushrooms */
border-collapse: collapse;
font-family: 'roboto slab', serif;
font-size: 2.25rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
.table2 tbody tr:nth-child( odd ) {
background-color: white;
}
.table2 tbody tr:nth-child( even ) {
background-color: #ebf6ff; /* PALE BLUE */
}
.table2 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table2 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
/* ━━━━━━━━ TABLE 3 ━━━━━━━━ */
.group3 { /* CLASS LETTER (A-E) */
width: 8%;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.75rem;
line-height: 2.88rem;
color: green;
}
.design3 {
width: 88%; /* DESCRIPTION */
color: green;
font-family: 'calistoga', serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 2.63rem;
}
.table3 {
width: auto;
margin: 0rem 9% 1.25rem 9%;
border-bottom: 1.75rem groove #bbac86; /* mushrooms */
border-right: 1.75rem groove #bbac86; /* mushrooms */
border-left: 1.75rem groove #bbac86; /* mushrooms */
border-collapse: collapse;
font-family: 'roboto slab', serif;
font-size: 2.25rem;
line-height: 2.31rem;
font-weight: bold;
color: black;
}
.table3 tbody tr:nth-child( odd ) {
background-color: white;
}
.table3 tbody tr:nth-child( even ) {
background-color: #f3ffeb; /* PALE GREEN */
}
.table3 tbody tr td:nth-of-type(1) {
border-right: .19rem solid black;
text-align: center;
}
.table3 tbody tr td:nth-of-type(2) {
border-right: .19rem solid black;
text-align: left;
}
/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */
.ivory {
color: #ffffee;
text-align: center;
margin: 2.25rem 0rem 2.25rem 0rem;
}
.blu {color: blue}
.blub {color: blue; font-weight: bold;}
.fusch {color: #ca009b}
.fuschb {color: #ca009b; font-weight: bold}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #248900} /* green */
.greenb {color: #248900; font-weight: bold}
/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */
a:active {color: crimson}
a:hover {color: crimson}
a:link {color: blue}
a:visited {color: blue}
.redlink a:link {color: crimson}
.redlink a:visited {color: crimson}
.whlink a:link {color: #ffffee} /* ivory */
.whlink a:visited {color: #ffffee} /* ivory */
.bk1link a:link {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.bk1link a:visited {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.bk2link a:link {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.bk2link a:visited {
color: black;
font-family: 'roboto slab', serif;
font-weight: 700;
font-size: 2.5rem;
line-height: 2.63rem;
}
.bnlink a:link {
padding-bottom: 10px;
color: #bbac86; /* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
.bnlink a:visited {
padding-bottom: 10px;
color: #bbac86; /* BROWN */
background: black;
text-align: center;
font-style: italic;
font-family: 'roboto condensed', sans-serif;
font-size: 1.88rem;
line-height: 2rem;
font-weight: 700;
}
/* ━━━━━━ MISCELLANEOUS ━━━━━━━ */
.ctr {text-align: center}
.undr {text-decoration: underline}
.clamwh {
color: #ffffee; /* IVORY */
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: #ebf6ff; /* PALE BLUE */
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambk {
color: black;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clamcr {
color: crimson;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
.clambu {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 2.69rem;
font-weight: 900;
}
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
</style>
</head>
<body>
<div class="ssz1">
This Is A Small Screen Zone*</div>
<div class="ssz2">
*Designed and built for SmartPhones<span class="clamlbu">!</span></div>
<table class="table2">
<thead>
<tr>
<th colspan="2">Table of Contents</th>
</tr>
</thead>
<tbody>
<tr>
<td class="group2"></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/index.html" target="_blank">Home</a></span>
</td>
</tr>
<tr>
<td class="group2"></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/about.html" target="_blank">About</a></span></td>
</tr>
<tr>
<td class="group2"></td>
<td class="design1">
Table of Contents <span class="here">(You Are Here)</span></td>
</tr>
<tr>
<td class="group2"></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/#_THRU_J/shout_ellipse_01.html" target="_blank"><shape-outside: ellipse></a></span></td>
</tr>
<tr>
<td class="group2"></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/#_THRU_J/shout_polygon_01.html" target="_blank"><shape-outside: polygon></a></span></td>
</tr>
<tr>
<td></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/K_THRU_Z/uspspod01.html" target="_blank">Complex Business Letter</a></span> Form for 2 Addressees w/USPS P.O.D. Counter Roll Sticker Positions
</td>
</tr>
<tr>
<td></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/K_THRU_Z/rem_conversion_chart.html" target="_blank">REM Conversion Chart</a></span> Flex w/nth Child</td>
</tr>
<tr>
<td class="group2"></td>
<td class="design1">
<span class="bk1link">
<a href="https://semicodin.nekoweb.org/K_THRU_Z/vert_center_image_w_text.html" target="_blank">Vertically Center an Image</a></span> & Horizntly Including Text w/Page Counter Footer</td>
</tr>
<tr>
<td class="group2">A.</td>
<td class="design2">CSS — PARCHMENT w/BORDER</td>
</tr>
<tr>
<td></td>
<td>1 TAB CSSPAR1 — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td>1 TAB CSSPAR1_ANI / ANIMATED — Soon!</td>
</tr>
<tr>
<td></td>
<td>2 TABS CSSPAR2 — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td>2 TABS CSSPAR_ANI / ANIMATED — Soon!</td>
</tr>
<tr>
<td></td>
<td>3 TABS CSSPAR3 — Coming Soon!</td>
</tr>
<tr>
<td></td>
<td>3 TABS CSSPAR3_ANI / ANIMATED — Soon!</td>
</tr>
<tr>
<td></td>
<td>7 TABS CSSPAR7 — Coming Soon!</td>
</tr>
</tbody>
</table>
<div class="ivory">
Got Questions? You can PM me at<br>
<span class="whlink">
<a href="https://sitepoint.com/community/u/semicodin/activity">the Sitepoint Forums</a></span><span class="clamwh">!</span>
<br>
<br>
</div>
<div class="thanks">
The author would also like to thank the fine artists at Inkscape Forum for their valuable contribution in rendering
<br>
<span class="hilite"> 3 very clean </span>
<br>
masters of the tabs in SVG, most especially “polygon” and “tyler”. You guys are the best! Until we meet again . . .
</div>
<div id="counter">
<!-- Histats.com START (html only)-->
<a href="/" alt="page hit counter" target="_blank" >
<embed src="//s10.histats.com/430.swf" flashvars="jver=1&acsid=4873214&domi=4" quality="high" width="112" height="75" name="430.swf" align="middle" type="application/x-shockwave-flash" pluginspage="//www.macromedia.com/go/getflashplayer" wmode="transparent"></a>
<img src="//sstatic1.histats.com/0.gif?4873214&101" alt="html hit counter" border="0">
<!-- Histats.com END -->
</div>
</body>
</html>
