semicodin
-
Posts
21 -
Joined
-
Last visited
semicodin's Achievements
Newbie (1/7)
0
Reputation
-
It’s a no-brainer. 🤨
-
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 ᰄ 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">№</th> <th style="width: 95%">Font Sample & CSS Font‑Family</th> </TR> </THEAD> <TBODY> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="LIBR"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR> <TR><td>font-family: 'Londrina Solid', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLACK">4</td> <td class="MIL"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR> <TR><td>font-family: 'Miltonian Tattoo', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="OVER"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR> <TR><td style="color: BLACK">font-family: 'Vast Shadow', cursive;</td></TR> </TBODY> </TABLE> </BODY> </HTML> [/CODE]
-
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 ᰄ 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">№</th> <th style="width: 95%">Description & CSS Font‑Family</th> </TR> </THEAD> <TBODY> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: CRIMSON">2</td> <td class="LIBR"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR> <TR><td>font-family: 'Londrina Solid', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLACK">4</td> <td class="MIL"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR> <TR><td>font-family: 'Miltonian Tattoo', cursive;</td></TR> <!-- ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ --> <TR> <td rowspan="2" style="color: BLUE">1</td> <td class="OVER"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</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"> @ ? ! & ℅ 1ˢᵗ 2ⁿᵈ 3ʳᵈ 4ᵗʰ “We are such stuff as dreams are made on, and our little life is rounded with a sleep.”</td></TR> <TR><td style="color: BLACK">font-family: 'Vast Shadow', cursive;</td></TR> </TBODY> </TABLE> </BODY> </HTML> [/CODE]
-
Ingolme is there a reason the Forum doesn’t use Markdown? It would certainly make things easier to diagnose! 🤔 semicodin
-
I got it! You were correct Ingolme – I did have an extra > tag. Thanks. 🤪
-
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
-
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
-
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
-
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. 🙄
-
It is still CYAN for me. 🙄
-
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!
-
Ahhhh. It works. I can’t thank you enough Ingolme. Sent you some Trophy Love . . . 😊
-
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
-
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
-
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
