[RESOLVED - For now!] Tables - Again!

[paulp575]

Still having problems with tables (nothing new since they made it more complicated).

I want to add a table on this web page: https://ewatv.org/index-copy-2024-10-08.html.

I've already added a space to the table and gave it a table id of WAA.

The problem I 'having is two-fold:

1. I want the table to have a red border. When I gave that table an id of "WAA" and added the red border to that style, the red border is now around the entire page! The main table should have NO border. You can see what the page looks like before I started modifying it here: https://ewatv.org/.

2. I want the text in the "WAA" table to be a color different that the rest of the page. When I changed the color for the "WAA" table to black (just to text how it looks), ALL the text on the page changed to black!

Way does it seem as though it's not paying attention to the table id of "WAA" and applying anything in that table to the whole page?

[Albert Wiersch]

I noticed you were using this CSS:

Code: Select all

table#WAA, th, td
{
  BORDER: 5px solid red;
  PADDING: .3em;
}

Which also affects all <th> and <td> elements in all tables (and not just tables with id="WAA").

Perhaps you want something more like:

Code: Select all

table#WAA
{
  BORDER: 5px solid red;
  PADDING: .3em;
}

I hope this helps.

[paulp575]

Yes; that's what I was trying to accomplish.

[paulp575]

Now that that's resolved, if you notice it's positioned with 2 different backgrounds (note page URL has been updated with today's date):
https://ewatv.org/index-copy-2024-10-09.html

How do I move it so it's in front of either the black background or in front of the current background image?
Thinking if it could be placed in front of the background image, it would be easier to read than if it was in front of some color background.

If you scroll down you'll notice now part of the main page's text is no longer in front of the background image. I don't think that's solvable because the background image is a fixed size and don't think it can be stretched without looking weird.

[Albert Wiersch]

Hello, sorry for the delay. Had family in town and events to attend.

You can move the background with the 'background-position' property. You could remove the 'background-repeat: no repeat' declaration to fill in the background that the image doesn't cover, or change it to 'repeat'.

You could also use the 'background-size: cover' property to scale the image so it fills the entire background. You might like this one best. It prreserves the aspect ratio of the image while scaling so it shouldn't look weird although it may look pixelated or blurry if it's scaled up too much... but since it's just a background image that probably doesn't matter too much.

You can get more info on these properties via MDN. Here is a good MDN help/reference page for 'background-size':
https://developer.mozilla.org/en-US/doc ... round-size

And in CSS HTML Validator, you can put the cursor on a CSS property and press F1 to get a help page with helpful links. For most CSS properties one of the links on the F1 help page should be a link to the MDN CSS reference for the property.

[paulp575]

Guess I didn't place the background-size in the correct place?

Here's what I ended up with: https://ewatv.org/index-copy-2024-10-20.html

[Albert Wiersch]

Definitely better then 2024-09-09!

background-size should probably go where background-image is.

[paulp575]

That worked - thanks!
The background picture doesn't appear to be too bad looking either.
Check it out here: https://ewatv.org/

At first it didn't work. I forgot to also upload the revised style sheet.

[Albert Wiersch]

Yeah! That background looks pretty good!

The yellow text might be a little hard for some people to read when it's on the lighter parts of the background though, in case you want to try to do something about that. If so then maybe you could make the text shadow darker. Just a thought/suggestion I thought I'd throw out there.

[Lou]

The yellow text might be a little hard for some people to read

yep