New to coding, insert class into html page |
New to coding, insert class into html page |
MarinePig |
Oct 29 2016, 11:43 AM
Post
#1
|
Group: Members Posts: 6 Joined: 29-October 16 Member No.: 24,908 |
please don't laugh, I'm sure this is easy but I've spend close to 10 hours on this one item. I got the rest of the page the way I'm needing it but have the below problem. I need to insert a class change into an ordered list. I need to do this from a .css file onto the html. I have followed the examples in the class and gone back over this so many times its silly. Can someone help? Here is what I have for the class change.
.fontchange { font-family: Arial; } And this is what I have in the ordered list. <li span class="fontchange">Sandra Bullock</span /li> Thank you in advance. |
pandy |
Oct 29 2016, 12:43 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
You've done the class thing correctly, but there are several other HTML mistakes.
You've used one element (SPAN) as an attribute of another element (LI). CODE <li span class="fontchange">Sandra Bullock</span /li> ^^^^ Then the closing tag for SPAN lacks the closing >. CODE <li span class="fontchange">Sandra Bullock</span /li> ^ And the closing tag for LI lacks the opening <. CODE <li span class="fontchange">Sandra Bullock</span /li> ^ It should be like this. CODE <li><span class="fontchange">Sandra Bullock</span></li> But the SPAN isn't needed at all. So the below is what you actually should use. CODE <li class="fontchange">Sandra Bullock</li> Don't buy into the overuse of SPAN and DIV. They are NOT needed to hang CSS on. They have other uses, but that's not one of them more than in special cases. I suspect the original HTML and CSS don't look exactly like what you posted though. I don't know of a browser that wouldn't apply the font anyway. These errors could cause other problems, but not that. |
Christian J |
Oct 29 2016, 12:44 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
|
MarinePig |
Oct 29 2016, 01:10 PM
Post
#4
|
Group: Members Posts: 6 Joined: 29-October 16 Member No.: 24,908 |
I need to insert a class change into an ordered list. (Terminology sidenote: do you mean you change its style or give it a CLASS attribute? These two are not necessarily the same thing.) Posted my original reply just one minute after pandy. Sigh. The exact instructions are create classes to style tags as follows: Change the font of one items in the ordered number list (numbered) list to Arial. |
MarinePig |
Oct 29 2016, 01:13 PM
Post
#5
|
Group: Members Posts: 6 Joined: 29-October 16 Member No.: 24,908 |
I apologize if the terminology is wrong. This is a one week class on HTML so you can guess my experience level here. I tried your changes and didn't get anything different. Either way that you showed.
Here is what I have. Its a simple favorite movie and actor. I have all requirements for the class except for the mentioned changes. <!DOCTYPE html> <html lang="en"> <head> <title>Pat's Movie Page</title> <meta charset="utf-8"> <link href="styles.css" rel="stylesheet"> </head> <body> <h1>Pat's Favorite Movies</h1> <img src="f14.jpg" alt="F-14 Fighter Jet" height="200" width="400"> <ul> <li>Top Gun</li> <li>Back to the Future</li> <li>Karate Kid</li> <li>Rocky 4</li> <li>Titanic</li> <li>Bourne Film Series</li> <li>The Net</li> </ul> <p> Probably my favorite movie of all time would have to be Top Gun. The movie came out in 1986 when I was a Freshman. The movies starts out making Maverick look like a hero in saving a fellow pilot who froze after an encounter with a Russian aircraft. But then we find out about many of the problems that Maverick has from losing his father when he was young. At one part in the movie, he has an unfortunate accident that ends up killing his RIO (Radar Intercept Officer) Goose. He ends up graduating from the Top Gun School and is immediately flown to an ongoing incident. During this encounter, he has the exact same thing that killed his RIO, happen again. However, he is able to recover the plane but is severely shaken up and disengages the battle. After praying for his fallen comrade to talk to him, he reengages in the battle and saving the day. This movie was one of the first ones I remember of facing adversity and becoming a stronger person in the end. Here is a link to my favorite part. Its at 8:20 into this video. <a href="https://www.youtube.com/watch?v=jqfXXaOisKo">Favorite Part></a></p> <h2>Pat's Favorite Actors/Actresses</h2> <img src="stallone.jpg" alt="Sylvester Stallone" height="200" width="200"> <p> I've always enjoyed Sylvester Stallone's movies. The first one that I remember seeing was First Blood. There were two Rocky movies before that but I either didn't see them or I was too young to remember. The movie that solidified me being a fan of Sylvester Stallone was Rocky IV. Remember this was still during what people considered the Cold War. It was lonely American boxer going over to a foreign land and taking on the great behemoth. The whole premise is cheesy now that I look back on it but to this day some of the music from the movies sound track accompany me to the gym. I have just always liked how he come across as a down to earth kind of guy. I've never met him so this could be not true but I've always respected the guy.</p> <ol> <li>Sylvester Stallone</li> <li>Matt Damon</li> <li>Angelina Jolie</li> <li>Robin Williams</li> <li>Michael J. Fox</li> <li><span class="fontchange">Sandra Bullock</span></li> </ol> </body> </html> This is the CSS file. Table { border-style: solid; } td { border-style: solid; border-color: #000000; background-color: #800080; padding: 10px; } h1 { color: #FF0000; border-style: double; text-align: center; } h2 { color: #0000FF; border-style: double; text-align: center; } ol { font-family: cursive; text-align: left; } ul { font-size: 28px; text-align: left; } p { color: #008000; font-family: Arial; } .bgcolorchange { background-color: #FFA500"; } .colorchange { color: #FFA5000; } .fontchange { font-family: Arial; } |
pandy |
Oct 29 2016, 02:15 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
But that works. Sandra Bullock is in Arial. But please don't use that SPAN. It's so ugly.
You have a couple of CSS errors though. Use the w3c CSS checker to find them. https://jigsaw.w3.org/css-validator/ |
MarinePig |
Oct 30 2016, 11:32 AM
Post
#7
|
Group: Members Posts: 6 Joined: 29-October 16 Member No.: 24,908 |
But that works. Sandra Bullock is in Arial. But please don't use that SPAN. It's so ugly. You have a couple of CSS errors though. Use the w3c CSS checker to find them. https://jigsaw.w3.org/css-validator/ Ok, finally got it all working. There was a quote make behind the bicolor section that wasn't supposed to be there. And I eliminated the span. I owe you both a beer for your time and effort. I am very grateful and this stuff is frustrating. Take care. |
pandy |
Oct 30 2016, 12:09 PM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Ah, right. The background color rule, you mean. The validator pointed it out, but I didn't read the errors since it worked in my browser. Sloppy me. Did you fix the other error too? You had one digit too many in the color value for .bgcolorchange.
|
MarinePig |
Oct 30 2016, 12:13 PM
Post
#9
|
Group: Members Posts: 6 Joined: 29-October 16 Member No.: 24,908 |
Ah, right. The background color rule, you mean. The validator pointed it out, but I didn't read the errors since it worked in my browser. Sloppy me. Did you fix the other error too? You had one digit too many in the color value for .bgcolorchange. Yes, all errors corrected. Again thanks for the help. Gotta use the validate more. All works now. |
MarinePig |
Oct 30 2016, 01:14 PM
Post
#10
|
Group: Members Posts: 6 Joined: 29-October 16 Member No.: 24,908 |
Ah, right. The background color rule, you mean. The validator pointed it out, but I didn't read the errors since it worked in my browser. Sloppy me. Did you fix the other error too? You had one digit too many in the color value for .bgcolorchange. Yes, I got everything up and running. Thank you again. |
Lo-Fi Version | Time is now: 26th April 2024 - 02:53 PM |