Ingolme

April 1, 2022

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.

March 31, 2022

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.

March 31, 2022

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

March 30, 2022

The browser error console says this:

Uncaught SyntaxError: unexpected token: ':' one line 39

March 30, 2022

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>

March 30, 2022

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;
}

March 30, 2022

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>

March 30, 2022

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.

March 29, 2022

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

March 29, 2022

That's an uppercase 'X'. In Javascript, uppercase and lowercase are not the same.

March 28, 2022

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.

March 28, 2022

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>

March 28, 2022

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.

March 28, 2022

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;
}

March 28, 2022

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>

March 28, 2022

7 hours ago, semicodin said:

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 2.28 kB · 0 downloads

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.

March 28, 2022

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.

March 28, 2022

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.

March 28, 2022

<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.

March 27, 2022

You wrote <span style="SANS"> instead of <span class="SANS">

March 27, 2022

Look at the Javascript console for more error messages.

March 27, 2022

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)

March 27, 2022

Add right: 0; to the #menu selector and replace transform: translate(-100%, 0); with transform: translate(100%, 0);

March 26, 2022

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.

March 25, 2022

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>

Sign In

Ingolme

Posts

Joined

Last visited

Days Won

Content Type

Profiles

Forums

Events

Posts posted by Ingolme

Why Does This FOR Loop Fail to Exit?

Slideshow JS issues with timing between slides

W3.css Table Header Colour Issue

Counter game pop the balloon

W3.css Table Header Colour Issue

How to position this background-picture correctly?

A > symbol is showing up where it shouldn't in my output

A > symbol is showing up where it shouldn't in my output

I have this string and don’t know what it is

Counter game pop the balloon

Counter game pop the balloon

nth child styling

nth child styling

nth child styling

nth child styling

nth child styling

Have a of problems with Copy Text to clipboard

nth child styling

nth child styling

nth child styling

Counter game pop the balloon

Counter game pop the balloon

Burger menu not working

Counter game pop the balloon

enum output to a "select" value? Oo?

Browse

Activity