[RESOLVED - For now!] Tables - Again!
-
- Rank IV - Intermediate
- Posts: 187
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
[RESOLVED - For now!] Tables - Again!
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?
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
- Albert Wiersch
- Site Admin
- Posts: 3818
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Tables - Again!
I noticed you were using this CSS:
Which also affects all <th> and <td> elements in all tables (and not just tables with id="WAA").
Perhaps you want something more like:
I hope this helps.
Code: Select all
table#WAA, th, td
{
BORDER: 5px solid red;
PADDING: .3em;
}
Perhaps you want something more like:
Code: Select all
table#WAA
{
BORDER: 5px solid red;
PADDING: .3em;
}
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank IV - Intermediate
- Posts: 187
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Tables - Again!
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3818
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Tables - Again!
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.
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
-
- Rank IV - Intermediate
- Posts: 187
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Tables - Again!
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
Here's what I ended up with: https://ewatv.org/index-copy-2024-10-20.html
paulp575
- Albert Wiersch
- Site Admin
- Posts: 3818
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Tables - Again!
Definitely better then 2024-09-09!
background-size should probably go where background-image is.
background-size should probably go where background-image is.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank IV - Intermediate
- Posts: 187
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Tables - Again!
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3818
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: [RESOLVED - For now!] Tables - Again!
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.
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
Re: [RESOLVED - For now!] Tables - Again!
yepThe yellow text might be a little hard for some people to read
Lou
Say what you will about Sisyphus. He always has work.
Say what you will about Sisyphus. He always has work.