[RESOLVED - For now!] Tables - Again!

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[RESOLVED - For now!] Tables - Again!

Post by 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?
Last edited by paulp575 on Mon Oct 21, 2024 4:24 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3819
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Tables - Again!

Post by 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Tables - Again!

Post by paulp575 »

Yes; that's what I was trying to accomplish.
paulp575
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Tables - Again!

Post by 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.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3819
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Tables - Again!

Post by 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Tables - Again!

Post by 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
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3819
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Tables - Again!

Post by Albert Wiersch »

Definitely better then 2024-09-09! :D

background-size should probably go where background-image is.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 187
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Tables - Again!

Post by 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.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3819
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: [RESOLVED - For now!] Tables - Again!

Post by 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
Lou
Rank V - Professional
Posts: 300
Joined: Fri Jul 29, 2005 5:55 pm
Location: CO
Contact:

Re: [RESOLVED - For now!] Tables - Again!

Post by Lou »

The yellow text might be a little hard for some people to read
yep
Lou
Say what you will about Sisyphus. He always has work.
Post Reply