Jump to content

Ingolme

Moderator
  • Posts

    14,890
  • Joined

  • Last visited

  • Days Won

    174

Everything posted by Ingolme

  1. The browser error console says this: Uncaught SyntaxError: unexpected token: ':' one line 39
  2. The problem is that the w3-table-all class is setting the background color of the row to white because it has a more specific selector. You could apply the background to the table cells instead of the row instead. <thead> <tr> <th class="w3-flat-peter-river">First Name</th> <th class="w3-flat-peter-river">Last Name</th> <th class="w3-flat-peter-river">Points</th> </tr> </thead>
  3. It's just a matter of tweaking the background size and position values until it's correct. section.locations { margin-top: 4rem; height: 500px; width: auto; background-image: url("https://github.com/ChristophGrothe/teacozy/blob/main/pics/Screenshot%202022-03-28%20at%2015-25-08%20img-locations-background.webp%20(WEBP-Grafik%201200%20%C3%97%20795%20Pixel)%20-%20Skaliert%20(70%25).png?raw=true"); background-size: auto 695px; background-repeat: no-repeat; background-position: top center; }
  4. This forum has been around since 2005. Markdown started becoming commonly used around 2012, so it's just a matter of the forum software not being designed for it originally. At this point in time, it would take a lot of effort to try to migrate everything to completely new forum software and there isn't much activity. If you click the [<>] button in the reply box you'll be able to paste formatted code into the post. Here's an example: <TR> <td>&ldquo;SOMETHING HERE&rdquo;</td> <td>#FFE6FF></td> <td style="background-color: #FFE6FF;">&#7172;</td> </TR>
  5. Unfortunately I can't see your code because my phone doesn't let me see the source code of HTML files on any of the apps I have, but I'm guessimg you have a double >> in your HTML code for those table cells which is causing the problem.
  6. You need to read the CSS tutorial [ https://www.w3schools.com/ ] in its entirety. Once you have gone through the tutorial and done all the exercises you should have a good grasp on CSS. This particular selector is covered in the combinators chapter: https://www.w3schools.com/css/css_combinators.asp Commas are covered near the beginning of the tutorial in the selectors chapter: https://www.w3schools.com/css/css_selectors.asp
  7. That's an uppercase 'X'. In Javascript, uppercase and lowercase are not the same.
  8. Typing out the code isn't enough, you need to understand what the code is doing. Show me what's on line 27 and tell me what you think the problem is.
  9. Here's the full document with the new code added: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>SCHOOLS&rsquo;s Styling nth child Table Rows</title> <style> body { margin-left: 50px; margin-right: 50px; text-align: center; background: #FFFFF5; font-family: 'lucida console', 'courier new', fixed-pitch, monospace; font-size: 24px; line-height: 26px; font-weight: bold; color: black; } table { margin-left: 0px; margin-right: 50px; padding: 20px; text-align: left; border-collapse: collapse; font-size: 20px; line-height: 22px; } /* SETTING THE COLUMN FONT COLORS */ td:nth-child(1) { color: #00FFFF; width: 20%; } td:nth-child(2) { color: BLUE; width: 20%; } td:nth-child(3) { color: #FF00FF; width: 60%; } /* SETTING THE ROW STRIPING */ tr:nth-child( odd ) { background-color: black; } tr:nth-child( even ) { background-color: black; } .sans { color: BLACK; background-color: yellow; text-align: center; font-size: 24px; line-height: 26px; font-weight: bold; font-family: 'helvetica', 'robotocondensed-regular', sans-serif; } .sans span { display: block; transform-origin: 50% 50%; transform: scaleX(0.80); } .sans:nth-child(1) { color: black; } </style> </head> <body> <table> <tbody> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td colspan="3" class="sans"> <span>&#9654;&#9654;&#9654;&#9654;&#9654;THIS ROW&rsquo;S STYLING SHOULD CHANGE HERE</span> </td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> </tbody> </table> </body> </html>
  10. Because of CSS precedence rules ( https://www.w3schools.com/css/css_specificity.asp ) that code has to be at the very end of your CSS code. Right before the closing </style> tag.
  11. It is cyan for me. The nth-child(1) selector is doing it. You can fix it by adding this to your CSS: .sans:nth-child(1) { color: black; }
  12. I'm not entirely sure what your goal is anymore. I've simplified your code and made the highlighted row have a different background as well as condensed font. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>SCHOOLS&rsquo;s Styling nth child Table Rows</title> <style> body { margin-left: 50px; margin-right: 50px; text-align: center; background: #FFFFF5; font-family: 'lucida console', 'courier new', fixed-pitch, monospace; font-size: 24px; line-height: 26px; font-weight: bold; color: black; } table { margin-left: 0px; margin-right: 50px; padding: 20px; text-align: left; border-collapse: collapse; font-size: 20px; line-height: 22px; } /* SETTING THE COLUMN FONT COLORS */ td:nth-child(1) { color: #00FFFF; width: 20%; } td:nth-child(2) { color: BLUE; width: 20%; } td:nth-child(3) { color: #FF00FF; width: 60%; } /* SETTING THE ROW STRIPING */ tr:nth-child( odd ) { background-color: black; } tr:nth-child( even ) { background-color: black; } .sans { color: BLACK; background-color: yellow; text-align: center; font-size: 24px; line-height: 26px; font-weight: bold; font-family: 'helvetica', 'robotocondensed-regular', sans-serif; } .sans span { display: block; transform-origin: 50% 50%; transform: scaleX(0.80); } </style> </head> <body> <table> <tbody> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td colspan="3" class="sans"> <span>&#9654;&#9654;&#9654;&#9654;&#9654;THIS ROW&rsquo;S STYLING SHOULD CHANGE HERE</span> </td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1&rsquo;S STANDARD MONOSPACE</td> <td>COL2&rsquo;S STANDARD MONOSPACE</td> <td>COL3&rsquo;S STANDARD MONOSPACE</td> </tr> </tbody> </table> </body> </html>
  13. It looks like you have set the cell to be 80% the width of the table in this line of code: transform: scaleX(0.80); This means that the 20% of space on the right won't be colored.
  14. getElementById() can only return one element. You have to take this into account when writing your code. Each button needs to select the correct textarea.
  15. Your background color was being applied to a <span> element, not to the table row. The <span> is an inline child element of the table cell which is only as wide as the text it contains. The solution I provided in my previous post will apply the background color to the table cell instead of the span.
  16. <span> elements are inline. If you want to whole row to be styled, put the class on the <td> element instead and update the CSS selector accordingly. TABLE TR .SANS { <tr> <td colspan="3" class="SANS">&#9654;&#9654;&#9654;&#9654;&#9654;THIS ROW&rsquo;S STYLING SHOULD CHANGE HERE</td> </tr> A comma separates different selectors. "TABLE, TH, TD" means select all <table> elements and also all <th> elements and <td> elements. "TABLE TH, TD" means select all <th> elements that are descendants of tables and also all <td> elements of any kind. "TABLE TH TD" selects <td> elements which are descendants of <th> and those <th> elements must be descendants of <table> elements. You should read the CSS tutorial so that you're clear on exactly what each CSS selector does: https://www.w3schools.com/css/default.asp The correct way to select <td> and <th> elements that belong to a <table> is table th, table td, but keep CSS precedence rules in mind because other selectors might override these.
  17. You wrote <span style="SANS"> instead of <span class="SANS">
  18. Look at the Javascript console for more error messages.
  19. There are still error messages in the console. Please check the Javascript console for errors each time you update the code. It says this: Uncaught SyntaxError: identifier starts immediately after numeric literal (Line 11, column 34)
  20. Add right: 0; to the #menu selector and replace transform: translate(-100%, 0); with transform: translate(100%, 0);
  21. If you open the browser developer tools (usually by pressing F12 on Windows systems) and refresh the page an error message will appear in the console telling you exactly what the problem is and on which line of code.
  22. Usually, since the enum field has a small number of options and they never change, you just need to hardcode the options instead of trying to get a list of all of them from the database. To select an option in a dropdown based on the data from a database query, you just need to check whether the value from the database is equal to the value of the dropdown option. <?php $row = query->fetch(); // Code to get a database row from a query $options = [ 'Computer', 'Laptop', 'Smartphone' ]; ?> <select name="device"> <?php foreach($option as $option) { // Select the option if the row matches it // I'm assuming your database has a field named "device" which stores the ENUM value. $selected = ''; if($option == $row['device']) { $selected = ' selected' } // Write the HTML code for the option echo "<option value='{$option}' {$selected}> {$option} </option>"; } ?> </select>
  23. Have you gone through the Javascript tutorial? You should have enough information after reading it to be able to solve this.
  24. You gave the same id to both textareas. When the Javascript code asks for an element with id = "myInput", the browser doesn't know which of the two you want, so it selects the first one.
×
×
  • Create New...