Achieving a “Mitred” Effect on the Borders for 1 Table + Header

HTML & CSS
41

Well we’re not communicating that much is clear. :tongue: I’ll get help for this elsewhere Paul. Don’t worry about it.

42

Here is the codepen.

The details of which are verbosely explained in my post #35. I’ve re-read my post a couple of times now and I don’t think I am actually able to explain it any better or any clearer.

Note that the svg tab is a fixed size which we discussed in detail when you presented the svgs to me. Therefore you must ensure that content or text will fit inside that tab. You can’t increase the font-size anymore than the space allows. The different playfair font you want for the ampersand is actually fractionally bigger than the other font and will break the height restriction.

That’s why I have had to reduce the font-size a little.

The new css is this and is in the codepen.

    .svgtabs span.tabtext {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 9px .5rem 2px;
      font-weight: bold;
      color: #000;
      font-style: italic;
      font-family: 'goudy bookletter 1911', serif;
      font-size: 3.5rem;
      line-height: 3.9rem;
    }

    .svgtabs span.tabtext-inner {
      font-family: 'playfair display', serif;
    }

I’m on holiday abroad for a month soon now anyway so I wish you luck with this.

43

Thank you Paul! Have a wonderful holiday my friend!

1 Like
44

I wanted you to see how exquisitely this page looks with a new bottom divider and refreshed link colors. I couldn’t have prepared myself that an old Table of Contents could come out this well but I’m thrilled with the results. The animated tab just looks perfect Paul. I can’t thank you enough. I dedicated it to you and snadyleiby.

<!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=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&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=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Gabriela&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap" rel="stylesheet">

  <title>w&#47;Paul svgpar1_ani YOUR TITLE HERE</title>

  <style>
    body {
      width: 1080px;
      background-color: black;
      margin: 0 auto;
      color: black;
      font-family: 'roboto slab', serif;
      font-weight: 700;
      font-size: 2.5rem;
      line-height: 2.63rem;
    }

    .leada {
      padding: 4rem 2rem 1rem 2rem;
      background: white;
      color: blue;
      text-align: center;
      font-family: 'solway', serif;
      font-size: 3.25rem;
      line-height: 1.1;
      font-weight: bold;
    }

    .leadb {
      padding: 0rem 2rem 4rem 2rem;
      background: white;
      color: blue;
      text-align: center;
      font-family: 'solway', serif;
      font-size: 2.25rem;
      line-height: 1.02;
      font-weight: bold;
    }

    .ssz1 {
      margin-top: 3.13rem;
      text-align: center;
      font-family: 'roboto serif', serif;
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;
      color: #ebf6ff;
      /* PALE BLUE */
    }

    .ssz2 {
      text-align: center;
      margin-bottom: 1.75rem;
      font-family: 'roboto serif', serif;
      font-size: 1.75rem;
      line-height: 2rem;
      font-weight: bold;
      color: #ebf6ff;
      /* PALE BLUE */
    }

    .hilite {
      margin: 0rem 2.75rem 0rem 2.75rem;
      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;
      padding-top: .5rem;
      padding-right: .8rem;
      padding-bottom: .6rem;
      padding-left: .8rem;
    }

    td {
      padding-top: .5rem;
      padding-right: .5rem;
      padding-bottom: .6rem;
      padding-left: .8rem;
    }

    .table2,
    .table3 {
      border-spacing: 0;
    }

    /* ▬▬▬▬▬▬▬ TABLE 1 ▬▬▬▬▬▬▬ */
    .table1 {
      width: 86%;
      margin: 0rem 7% 0rem 7%;
      border: 1.75rem groove #dab471;
      padding: .8rem;
      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: 600;
    }

    .group1 {
      /*   CLASS LETTER (A)  */
      width: 8%;
      color: crimson;
      border-right: 3px solid black;
      font-family: 'roboto', sans-serif;
      font-weight: 900;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .head1 {
      width: 92%;
      /* DESCRIPTION */
      color: crimson;
      font-family: 'roboto', sans-serif;
      font-weight: 900;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    /* ▬▬▬▬▬▬▬ TABLE 2 ▬▬▬▬▬▬▬ */
    .table2 {
      width: 86%;
      margin: 0rem 7% 0rem 7%;
      border-left: 1.75rem groove #dab471;
      border-right: 1.75rem groove #dab471;
      font-family: 'roboto', sans-serif;
      font-size: 2.25rem;
      line-height: 2.31rem;
      font-weight: bold;
      color: black;
    }

    .group2 {
      /*   CLASS LETTER (B-D)  */
      width: 8%;
      color: blue;
      border-right: 3px solid black;
      font-family: 'roboto', sans-serif;
      font-weight: 900;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .head2 {
      width: 92%;
      /* DESCRIPTION */
      color: blue;
      font-family: 'roboto', sans-serif;
      font-weight: 900;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .table2 tbody tr:nth-child(odd) {
      background-color: white;
    }

    .table2 tbody tr:nth-child(even) {
      background-color: #ebf6ff;
      /* PALE BLUE */
    }

    /* ▬▬▬▬▬▬▬ TABLE 3 ▬▬▬▬▬▬▬ */
    .table3 {
      width: 86%;
      margin: 0rem 7% 7rem 7%;
      border-left: 1.75rem groove #dab471;
      border-right: 1.75rem groove #dab471;
      border-bottom: 1.75rem groove #dab471;
      font-family: 'roboto', sans-serif;
      font-size: 2.25rem;
      line-height: 2.31rem;
      font-weight: bold;
      color: black;
    }

    .group3 {
      width: 8%;
      /* CLASS LETTER (E-H) */
      color: green;
      border-right: 3px solid black;
      font-family: 'roboto', sans-serif;
      font-weight: 900;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .head3 {
      width: 92%;
      /* DESCRIPTION */
      color: green;
      font-family: 'roboto', sans-serif;
      font-weight: 900;
      font-size: 2.75rem;
      line-height: 2.88rem;
    }

    .table3 tbody tr:nth-child(odd) {
      background-color: white;
    }

    .table3 tbody tr:nth-child(even) {
      background-color: #f3ffeb;
      /* PALE GREEN */
    }

    /* ▬▬▬ RESTORES “.JOT” ▬▬▬ */
    /* Restores the vertical line | 
on a table in which you’ve 
removed the ➜DEFAULT ROW LINES 
that tables have. Note those row 
lines don’t show up anywhere in 
the CSS! I styled it .JOT previously. */
    .table1 tbody tr td:nth-of-type(1) {
      border-right: 3px solid black;
    }

    .table2 tr td:first-child,
    .table3 tr td:first-child {
      border-right: 3px solid black;
    }

    /* ▬▬▬▬▬ + IMPORTANT! ▬▬▬▬▬
AND! ADD THIS TO PLUG THE LEAK IN
THE ROW w/THE GORGEOUS ANI TAB! */
    .table2 tr td.svg-header:first-child {
      border-right: none
    }

/* ━━━━━━━━━ COLORS ━━━━━━━━*/

.ivory {
    color: #ffffee;
    text-align: center;
    margin: 2.25rem 0rem 2.25rem 0rem;
}

.blu {color: blue}
.blub {
    color: blue;
    font-weight: bold;
}

.crim {color: crimson}
.crimb {
    color: crimson;
    font-weight: bold
}
.crimi {
    color: crimson;
    font-style: italic
}

.green {color: #248900}
.greenb {
    color: #248900;
    font-weight: bold
}
/* ▬▬▬▬▬▬▬ LINKS ▬▬▬▬▬▬*/

.cylinkhere a:link {
    color: cyan;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.1;
    }
.cylinkhere a:visited {
    color: cyan;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: _4rem;
    line-height: 1.1;
    }
/* ▬▬▬▬▬▬ */
.cylinkquest a:link {
    color: cyan;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.05;
    }
.cylinkquest a:visited {
    color: cyan;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.05;
    }
/* ▬▬▬▬▬▬ */
.cylinkend a:link {
    color: cyan;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.02;
    }
.cylinkend a:visited {
    color: cyan;
    font-family: 'solway', serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.02;
    }

    /* ━━━━━━ 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: 5rem;
      font-weight: 900;
    }

    .clamcr {
      color: crimson;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.75rem;
      font-weight: 900;
    }

    .clamye {
      color: yellow;
      font-style: italic;
      font-family: roboto, sans-serif;
      font-size: 2.69rem;
      font-weight: 900;
    }

    /* ▬▬▬▬▬ START SMOKE TAB ▬▬▬▬ */
    /* ANIMATED  */
    td.svg-header {
      padding: 1rem .5rem 0;
      background: white;
      border-bottom: 7px solid #000;
      border-top: 0px solid #000;
    }

    .svgtabs.onetab span {
      --tab1-color: #fff;
    }

    .svgtabs {
      width: 100%;
      margin: auto;
      display: flex;
      overflow: hidden;
    }

    .svgtabs a {
      color: #000;
      text-decoration: none;
      flex: 1 0 0;
      display: grid;
      align-items: center;
      grid-template-areas: "tab";
      position: relative;
      text-align: center;
      margin-right: -9rem;
      transition: 0.3s ease;
    }

    .svgtabs.onetab a {
      justify-content: center;
      margin-right: 0;
    }

    .svgtabs a:last-child {
      margin-right: 0 !important;
    }

    .svgtabs svg {
      display: block;
      grid-area: tab;
      position: relative;
      z-index: 1;
    }

    .svgtabs.onetab svg {
      width: 620px;
      height: 75px;
      top: 2px
    }

    .svgtabs span.tabtext {
      grid-area: tab;
      position: relative;
      z-index: 2;
      padding: 9px .5rem 2px;
      font-weight: normal;
      color: #000;
      font-style: italic;
      font-family: 'crete round', serif;
      font-size: 3.9rem;
      line-height: 3.9rem;
    }

    .svgtabs span.tabtext-inner {
      font-family: 'playfair display', serif;
      font-weight: bold;
    }

    #test {
      height: 220px;
      animation: tab 15s infinite
    }

    @keyframes tab {
      0% {
        height: 200px;
        width: 260px;
      }

      50% {
        height: 140px;
        width: 180px;
      }

      100% {
        height: 200px;
        width: 260px
      }
    }

.divider {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 2.75rem 0 0 0;
    width: 750px;
    height: 90px;
}

.contact {
    margin: 0;
    padding: 0rem 0rem 7rem 0rem;
    background-color: black;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 2.25rem;
    line-height: 2.38rem;
    font-weight: bold;
}
.here {
    color: #ffffee;
    text-align: center;
    padding-top: 5rem;
    margin: 0rem 0 1rem 0;
    font-family: 'solway', serif;
    font-size: 4rem;
    line-height: 1.1;
    font-weight: bold;
}
.thanks {
    color: #ffffee;
    text-align: center;
    margin: 0rem 4rem 1rem 4rem;
    font-family: 'solway', serif;
    font-size: 2rem;
    line-height: 1.02;
    font-weight: bold;
}
.quest {
    color: #ffffee;
    text-align: center;
    margin: 2.25rem 2rem 2.25rem 2rem;
    font-family: 'solway', serif;
    font-size: 3rem;
    line-height: 1.05;
    font-weight: bold;
}
.end {
    color: #ffffee;
    text-align: center;
    margin: 1rem 4rem 2.5rem 4rem;
    font-family: 'solway', serif;
    font-size: 2rem;
    line-height: 1.02;
    font-weight: bold;
}
.clamiv35 {
	color: #ffffee;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
}

a:active {color: grey}
a:hover {color: grey}
a:link {color: blue}
a:visited {color: blue}

.new {
      color: yellow;
      background-color: crimson;
      padding: .4rem .6rem .4rem .6rem;
      margin-left: 1.5rem;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.25rem;
      font-weight: bold;

/* ▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬ */
</style>
</head>

<body>

  <div class="leada">
    SVG Animated &ldquo;Smoke&rdquo; Tab with<br>
    nth child Striping & Mitred Border*<br>
  </div>

  <div class="leadb">
    *see CSS comments for single <br>
    &ldquo;JOT&rdquo; border on COLUMN 1 &mdash; nth child <span class="crim">Tricky</span><span class="clamcr">!</span><br>
  </div>

  <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="table1">
    <tbody>
      <tr>
        <td>
          Your Title Here
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table2">
    <tbody>
      <tr>
        <td class="group1">A.</td>
        <td class="head1">PLEBISCITO</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://yoursitehere.com/index.html" target="_blank">Home</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">About</a> <span class="new">NEW</span><span class="clamye">!</span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          Table of Contents (You Are Here)</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">&lt;shape-outside: ellipse&gt; 01</a> <span class="new">NEW</span><span class="clamye">!</span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">&lt;shape-outside: polygon&gt; 01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">2_flex_columns_nth_child_01</a>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">Template Complex Business Letter for 2 Addressees</a> w&#47;Sticker Positions from USPS P.O.D. Counter Rolls
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">REM Conversion Chart</a> Flex w&#47;nth Child
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">Vertically Center an Image</a> &amp; Horizontally Including Text w&#47;Page Counter Footer
        </td>
      </tr>

      <tr>
        <td class="svg-header" colspan="2">
          <div>
            <div class="svgtabs onetab">
              <a class="svgtab1" href="#">
                <span class="tabtext"><span class="tabtext-inner">&</span> Heading!</span>
                <svg viewBox="0 0 164.042 15.843">
                  <clipPath id="shape">
                    <path id="front-fill" d="M121.772 232.987c-11.042 0-13.643 5.879-17.411 10.564-4.653 5.788-11.776 8.51-11.776 8.51h145.426s-7.123-2.722-11.776-8.51c-3.768-4.685-6.37-10.564-17.412-10.564Z" transform="translate(-83.277-232.217)" />
                  </clipPath>

                  <path style="fill:#000; stroke-width:4; stroke:#000" d="M121.772 232.217c-5.022 0-8.508 1.208-11.179 3.182-2.67 1.974-4.52 4.54-6.502 7.008-3.962 4.935-8.28 9.653-20.814 9.653h11.356c5.25-1.985 8.309-5.303 10.882-8.509 2.017-2.511 3.785-4.923 6.166-6.683 2.382-1.76 5.38-2.823 10.091-2.823h87.051c4.711 0 7.71 1.062 10.091 2.823 2.382 1.76 4.15 4.172 6.166 6.683 2.574 3.206 5.633 6.524 10.882 8.51h11.357c-12.534 0-16.852-4.72-20.815-9.654-1.98-2.468-3.83-5.034-6.501-7.008-2.671-1.974-6.157-3.182-11.18-3.182Z" transform="translate(-83.277 -232.217)" />

                  <image id="test" width="270" height="220" href="https://assets.codepen.io/74047/PARCHMENT-A.jpg" clip-path="url(#shape)" />
                </svg>
              </a>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td class="group2">B.</td>
        <td class="head2">TURPITUDINIS</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB CSSPAR1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB SVGPAR1_ANI</a></span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS CSSPAR2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS SVGPAR2_ANI</a></span> &#47; ANIMATED <span class="new">NEW</span><span class="clamye">!</span>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS CSSPAR3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS SVGPAR3_ANI</a></span> &#47; ANIMATED Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS CSSPAR7</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">C.</td>
        <td class="head2">SAPIENTIA</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB CSSTAB1BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS CSSTABS2BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS CSSTABS3BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS CSSTABS7BDR</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td class="group2">D.</td>
        <td class="head2">VERBA VESTRA SUNT</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB CSSTAB1</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS CSSTABS2</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS CSSTABS3</a> &mdash; Coming Soon!
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS CSSTABS7</a> &mdash; Coming Soon!
        </td>
      </tr>
    </tbody>
  </table>

  <table class="table3">
    <tbody>
      <tr>
        <td class="group3">E.</td>
        <td class="head3">CONFUSIOQUE</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB SVGTAB1BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS SVGTABS2BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS SVGTABS3BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS SVGTABS7BDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">F.</td>
        <td class="head3">DISPUTATIONEM</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB SVGTAB1</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS SVGTABS2</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS SVGTABS3</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS SVGTABS7</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td class="group3">G.</td>
        <td class="head3">FUTTILES</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB SVGTAB1PATTBDR</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS SVGTABS2PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS SVGTABS3PATT3BDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS SVGTABS7PATTBDR</a></span> &mdash; Coming!</td>
      </tr>
      <tr>
        <td class="group3">H.</td>
        <td class="head3">TEMPERANTIAM</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">1 TAB SVGTAB1PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">2 TABS SVGTABS2PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">3 TABS SVGTABS3PATT</a></span> &mdash; Coming Soon!</td>
      </tr>
      <tr>
        <td></td>
        <td><span class="bk1link">
            <a href="https://www.yoursitehere.com/index.html" target="_blank">7 TABS SVGTABS7PATT</a></span> &mdash; Coming Soon!<br>&nbsp;</td>
      </tr>
    </tbody>
  </table>

<div class="contact">
<div class="divider">
<img src="https://lh3.googleusercontent.com/pw/AP1GczMGmcUhjEhHQUTiVeQePOCSfz4_pGRT-jQ7thHRXjCttLue2XKqQyFwEc9kJtb9ryvUdPk6eaLHc6qdHP4PWl3tsrDbhyWp8ZRjZgUo0RX4JVXciA=w750-h90">
</div>

    <div class="here">
    <span class="cylinkhere">
    <a href="https://semicodin.nekoweb.org/vault/SVGPAR1_ANI.ZIP">
Code Here.</a></span>
    </div>

    <div class="thanks">
This code courtesy of Paul O&rsquo;Brien<br>
&amp; &ldquo;snadyleiby&rdquo; at the Sitepoint Forums
    </div>

    <div class="quest">
    <span class="cylinkquest">
Got Questions? You can PM me at<br>
    <span class="cylinkquest"><a href="https://sitepoint.com/community/c/html-css/25">
the Sitepoint Forums</a></span><span class="clamiv35">!</span>
    </div>

    <div class="end">
CLICK HERE TO PROCEED<br>
    <span class="cylinkend">
      <a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a></span></span>
    </div>

  </div><!-- CLOSING CONTACT -->

</body>
</html>
45

Paul I can’t believe I’m going through this again. All I did on my toc was change the address of the parchment-a.jpg on your Codepen to my own nekoweb account and look at what it’s doing! Did you have your parchment rotated at some point? Because otherwise they are identical! :rolleyes: I also tried putting both the parchment and the html at my semicodin.nekoweb.org base as with shape-outside just making it easier for the html to make nice with parchment but nothing works. Either it’s your Codepen image or it breaks.

46

I believe I answered this question in the other thread and also mentioned the missing images in my last post here.

The keyframes were changed to take into account the different sized parchment.

Use these with that parchment.

    @keyframes tab {
      0% {
        height: 220px;
        width: 210px;
      }

      50% {
        height: 200px;
        width: 170px;
      }

      100% {
        height: 220px;
        width: 210px;
      }
    }
1 Like
47

It looks GREAT Paul! Thank you so much! I love it!

49

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.