The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> New to coding, insert class into html page
MarinePig
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 29 2016, 12:44 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,658
Joined: 10-August 06
Member No.: 7
QUOTE(MarinePig @ Oct 29 2016, 06:43 PM) *

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. sad.gif ninja.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MarinePig
post Oct 29 2016, 01:10 PM
Post #4





Group: Members
Posts: 6
Joined: 29-October 16
Member No.: 24,908
QUOTE(Christian J @ Oct 29 2016, 01:44 PM) *

QUOTE(MarinePig @ Oct 29 2016, 06:43 PM) *

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. sad.gif ninja.gif


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MarinePig
post 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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MarinePig
post Oct 30 2016, 11:32 AM
Post #7





Group: Members
Posts: 6
Joined: 29-October 16
Member No.: 24,908
QUOTE(pandy @ Oct 29 2016, 03:15 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MarinePig
post Oct 30 2016, 12:13 PM
Post #9





Group: Members
Posts: 6
Joined: 29-October 16
Member No.: 24,908
QUOTE(pandy @ Oct 30 2016, 01:09 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
MarinePig
post Oct 30 2016, 01:14 PM
Post #10





Group: Members
Posts: 6
Joined: 29-October 16
Member No.: 24,908
QUOTE(pandy @ Oct 30 2016, 01:09 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 03:12 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC