Web Analytics Made Easy -
StatCounter Styling-by-Cell in a Flexbox - CodingForum

Announcement

Collapse
No announcement yet.

Styling-by-Cell in a Flexbox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Styling-by-Cell in a Flexbox

    Hi again all.

  • #2
    Hi again all. I’m stubbornly going forward with a FLEXBOX approach to my little table project because I’m getting too damn much grief with the limitations of a Table: namely, the styling options for CELLS, COLUMNS & ROWS.

    I read (in someone’s post somewhere) that nth-child will not work where ROWSPAN is present. If true, then there must be some option for reaching into the equivalent of one isolated table cell and saying (for example) This one cell is using 1.75rem ‘Henny Penny' font.

    That’s what I’m after – that and the font styling of entire rows and columns. In my other thread I used ROWSPAN; now I want to use FLEXBOX.

    So right out of the gate my first question is: What should I be referring to that first cell as (the pale green one): a row or a column? I would prefer a row because the three other cells to the right are rows, but I’ll defer to the forum.

    I just don’t have a clue where to begin here because of the placement of that pale green cell. My only successful Flexbox was my REM Conversion Chart — https://codepen.io/semicodin/pen/ZErYNvm — and that’s a different animal altogether. Thanks guys!
    — semicodin

    Oh and — please ignore the colors below; I’m only using them to make it easier to discuss the code!

    Click image for larger version  Name:	PUBLIC nth-child.png Views:	0 Size:	47.3 KB ID:	2436115
    Last edited by semicodin; Sep 16, 2022, 01:21 PM.

    Comment


    • #3
      In my effort to give each of the four ROWS their own identity I cobbled together the following. The .BUCKET is the flex container although I couldn’t figure out what to put in it. None of this code works it goes without saying, but I made a brave attempt at a numbering scheme lol!!

      Code:
      .BUCKET {
      }
      td:nth-child(1n) {
      width: 55%;
      border-top: .1rem SOLID BLACK;
      padding: .5rem;
      text-align: LEFT;
      vertical-align: TOP;
      line-height: 1;
      font-weight: 600;
      font-size: 1.25rem;
      font-family: 'Roboto Slab', display;
      }
      td:nth-child(2n) {
      width: 45%;
      border-top: .1rem SOLID BLACK;
      border-bottom: NONE;
      padding: .5rem;
      text-align: LEFT;
      vertical-align: TOP;
      line-height: 1.1;
      font-size: 1.25rem;
      font-weight: 600;
      font-family: 'Courier Prime', monospace;
      }
      td:nth-child(3n) {
      width: AUTO;
      border-top: .1rem SOLID BLACK;
      padding: .5rem;
      text-align: LEFT;
      vertical-align: TOP;
      line-height: 1;
      font-weight: 600;
      font-size: 1.25rem;
      font-family: 'Henny Penny', display;
      }
      td:nth-child(4n) {
      width: AUTO;
      border-top: .1rem SOLID BLACK;
      border-bottom: NONE;
      padding: .5rem;
      text-align: LEFT;
      vertical-align: TOP;
      line-height: 1.1;
      font-size: 1.25rem;
      font-weight: 600;
      font-family: 'Metal Mania', Display;
      }
      I’m using four completely disparate fonts because I want their insertion – or their absence – to be conspicuous. Here are their header links if you want to use them in your solutions to the thread:

      Code:
      <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,[email protected],400;0,700;1,400;1,700&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=Metal+Mania&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected];200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
      Last edited by semicodin; Sep 16, 2022, 12:59 PM.

      Comment


      • #4
        Hi there semicodin,

        here is a basic example for you to play with...

        Full Page View
        https://codepen.io/coothead/full/NWMpdRy

        Editor View
        https://codepen.io/coothead/pen/NWMpdRy

        HTML
        Code:
        <!DOCTYPE HTML>
        <html lang="en">
        <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
        
        <title>Untitled document</title>
        
        <link rel="stylesheet" href="screen.css" media="screen">​
        
        </head>
        <body>
         <div id="information-container">
        
          <!-- top -->
          <div>header one</div><!--  #information-container > div:nth-of-type(1) -->
          <div>header two</div><!--  #information-container > div:nth-of-type(2) -->
          <!-- top -->
        
          <div><!--  #information-container > div:nth-of-type(3) -->
        
           <!--left content -->
           <div>left</div><!-- #information-container > div:nth-of-type(3) > div:nth-of-type(1) -->
           <!--left content -->
        
           <!--right content -->
           <div><!-- #information-container > div:nth-of-type(3) > div:nth-of-type(2) -->
            <div>right 1</div><!-- #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) -->
            <div>right 2</div><!-- #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) -->
            <div>right 3</div><!-- #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(3) -->
           </div>
           <!-- right content -->
        
        <!--  #information-container > div:nth-of-type(3) --></div>
        
        <!-- #information-container --></div>
        
        </body>
        </html>​
        CSS
        Code:
        *{
            box-sizing: border-box;  
         }
        body {
            background-color: #f9f9f9;
            font: normal 1em / 1.5em  sans-serif;
         }
        #information-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
         }
        
        /******************** header **********************/
        
        #information-container >div:nth-of-type(1),
        #information-container >div:nth-of-type(2){
            flex: 1;
            padding: 1rem;
            border: 0.25rem solid #0ff;
            background-color: #000;
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
            text-align: center;
         }
        #information-container > div:nth-of-type(1) {
            border-right: 0;
         }
        #information-container > div:nth-of-type(2) {
            border-left: 0;
         }
        
        /******************** header **********************/
        
        /******************** content *********************/
        
        #information-container > div:nth-of-type(3){
            display: flex;
            flex-direction: row;
            width: 100%;
            border: 0.25em solid #000;
            border-top: 0;
         }
        #information-container > div:nth-of-type(3) > div{
            flex: 1;
         }
        #information-container > div:nth-of-type(3) > div:nth-of-type(1){
            padding: 1em;
            border-right: 0.125em solid #000;
            background-color: #e2ff9e;
         }
        #information-container > div:nth-of-type(3) > div:nth-of-type(2){
            border-left: 0.125em solid #000;
         }
        #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div {
            padding: 1em;
         }
        #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(1) {
            border-bottom: 0.125em solid #000;
            background-color: #ffa3d3;
         }
        #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(2) {
            border-top: 0.125em solid #000;
            border-bottom: 0.125em solid #000;
            background-color: #96e2ff;
         }
        #information-container > div:nth-of-type(3) > div:nth-of-type(2) > div:nth-of-type(3) {
            border-top: 0.125em solid #000;
            background-color: #ffda7e;
         }
        
        /******************** content *********************/
        </style>​


        coothead
        Last edited by coothead; Sep 16, 2022, 04:27 PM.
        ~ the original bald headed old fart ~

        Comment


        • #5
          Thanks Coot. Going to do just that!

          Comment


          • #6
            Code:
            td:nth-child(1) {
            width: 55%;
            border-top: .1rem SOLID BLACK;
            padding: .5rem;
            text-align: LEFT;
            vertical-align: TOP;
            line-height: 1;
            font-weight: 600;
            font-size: 1.25rem;
            font-family: 'Roboto Slab', serif; /*⇐WHY NO DISPLAY?? */
            }
            td:nth-child(2) {
            width: 55%;
            border-top: .1rem SOLID BLACK;
            border-bottom: NONE;
            padding: .5rem;
            text-align: LEFT;
            vertical-align: TOP;
            line-height: 1.1;
            font-size: 1.25rem;
            font-weight: 600;
            font-family: 'Courier Prime', monospace; /*⇐ NO DSPLY?? */
            }
            td:nth-child(3) {
            width: 55%;
            border-top: .1rem SOLID BLACK;
            padding: .5rem;
            text-align: LEFT;
            vertical-align: TOP;
            line-height: 1;
            font-weight: 600;
            font-size: 1.25rem;
            font-family: 'Henny Penny', display; /*⇐WHY NO DSPLY?? */
            }
            td:nth-child(4) {
            width: 55%;
            border-top: .1rem SOLID BLACK;
            border-bottom: NONE;
            padding: .5rem;
            text-align: LEFT;
            vertical-align: TOP;
            line-height: 1.1;
            font-size: 1.25rem;
            font-weight: 600;
            font-family: 'Metal Mania', display; /*⇐WHY NO DSPLAY?? */
            }
            Last edited by semicodin; Sep 17, 2022, 02:07 PM.

            Comment


            • #7
              Wow it ate my question. Anyway what is wrong with these four blocks of code? Why won't the unique fonts in each of them display?

              Comment


              • #8
                Coot, you have lost your mind! What are you smoking good buddy? Lol Are you kidding me? . . .
                <script type="text/javascript">
                window.displayAds = "true" === "true";
                </script>
                <script>(function(){/*
                Copyright The Closure Library Authors.
                SPDX-License-Identifier: Apache-2.0
                */
                'use strict';var g=function(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}},l=this||self,m=/^[\w+/_-]+[=]{0,2}$/,p=null,q=function(){},r=function(a){var b=typeof a;if("object"==b)if(a){if(a instanceof Array)return"array";if(a instanceof Object)return b;var c=Object.prototype.toString.call(a);if("[object Window]"==c)return"object";if("[object Array]"==c||"number"==typeof a.length&&"undefined"!=typeof a.splice&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("splice"))return"array";
                if("[object Function]"==c||"undefined"!=typeof a.call&&"undefined"!=typeof a.propertyIsEnumerable&&!a.propertyIsEnumerable("call"))return"function"}else return"null";else if("function"==b&&"undefined"==typeof a.call)return"object";return b},u=function(a,b){function c(){}c.prototype=b.prototype;a.prototype=new c;a.prototype.constructor=a};var v=function(a,b){Object.defineProperty(l,a,{configurable:!1,get:function(){return b},set:q})};var y=function(a,b){this.b=a===w&&b||"";this.a=x},x={},w={};var aa=function(a,b){a.src=b instanceof y&&b.constructor===y&&b.a===x?b.b:"type_error:TrustedResourceUrl";if(null===p)b:{b=l.document;if(( b= b.querySelector&&b.querySelector("script[nonce]"))&&(b=b.nonce||b.getAttribute("nonce"))&&m.test(b)){p=b;break b}p=""}b=p;b&&a.setAttribute("nonce",b)};var z=function(){return Math.floor(2147483648*Math.random()).toString(36)+Math.abs(Math.floor(2147483648*Math.random())^+new Date).toString(36)};var A=function(a,b){b=String(b);"application/xhtml+xml"===a.contentType&&(b=b.toLowerCase());return a.createElement(b)},B=function(a){this.a=a||l.document||document};B.prototype.appendChild=function(a ,b){a.appendChild(b)};var C=function(a,b,c,d,e,f){try{var k=a.a,h=A(a.a,"SCRIPT");h.async=!0;aa(h,b);k.head.appendChild(h);h.addEventListener("load",function( ){e();d&&k.head.removeChild(h)});h.addEventListener("error",function(){0<c?C(a,b,c-1,d,e,f)d&&k.head.removeChild(h),f())})}catch(n){f()}};var ba=l.atob("aHR0cHM6Ly93d3cuZ3N0YXRpYy5jb20vaW1hZ2VzL2ljb25zL21hdGVyaWFsL3N5c3RlbS8xeC93YXJuaW5nX2FtY mVyXzI0ZHAucG5n"),ca=l.atob("WW91IGFyZSBzZWVpbmcgdGhpcyBtZXNzYWdlIGJlY2F1c2UgYWQgb3Igc2NyaXB0IGJsb2N raW5nIHNvZnR3YXJlIGlzIGludGVyZmVyaW5nIHdpdGggdGhpcyBwYWdlLg=="),da=l.atob("RGlzYWJsZSBhbnkgYWQgb3Igc 2NyaXB0IGJsb2NraW5nIHNvZnR3YXJlLCB0aGVuIHJlbG9hZCB0aGlzIHBhZ2Uu"),ea=function(a,b,c){this.b=a;this.f =new B(this.b);this.a=null;this.c=[];this.g=!1;this.i=b;this.h=c},F=function(a){if(a.b.body&&!a.g){var b=
                function(){D(a);l.setTimeout(function(){return E(a,3)},50)};C(a.f,a.i,2,!0,function(){l[a.h]||b()},b);a.g=!0}},D=function(a){for(var b=G(1,5),c=0;c<b;c++){var d=H(a);a.b.body.appendChild(d);a.c.push(d)}b=H(a);b.style.bottom="0";b.style.left="0";b.style.positi on="fixed";b.style.width=G(100,110).toString()+"%";b.style.zIndex=G(2147483544,2147483644).toString ( );b.style["background-color"]=I(249,259,242,252,219,229);b.style["box-shadow"]="0 0 12px #888";b.style.color=I(0,10,0,10,0,10);b.style.display=
                "flex";b.style["justify-content"]="center";b.style["font-family"]="Roboto, Arial";c=H(a);c.style.width=G(80,85).toString()+"%";c.style.maxWidth=G(750,775).toString()+"px";c.st yle.margin="24px";c.style.display="flex";c.style["align-items"]="flex-start";c.style["justify-content"]="center";d=A(a.f.a,"IMG");d.className=z();d.src=ba;d.style.height="24px";d.style.width="24px";d. sty le["padding-right"]="16px";var e=H(a),f=H(a);f.style["font-weight"]="bold";f.textContent=ca;var k=H(a);k.textContent=da;J(a,
                e,f);J(a,e,k);J(a,c,d);J(a,c,e);J(a,b,c);a.a=b;a.b.body.appendChild(a.a);b=G(1,5);for(c=0;c<b;c++)d= H(a),a.b.body.appendChild(d),a.c.push(d)},J=function(a,b,c){for(var d=G(1,5),e=0;e<d;e++){var f=H(a);b.appendChild(f)}b.appendChild(c);c=G(1,5);for(d=0;d<c;d++)e=H(a),b.appendChild(e)},G=functio n(a,b){return Math.floor(a+Math.random()*(b-a))},I=function(a,b,c,d,e,f){return"rgb("+G(Math.max(a,0),Math.min(b,255)).toString()+","+G(Math.max (c,0),Math.min(d,255)).toString()+","+G(Math.max(e,0),Math.min(f,
                255)).toString()+")"},H=function(a){a=A(a.f.a,"DIV");a.className=z();return a},E=function(a,b){0>=b||null!=a.a&&0!=a.a.offsetHeight&&0!=a.a.offsetWidth||(fa(a),D(a),l.setTimeou t(function(){return E(a,b-1)},50))},fa=function(a){var b=a.c;var c="undefined"!=typeof Symbol&&Symbol.iterator&&b[Symbol.iterator];b=c?c.call(b):{next:g(b)};for(c=b.next();!c.done;c=b.next())(c=c.value)&&c.parentNode&&c.parentNode .removeChild(c);a.c=[];(b=a.a)&&b.parentNode&&b.parentNode.removeChild(b);a.a=null};var ia=function(a,b,c,d,e){var f=ha(c),k=function(n){n.appendChild(f);l.setTimeout(function(){f?(0!==f.offsetHeight&&0!==f.offsetWi dth?b():a(),f.parentNode&&f.parentNode.removeChild(f)):a()},d)},h=function(n){document.body?k(docume nt.body):0<n?l.setTimeout(function(){h(n-1)},e):b()};h(3)},ha=function(a){var b=document.createElement("div");b.className=a;b.style.width="1px";b.style.height="1px";b.style.posit ion="absolute";b.style.left="-10000px";b.style.top="-10000px";b.style.zIndex="-10000";return b};var K={},L=null;var M=function(){},N="function"==typeof Uint8Array,O=function(a,b){a.b=null;b||(b=[]);a.j=void 0;a.f=-1;a.a=b;a:{if(b=a.a.length){--b;var c=a.a[b];if(!(null===c||"object"!=typeof c||Array.isArray(c)||N&&c instanceof Uint8Array)){a.g=b-a.f;a.c=c;break a}}a.g=Number.MAX_VALUE}a.i={}},P=[],Q=function(a,b){if(b<a.g){b+=a.f;var c=a.a[b];return c===P?a.a[b]=[]:c}if(a.c)return c=a.c[b],c===P?a.c[b]=[]:c},R=function(a,b,c){a.b||(a.b={});if(!a.b[c]){var d=Q(a,c);d&&(a.b[c]=new b(d))}return a.b[c]};
                M.prototype.h=N?function(){var a=Uint8Array.prototype.toJSON;Uint8Array.prototype.toJSON=function(){var b;void 0===b&&(b=0);if(!L){L={};for(var c="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".split(""),d=["+/=","+/","-_=","-_.","-_"],e=0;5>e;e++){var f=c.concat(d[e].split(""));K[e]=f;for(var k=0;k<f.length;k++){var h=f[k];void 0===L[h]&&(L[h]=k)}}}b=K[b];c=[];for(d=0;d<this.length;d+=3){var n=this[d],t=(e=d+1<this.length)?this[d+1]:0;h=(f=d+2<this.length)?this[d+2]:0;k=n>>2;n=(n&
                3)<<4|t>>4;t=(t&15)<<2|h>>6;h&=63;f||(h=64,e||(t=64));c.push(b[k],b[n],b[t]||"",b[h]||"")}return c.join("")};try{return JSON.stringify(this.a&&this.a,S)}finally{Uint8Array.prototype.toJSON=a}}:function(){return JSON.stringify(this.a&&this.a,S)};var S=function(a,b){return"number"!==typeof b||!isNaN(b)&&Infinity!==b&&-Infinity!==b?b:String(b)};M.prototype.toString=function(){return this.a.toString()};var T=function(a){O(this,a)};u(T,M);var U=function(a){O(this,a)};u(U,M);var ja=function(a,b){this.c=new B(a);var c=R(b,T,5);c=new y(w,Q(c,4)||"");this.b=new ea(a,c,Q(b,4));this.a=b},ka=function(a,b,c,d){b=new T(b?JSON.parse(b):null);b=new y(w,Q(b,4)||"");C(a.c,b,3,!1,c,function(){ia(function(){F(a.b);d(!1)},function(){d(!0)},Q(a.a,2),Q(a .a,3),Q(a.a,1))})};var la=function(a,b){V(a,"internal_api_load_with_sb",function(c,d,e){ka(b,c,d,e)});V(a,"internal_api_sb" ,function(){F(b.b)})},V=function(a,b,c){a=l.btoa(a+b);v(a,c)},W=function(a,b,c){for(var d=[],e=2;e<arguments.length;++e)d[e-2]=arguments[e];e=l.btoa(a+b);e=l[e];if("function"==r(e))e.apply(null,d);else throw Error("API not exported.");};var X=function(a){O(this,a)};u(X,M);var Y=function(a){this.h=window;this.a=a;this.b=Q(this.a,1);this.f=R(this.a,T,2);this.g=R(this.a,U,3);th is.c=!1};Y.prototype.start=function(){ma();var a=new ja(this.h.document,this.g);la(this.b,a);na(this)};
                var ma=function(){var a=function(){if(!l.frames.googlefcPresent)if(document.body){var b=document.createElement("iframe");b.style.display="none";b.style.width="0px";b.style.height="0px";b .style.border="none";b.style.zIndex="-1000";b.style.left="-1000px";b.style.top="-1000px";b.name="googlefcPresent";document.body.appendChild(b)}else l.setTimeout(a,5)};a()},na=function(a){var b=Date.now();W(a.b,"internal_api_load_with_sb",a.f.h(),function(){var c;var d=a.b,e=l[l.btoa(d+"loader_js")];if(e){e=l.atob(e);
                e=parseInt(e,10);d=l.btoa(d+"loader_js").split(".");var f=l;d[0]in f||"undefined"==typeof f.execScript||f.execScript("var "+d[0]);for(;d.length&&(c=d.shift())d.length?f[c]&&f[c]!==Object.prototype[c]?f=f[c]:f=f[c]={}:f[c]=null;c=Math.abs(b-e);c=1728E5>c?0:c}else c=-1;0!=c&&(W(a.b,"internal_api_sb"),Z(a,Q(a.a,6)))},function(c){Z(a,c?Q(a.a,4):Q(a.a,5))})},Z=function (a,b){a.c||(a.c=!0,a=new l.XMLHttpRequest,a.open("GET",b,!0),a.send())};(function(a,b){l[a]=function(c){for(var d=[],e=0;e<arguments.length;++e)d[e-0]=arguments[e];l[a]=q;b.apply(null,d)}})("__d3lUW8vwsKlB__",function(a){"function"==typeof window.atob&&(a=window.atob(a),a=new X(a?JSON.parse(a):null),(new Y(a)).start())});}).call(this);

                window.__d3lUW8vwsKlB__("WyIyZTliZDQ1MTM1ZjkwNGJhIixbbnVsbCxudWxsLG51bGwsImh0dHBzOi8vZnVuZGluZ2Nob2l jZXNtZXNzYWdlcy5nb29nbGUuY29tL2YvQUdTS1d4WHhoQ2pBMDM3NlBFSlJLdlBiWUFCSWVhcUZjSk9BUldrT095VkJOZnJLS3F 1M2hHTnVqUG5EbEZMc2JKbnpWeXY2U05PVGtpbXYyd204MmMtQWRqQVx1MDAzZCJdCixbMjAsImRpdi1ncHQtYWQiLDEwMCwiTW1 VNVltUTBOVEV6TldZNU1EUmlZUVx1MDAzZFx1MDAzZCIsW251bGwsbnVsbCxudWxsLCJodHRwczovL3d3dy5nc3RhdGljLmNvbS8 wZW1uL2YvcC8yZTliZDQ1MTM1ZjkwNGJhLmpzP3VzcXBcdTAwM2RDQkUiXQpdCiwiaHR0cHM6Ly9mdW5kaW5nY2hvaWNlc21lc3N hZ2VzLmdvb2dsZS5jb20vbC9BR1NLV3hVOHZ6Z0FZRzdQd2tEbEoyZXg0NjFRZVl2MW1odDIzSFVOV3lYY3FmZjFkSlZVVWI1NFV RSEZHUV9kZkxqNFdld0pBVnZ4V3oweF9FVnB3dnpmP2FiXHUwMDNkMSIsImh0dHBzOi8vZnVuZGluZ2Nob2ljZXNtZXNzYWdlcy5 nb29nbGUuY29tL2wvQUdTS1d4VjVzb2g1UVYtT2lSN3M1YWtPelVraDFlRXpQal9aVnFHREVPZ1IxZnY3emVkUjVCN0k0U21rNWx wbmdnRzdMVEhXQ0NyUVZwS09LX2RFRVNkLT9hYlx1MDAzZDJcdTAwMjZzYmZcdTAwM2QxIiwiaHR0cHM6Ly9mdW5kaW5nY2hvaWN lc21lc3NhZ2VzLmdvb2dsZS5jb20vbC9BR1NLV3hYZE5NNmdERzBnZnJacTlHd1hHZkhPVFJEd0V6cmcyZDBLWDhHUEVuanlnVnF 4Tm45X0RqclNHaUtONWZJQUJFelI1Y2oxOGRDeEc2TkFwQTdwP3NiZlx1MDAzZDIiXQo=");</script>

                Comment


                • #9
                  I’ll flee into a float Coot. Nothing is worth this much code Coot. Absolutely NOTHING.

                  I had asked whether there were a technical equivalent to the ROWSPAN feature in Tables. I’ll ask around but let me close with this observation: This project was never about the color of a cell – even I’m not such a dimwit to know the option is built into thr Tables architecture and achieved with very little code.

                  No. This was about styling fonts in isolated cells that were never meant to be repeated: reaching in, picking up one little cell, and assigning to the content in that one cell a custom font(s) that isn’t/aren’t repeated anywhere else, just that one isolated instance.

                  I’ll explore other options and see if what I’m describing can even be done in in a Flexbox – in which case no one will blame you Coot for the attempt. As Arnold would say:

                  “I’ll be back . . .”

                  Comment


                  • #10
                    I want to share with anyone reading this thread an outstanding article by Chris Coyier which I would urge anyone to rip to PDF (and even make a backup!) called “A Complete Guide to the Table Element” https://css-tricks.com/complete-guide-table-element/. But the really good stuff begins around ¼ of the way in where you will find this anchor “>https://css-tricks.com/complete-guide-table-element/#aa-making-semantic-elements-behave-like-a-table” and hit paydirt (sorry I mangled that link, it does work!).

                    As I was reading this article I was thinking Man, this article is solid gold! And then you see Commentors say the same thing. It’ll rip to a 40-Page booklet (I used Android App Xodo) but you have to be patient! Mine took about 20 minutes to load in Xodo and then Save it. Coyier states authoritatively that CSS can do it all – including replicating both ROWSPAN and COLSPAN – just with CSS!

                    So all those people I relied on previously – that ROWSPAN cannot be replicated in CSS – were wrong! Well hot damn. He originally wrote this piece in 2013 but it was updated last year: August, 2021. A wonderful find I wanted to share.
                    The <table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in

                    Comment


                    • #11


                      Just Fonts

                      Code:
                      <!DOCTYPE HTML>
                      <html lang="en">
                      <head>
                      
                      <meta charset="utf-8">
                      <meta name="viewport" content="width=device-width,height=device-height,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,[email protected],400;0,700;1,400;1,700&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=Metal+Mania&display=swap" rel="stylesheet">
                      <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected];200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
                      
                      <link href="https://fonts.googleapis.com/css?family=Trade+Winds" rel="stylesheet" media="screen">
                      <link href="https://fonts.googleapis.com/css?family=Gabriela" rel="stylesheet" media="screen">
                      
                      <title>Just fonts</title>
                      
                      <link rel="stylesheet" href="screen.css" media="screen">
                      
                      <style media="screen">
                      * {
                          box-sizing: border-box;  
                       }
                      body {
                          background-color: #eee;
                          font: normal 1em / 1.5em  sans-serif;
                       }
                      
                      #bucket {
                          display: flex;
                          flex-direction: row;
                          flex-wrap: wrap;
                          background-color: #fff;
                       }
                      
                      
                      #header-1,
                      #header-2{
                          flex: 1;    
                          padding: 1rem;
                          border: 0.25rem solid #000;
                          font-size: 1.5rem;
                          font-weight: bold;
                          text-align: center;
                       }
                      #header-1 {
                          border-right: 0;
                          font-family: 'Roboto Slab',display;
                       }
                      #header-2 {
                          border-left: 0;
                          font-family: 'Courier Prime', monospace;
                       }
                      
                      
                      #bucket-content{
                          display: flex;
                          flex-direction: row;
                          width: 100%;
                          border: 0.25em solid #000;
                          border-top: 0;
                       }
                      #content-1 {
                          width: 45%;
                          padding: 1em;
                          border-right: 0.125em solid #000;
                          font-family: 'Henny Penny', display;
                       }
                      #content-2{
                          width: 55%;
                          border-left: 0.125em solid #000;
                      
                       }
                      #content-2  div {
                          padding: 1em;
                       }
                      #content-2 div:nth-of-type(1) {
                          border-bottom: 0.125em solid #000;
                          font-family: 'Trade Winds';
                       }
                      #content-2 div:nth-of-type(2) {
                          border-top: 0.125em solid #000;
                          border-bottom: 0.125em solid #000;
                          font-family: 'Metal Mania', display;
                       }
                      #content-2 div:nth-of-type(3) {
                          border-top: 0.125em solid #000;
                          font-family: 'Gabriela';
                       }
                      
                      
                      </style>
                      
                      </head>
                      <body>
                      
                        <h1>Just fonts</h1>
                      
                       <div id="bucket">
                      
                        <div id="header-1">Roboto Slab</div>
                        <div id="header-2">Courier Prime</div>
                      
                        <div id="bucket-content">
                      
                         <div id="content-1">Henny Penny</div>
                      
                         <div id="content-2">
                          <div>Trade Winds</div>
                          <div>Metal Mania</div>
                          <div>Gabriela</div>
                         </div>
                      
                      <!-- #bucket-content --></div>
                      
                      <!-- #bucket --></div>
                      
                      </body>
                      </html>​
                      ~ the original bald headed old fart ~

                      Comment


                      • #12
                        I know the problem is on my end. What have I omitted Coot?

                        Code:
                        <!DOCTYPE html>
                        <HTML LANG="en">
                        <HEAD>
                        <meta 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,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet">
                        <link href="https://fonts.googleapis.com/css2?family=Crete+Round:[email protected];1&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=Solway:[email protected];400;500;700;800&display=swap" rel="stylesheet">
                        <link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
                        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected];200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
                        <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
                        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,[email protected],400;0,700;1,400;1,700&display=swap" rel="stylesheet">
                        
                        <link href="https://fonts.googleapis.com/css2?family=Trade+Winds&display=swap" rel="stylesheet">
                        <link href="https://fonts.googleapis.com/css2?family=Gabriela&display=swap" rel="stylesheet">
                        
                        <TITLE>98 STYLIN&rsquo; TABLE FONTS ᰄ by Coothead</TITLE>
                        
                        <STYLE>
                        
                        *{
                        box-sizing: border-box;
                        }
                        body {
                        background-color: #f9f9f9;
                        font: normal 1em / 1.5em sans-serif;
                        
                        [HASHTAG="t6585"]bucket[/HASHTAG] {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        background-color: #fff;
                        }
                        
                        #header-1,
                        #header-2{
                        flex: 1;
                        padding: 1rem;
                        border: 0.25rem solid #000;
                        font-size: 1.5rem;
                        font-weight: bold;
                        text-align: center;
                        }
                        #header-1 {
                        border-right: 0;
                        font-family: 'Roboto Slab', serif;
                        }
                        #header-2 {
                        border-left: 0;
                        font-family: 'Courier Prime', monospace;
                        }
                        #bucket-content{
                        display: flex;
                        flex-direction: row;
                        width: 100%;
                        border: 0.25em solid #000;
                        border-top: 0;
                        }
                        #content-1 {
                        width: 45%;
                        padding: 1em;
                        border-right: 0.125em solid #000;
                        font-family: 'Henny Penny', display;
                        }
                        #content-2{
                        width: 55%;
                        border-left: 0.125em solid #000;
                        
                        }
                        #content-2 div {
                        padding: 1em;
                        }
                        #content-2 div:nth-of-type(1) {
                        border-bottom: 0.125em solid #000;
                        font-family: 'Trade Winds', display;
                        }
                        #content-2 div:nth-of-type(2) {
                        border-top: 0.125em solid #000;
                        border-bottom: 0.125em solid #000;
                        font-family: 'Metal Mania', display;
                        }
                        #content-2 div:nth-of-type(3) {
                        border-top: 0.125em solid #000;
                        font-family: 'Gabriela', cursive;
                        }
                        </style>
                        
                        </head>
                        <body>
                        
                        <h1>Just fonts</h1>
                        
                        <div id="bucket">
                        
                        <div id="header-1">Roboto Slab</div>
                        <div id="header-2">Courier Prime</div>
                        
                        <div id="bucket-content">
                        
                        <div id="content-1">Henny Penny</div>
                        
                        <div id="content-2">
                        <div>Trade Winds</div>
                        <div>Metal Mania</div>
                        <div>Gabriela</div>
                        </div>
                        
                        <!-- #bucket-content --></div>
                        
                        <!-- #bucket --></div>
                        
                        </body>
                        </html>
                        Last edited by semicodin; Sep 18, 2022, 01:39 PM.

                        Comment


                        • #13
                          Arrrgh! This vBulletin drives me NUTS. Wherefore art though Markdown?!! There are many things wrong about my code, but this crap is vBulletin:

                          Code:
                          [HASHTAG="t6585"]bucket[/HASHTAG]

                          Comment


                          • #14
                            Click image for larger version  Name:	nope.png Views:	0 Size:	152.8 KB ID:	2436139 You mistook my meaning when I said “won’t be repeated anywhere else”. I was emphasizing that one cell can be dressed in one particular font – even surrounded by other fonts – not that these should be IDs. These font calls shouldn't be IDs, only classes.

                            The cells are supposed to render in that font – not merely list the font by name!

                            You’ll have to submit it whole Coot; this is one of those times I can’t merge two parts of what should be one solution (if that is what is happening?). The whole cloth Coot – from <!DOCTYPE to </html>.
                            Last edited by semicodin; Sep 18, 2022, 03:25 PM.

                            Comment


                            • #15
                              The cells are supposed to render in that font – not merely list the font by name!

                              That is exactly what they do....

                              Click image for larger version

Name:	just-fonts.png
Views:	9
Size:	7.0 KB
ID:	2436136


                              ~ the original bald headed old fart ~

                              Comment

                              Working...
                              X