Jump to content

semicodin

Members
 View Profile  See their activity

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Everything posted by semicodin

  1. semicodin
    It’s a no-brainer. 🤨
  2. semicodin
    Hi All . . . I made a little Google Fonts Quick Reference guide as a table and then after getting it finished and validated immediately saw that I was using the wrong layout entirely. What the graphic below shows is the design I want to change, and the code that follows is the new table. Edit: Copy my code into a new file named “GOOGLE_FONTS.html” and open it in your browser so you can see how far I got before needing help. This is a very simple 2-Column layout: the first column consisting of a number (the font’s category) in a font called “Vast Shadow” (VS); the second column consisting of two rows assigned to the number in column one. In short, there are exactly 3 elements summarizing the font’s properties: one cell with its font category and the two rows with the font’s details assigned to it. The first thing you’ll notice immediately is that the bottom row has hijacked column one’s font (VS) when it is supposed to be displayed in the font 'Roboto', sans-serif. In fact VS is only supposed to appear twice: as a number in column one, and as the last font group’s sample (in my code). Then the upper row displays a bit of Shakespeare for filler in the actual font (okay thus far), while the bottom row is supposed to display a the CSS font-family statement in Roboto. So the bottom row needs to be in Roboto. And the other thing I would like is a thicker border on the top of the whole group, spanning both columns, making it easier to see each group. Eventually I’m going to attempt doing this in a Flex box but I want this simple table layout either way just for reference. Remember: the graphic below is the old version so you can see the 3 parts before I rearranged them! Thanks. —s [CODE] <!DOCTYPE html> <HTML LANG="en"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&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=Miltonian&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Miltonian+Tattoo&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Paprika&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Passero+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playball&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=Port+Lligat+Slab&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Quando&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,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=Vast+Shadow&display=swap" rel="stylesheet"> <TITLE>GOOGLE FONTS &#7172; by semicodin</TITLE> <STYLE> /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ HTML, BODY { text-size-adjust: 100%; font-size: 16px; line-height: 16px; } BODY { margin-top: 50px; margin-left: 5%; margin-right: 5%; margin-bottom: 50px; width: 90%; background-color: IVORY; font-size: 1rem; line-height: 1.05; font-family: 'Roboto', sans-serif; } table tr:nth-child(odd){background-color: WHITE;} table tr:nth-child(even){background-color: #DDDDDD;} TABLE { margin-top: 2.5em; width: 100%; border: .2em SOLID BLACK; border-collapse: collapse; font-size: 1.13rem; line-height: 1; text-align: left; } TH { vertical-align: bottom; font-size: 2.5rem; line-height: 1; border-top: .3em SOLID CYAN; border-collapse: collapse; padding: .3rem; text-align: CENTER; color: CYAN; background-color: BLACK; font-family: 'Roboto', sans-serif; font-weight: 400; } TR { border: .2rem SOLID BLACK; border-collapse: collapse; } /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ tbody>tr>:nth-child(1) { /* THE FONT’S GROUP NO. (eg. ‘1’) */ font-size: 2.5rem; padding: .18rem; line-height: 1; border-right: .1rem SOLID BLACK; border-collapse: collapse; text-align: center; font-family: 'Vast Shadow', cursive; } tbody>tr>:nth-child(2) { /* font-family: 'Nanum Gothic~~ etc. */ width: 60%; color: BLUE; padding: .18rem; font-size: 1.75rem; line-height: 1; text-align: center; } tbody>tr>:nth-child(3) { /* Description */ width: 35%; color: BLACK; padding: .18rem; font-size: 1.75rem; line-height: 1; text-align: center; font-weight: 400; font-family: 'Roboto', sans-serif; } /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ .LIBR {font-family: 'Libre Baskerville', serif;} .LNSD {font-family: 'Londrina Solid', cursive;} .MET {font-family: 'Metal Mania', cursive;} .MIL {font-family: 'Miltonian', cursive;} .MILT {font-family: 'Miltonian Tattoo', cursive;} .NAN {font-family: 'Nanum Gothic Coding', MONOSPACE;} .OVER {font-family: 'Overlock', cursive;} .PAP {font-family: 'Paprika', cursive;} .PASS {font-family: 'Passero One', cursive;} .PIR {font-family: 'Pirata One', cursive;} .PLYB {font-family: 'Playball', cursive;} .PLYF {font-family: 'Playfair Display', cursive;} .PORT {font-family: 'Port Lligat Slab', serif;} .QUA {font-family: 'Quando', cursive;} .ROB {font-family: 'Roboto', sans-serif;} .VAST {font-family: 'Vast Shadow', cursive;} /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ .NORML {font-weight: normal;} .NORMLC { color: CRIMSON; font-weight: normal; } .DBLUE {color: DODGERBLUE; font-weight: 400;} </STYLE> </HEAD> <BODY> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TABLE> <THEAD> <TR> <th style="width: AUTO">&#8470;</th> <th style="width: 95%">Font Sample &amp; CSS Font&#8209;Family</th> </TR> </THEAD> <TBODY> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="LIBR"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Libre Baskerville', <span style="color: CRIMSON">serif</span>;<BR> <div class="DBLUE">Has Italic</div></td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="LNSD"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Londrina Solid', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLACK">4</td> <td class="MIL"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td style="color: BLACK">font-family: 'Miltonian', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="MILT"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Miltonian Tattoo', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="OVER"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Overlock', cursive; <span style="color: DODGERBLUE">(SANS-SERIF)</span><BR> <div class="DBLUE">Has Italic</div></td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="PAP"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Paprika', cursive; <span style="color: CRIMSON">(SERIF)</span></td> </TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: DARKORANGE">5</td> <td class="PLYB"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Playball', cursive; <span style="color: DARKORANGE">(SERIF)</span></td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="PORT"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Port Lligat Slab', <span style="color: CRIMSON">serif</span>;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLACK">4</td> <td class="VAST"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td style="color: BLACK">font-family: 'Vast Shadow', cursive;</td></TR> </TBODY> </TABLE> </BODY> </HTML> [/CODE]
  3. semicodin
    Hi All . . . I made a little Google Fonts Quick Reference guide as a table and then after getting it finished and validated immediately saw that I was using the wrong layout entirely. What the graphic below shows is the design I want to change, and the code that follows is the new table. Open the file “GOOGLE_FONTS.html” in your browser. This is a very simple 2-Column layout: the first column consisting of a number (the font’s category) in a font called “Vast Shadow” (VS); the second column consisting of two rows assigned to the number in column one. In short, there are exactly 3 elements summarizing the font’s properties: one cell with its font category and the two rows with the font’s details assigned to it. The first thing you’ll notice immediately is that the bottom row has hijacked column one’s font (VS) when it is supposed to be displayed in the font 'Roboto', sans-serif. In fact VS is only supposed to display once: as a number in column one. Then the upper row displays a bit of Shakespeare for filler in the actual font (okay thus far), while the bottom row is supposed to display a the CSS font-family statement in Roboto. So the bottom row needs to be in Roboto. And the other thing I would like is a thicker border on the top of the whole group, spanning both columns, making it easier to see each group. Eventually I’m going to attempt doing this in a Flex box but I want this simple table layout either way just for reference. Thanks. —s [CODE] <!DOCTYPE html> <HTML LANG="en"> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <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=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@100;300;400;900&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=Miltonian&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Miltonian+Tattoo&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Overlock:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Paprika&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Passero+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Pirata+One&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playball&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=Port+Lligat+Slab&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Quando&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,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=Vast+Shadow&display=swap" rel="stylesheet"> <TITLE>GOIGLE FONTS &#7172; by semicodin</TITLE> <STYLE> /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ HTML, BODY { text-size-adjust: 100%; font-size: 16px; line-height: 16px; } BODY { margin-top: 50px; margin-left: 5%; margin-right: 5%; margin-bottom: 50px; width: 90%; background-color: IVORY; font-size: 1rem; line-height: 1.05; font-family: 'Roboto', sans-serif; } table tr:nth-child(odd){background-color: WHITE;} table tr:nth-child(even){background-color: #DDDDDD;} TABLE { margin-top: 2.5em; width: 100%; border: .2em SOLID BLACK; border-collapse: collapse; font-size: 1.13rem; line-height: 1; text-align: left; } TH { vertical-align: bottom; font-size: 2.5rem; line-height: 1; border-top: .3em SOLID CYAN; border-collapse: collapse; padding: .3rem; text-align: CENTER; color: CYAN; background-color: BLACK; font-family: 'Roboto', sans-serif; font-weight: 400; } TR { border: .2rem SOLID BLACK; border-collapse: collapse; } /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ tbody>tr>:nth-child(1) { /* THE FONT’S GROUP NO. (eg. ‘1’) */ font-size: 2.5rem; padding: .18rem; line-height: 1; border-right: .1rem SOLID BLACK; border-collapse: collapse; text-align: center; font-family: 'Vast Shadow', cursive; } tbody>tr>:nth-child(2) { /* font-family: 'Nanum Gothic~~ etc. */ width: 60%; color: BLUE; padding: .18rem; font-size: 1.75rem; line-height: 1; text-align: center; } tbody>tr>:nth-child(3) { /* Description */ width: 35%; color: BLACK; padding: .18rem; font-size: 1.75rem; line-height: 1; text-align: center; font-weight: 400; font-family: 'Roboto', sans-serif; } /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ .LIBR {font-family: 'Libre Baskerville', serif;} .LNSD {font-family: 'Londrina Solid', cursive;} .MET {font-family: 'Metal Mania', cursive;} .MIL {font-family: 'Miltonian', cursive;} .MILT {font-family: 'Miltonian Tattoo', cursive;} .NAN {font-family: 'Nanum Gothic Coding', MONOSPACE;} .OVER {font-family: 'Overlock', cursive;} .PAP {font-family: 'Paprika', cursive;} .PASS {font-family: 'Passero One', cursive;} .PIR {font-family: 'Pirata One', cursive;} .PLYB {font-family: 'Playball', cursive;} .PLYF {font-family: 'Playfair Display', cursive;} .PORT {font-family: 'Port Lligat Slab', serif;} .QUA {font-family: 'Quando', cursive;} .ROB {font-family: 'Roboto', sans-serif;} .VAST {font-family: 'Vast Shadow', cursive;} /* ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ ━ */ .NORML {font-weight: normal;} .NORMLC { color: CRIMSON; font-weight: normal; } .DBLUE {color: DODGERBLUE; font-weight: 400;} </STYLE> </HEAD> <BODY> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TABLE> <THEAD> <TR> <th style="width: AUTO">&#8470;</th> <th style="width: 95%">Description &amp; CSS Font&#8209;Family</th> </TR> </THEAD> <TBODY> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="LIBR"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Libre Baskerville', <span style="color: CRIMSON">serif</span>;<BR> <div class="DBLUE">Has Italic</div></td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="LNSD"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Londrina Solid', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLACK">4</td> <td class="MIL"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td style="color: BLACK">font-family: 'Miltonian', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="MILT"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Miltonian Tattoo', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="OVER"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Overlock', cursive; <span style="color: DODGERBLUE">(SANS-SERIF)</span><BR> <div class="DBLUE">Has Italic</div></td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="PAP"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Paprika', cursive; <span style="color: CRIMSON">(SERIF)</span></td> </TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: DARKORANGE">5</td> <td class="PLYB"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Playball', cursive; <span style="color: DARKORANGE">(SERIF)</span></td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="PORT"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td>font-family: 'Port Lligat Slab', <span style="color: CRIMSON">serif</span>;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLACK">4</td> <td class="VAST"> @ ? ! &amp; &#8453; 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ &ldquo;We are such stuff as dreams are made on, and our little life is rounded with a sleep.&rdquo;</td></TR> <TR><td style="color: BLACK">font-family: 'Vast Shadow', cursive;</td></TR> </TBODY> </TABLE> </BODY> </HTML> [/CODE]
  4. semicodin
    Ingolme is there a reason the Forum doesn’t use Markdown? It would certainly make things easier to diagnose! 🤔 semicodin
  5. semicodin
    I got it! You were correct Ingolme – I did have an extra > tag. Thanks. 🤪
  6. semicodin
    I've checked and rechecked but it keeps showing up! This was a modification on my earlier nth child. It verifies like a champ but keeps sticking > symbols in Column 2. Thanks. 99¶_SIMPLE_TABLE_COLORS.html
  7. semicodin
    I just want to know what the following > string represents in CSS. Thanks. tbody> tr> :nth-child(1) { color: some color here; width: some width here; } and specifically, its relationship to the use of commas here
  8. semicodin
    WHAT. A. DRAMA. Thank you for hanging in there with me Ingolme, there is no way I could have sussed this out on my own. No way. If I could give you 5 more trophies it wouldn’t be enough. You’ve been one epiphany after another for this old Writer. I’m giving you your own folder on my SD card (high praise from me indeed lol). The only thing in your code I altered (beside correcting line 53) is the order of the “transform ~~” lines – and that, because I have to SEE THAT scaleX(0.80); FIRST or I will go mad. It doesn’t break the code and for that small mercy I'll be in the bar heh. semicodin
  9. semicodin
    I’m sorry Ingolme, it is still CYAN (although I thank you for explaining that the order of the CSS properties has inheritable precedence!). Yikes. 🙄
  10. semicodin
    It is still CYAN for me. 🙄
  11. semicodin
    Ingolme . . . I’m not sure why the font color isn’t respecting the style. Does it show up in CYAN to you as it does me? I was scrupulous in copying your code. Oh and thank you for correcting my punctuation in the title!
  12. semicodin
    Ahhhh. It works. I can’t thank you enough Ingolme. Sent you some Trophy Love . . . 😊
  13. semicodin
    Well I got this to work but I am distinctly unhappy with the hack I used — placing almost the entire style INLINE — because if I remove the style SANS it breaks. Please note: I've rendered the row in YELLOW in keeping with the lo fi goal of making it easy for others to adapt to their needs. I can't imagine this working for someone using the code never before having interacted with SANS in some way: In other words, I consider this hack to be too volatile even for my less-than-pure ahem standards. PLEASE TEST THIS SOMEONE? Does the YELLOW background flood the entire width of the row? Working_nth_child_Hack.html
  14. semicodin
    That’s the code to condense the font and it’s very important! Are you saying they won't play nicely together? Meanwhile, I attempted the attached . . . Nope. THE_IMPORTANT!_ HACK_nth_child.html
  15. semicodin
    Well folks, I found the following on W3.ORG’s site and I’m going to do some experimenting. I hate math! but I'll soldier on and post the results if I can get a working Lo Fi version of The Little Monster . . . https://www.w3.org/Style/Examples/007/evenodd.en.html semicodin
  16. semicodin
    I’m attaching both my code and a screenshot. The attached screenshot was rendered in Pure Browser and two additional HTML Readers. It is not what I’m looking for. The entire row needs to fill. If the error is in my coding I would appreciate your pointing it out to me preferably by line number. semicodin STYLE_ONE_ROW_IN_AN_nth_child.html
  17. semicodin
    If you look on Line 66 of the HTML file I uploaded you’ll see background-color: ~~ That is the correct way to code the CSS for a flooded table row. But place it in an nth child table and it renders as hilighting (type it background: ~~ and it won’t even render partially). So I come full circle to where I started with this Little Monster. Should I just shove a new table — initiating new nth child counters — directly under my code (after removing border-bottom obviously)?
  18. semicodin
    I just awarded you! This forum rocks!
  19. semicodin
    You are correct. What’s more disturbing – I have actually used the two interchangeably and had them render. 😳 I kid you not. It’s true, I mostly code HTML for my own private use (and play quite fast and loose with the rules, recklessly shoving <TD>s here and there, displaying correctly when they shouldn’t) but this is a huge eye opener for me and I can’t thank you enough. Now what about the background? Any way to override the nth child? I’m not highliting. The whole row needs to have its own background. Oh and may I also ask: What is the correct way to state a table’s <td>s and <th>s — TABLE, TH, TD { TABLE TH, TD { TABLE TH TD { Or does it matter? Thank you again. Wow.
  20. semicodin
    I just realized I didn’t give you the issue. I’m trying to get one row in an nth child table to drop out of the table’s styling and style independently. I created this little working table to be very lo fi to make it easier to isolate the problem. As you can see, the table is rendered in Monospace. I want the one row to be in Sans Serif, with a different background and text centered. And then I want the table to return to its Monospace fundamentals. Now, if this gets to be a coding drama I'll just chuck it and shove another table (two if necessary) directly under that row to get my effect. So if you think in the long run that would actually be easier please DO tell me! I've already started down that fork anyway. Thank you Forum.
  21. semicodin
    Hello, this is my first post. How’s everybody today? 😊 So I’m experiencing high drama over something I thought would be so simple! I have spent close to 2 hours on this silly thing and remembered — wait, I just got registered with W3’s Forum! It almost doesn't seem fair to stick you with the following Little Monster but . . . well, we gotta learn sometime lol. See my User name? I’m semi talented at codin’ 😉 Here she is, the Little Monster: STYLE_ONE_ROW_IN_AN_nth_child.html
×
×
  • Create New...