Ingolme
-
Posts
14,894 -
Joined
-
Last visited
-
Days Won
175
Content Type
Profiles
Forums
Events
Everything posted by Ingolme
-
document.getElementById("myInput1"); only returns a single element. You need to change the ID in order to select a different element.
-
You've mistakenly used the assignment operator "=" in the condition of your loop. for (var getHEX = 1; getHEX = 3; getHEX++) In the condition, you're assigning 3 to getHEX which always evaluates to true, so the loop never ends.
-
There is not enough information here to solve the problem, so I have to make some guesses. It's possible that the fade class has an animation which makes the slide fade out. Try removing the fade class from the slides. If you want a fading effect, the Javascript code needs to have some control over it.
-
Whenever you have different CSS classes on the same element, they're competing with each other to style the element. When one class wants to color the element blue and the other class wants to color it white, the browser has to choose one of those colors. They way it's chosen is shown in this tutorial page: https://www.w3schools.com/css/css_specificity.asp
-
The browser error console says this: Uncaught SyntaxError: unexpected token: ':' one line 39
-
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>
-
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; }
-
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>“SOMETHING HERE”</td> <td>#FFE6FF></td> <td style="background-color: #FFE6FF;">ᰄ</td> </TR>
-
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.
-
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
-
That's an uppercase 'X'. In Javascript, uppercase and lowercase are not the same.
-
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.
-
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’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’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td colspan="3" class="sans"> <span>▶▶▶▶▶THIS ROW’S STYLING SHOULD CHANGE HERE</span> </td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> </tbody> </table> </body> </html>
-
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.
-
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; }
-
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’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’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td colspan="3" class="sans"> <span>▶▶▶▶▶THIS ROW’S STYLING SHOULD CHANGE HERE</span> </td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> <tr> <td>COL1’S STANDARD MONOSPACE</td> <td>COL2’S STANDARD MONOSPACE</td> <td>COL3’S STANDARD MONOSPACE</td> </tr> </tbody> </table> </body> </html>
-
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.
-
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.
-
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.
-
<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">▶▶▶▶▶THIS ROW’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.
-
You wrote <span style="SANS"> instead of <span class="SANS">
-
Look at the Javascript console for more error messages.
-
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)
-
Add right: 0; to the #menu selector and replace transform: translate(-100%, 0); with transform: translate(100%, 0);
- 3 replies
-
- 1
-
-
- menu
- burger menu
- (and 1 more)
-
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.
