Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Adding text into a class name list

Featured Replies

Hi all,

 

I am a new member of this forum, and I am hoping some of you experts can help me with a few problems I am having with a website I am building (almost complete). I will add these problems one at a time with the hope that you can help me.

 

I am testing each page so it complies with the W3C requirements as I go along. I have used XHTML throughout the site.

 

Question one:

 

This relates to the problem I am having inserting a small amount of text within a list that is generating line numbers 1 to xv, If I add a single word (PLUS) it numbers it and I don't want this. I am enclosing the XHTM document showing what I want to add. (using Notepad). I have two bit of text I want to add this is as follows:-

 

1. <!-- NEED TO ADD THE WORD ON SINGLE LINE .... "PLUS" -->

 

and

 

2. <!-- NEED TO ADD THE FOLLOWING TEXT:-....Where two entrants gain the same aggregated marks they share the place points. The next placed entrant is awarded points for the position two below. Thus, for example, if equal third both entrants gain (7+6) divide 2=6.5 points and the next placed entrant gains 5 points.-->

 

I am sure that is quite a simple task, but it's got me stumped.

score.txt

  • Author

Hi,

 

If you have looked at the above you will see that my file does not show the HTML code as I expected. (I did say I was new) I should have enclosed it as follows:-

 

<h3>15. Scoring</h3>

<ol> <!-- Start of defined order list a to h -->

<li>Competitions may be judged by an external assessor, appointed by the Committee. The remainder are judged by members.</li>

<li>When a competition is judged by members each print and projected image will be individually scored by participating members using a scale of marks from 1 to 10 (10 being the highest mark).</li>

<li>These marks should reflect an absolute not a relative assessment (that is they should not be marked relative to the other entries but rather to a scale that reflects the perceived merit of each image without reference to that of any other image in the competition).</li>

<li>Members should ensure each and every entry - apart from their own - is marked. A Member cannot vote for his/her own entry(ies) and voting forms must have a vertical line drawn below their own entry number(s) to indicate a no-score.</li>

<li>Awards are made to those scoring the most points in each of the following categories:

<ol class="rom"> <!--specifies a classname for an element start from i to xv -->

<li>Open Prints</li>

<li>Open Prints (A4)</li>

<li>Open Projected Image (Slide and DPI)</li>

<li>Open Traditional Slide - PM</li>

<li>Themed Competitions</li>

<li>Print Panel</li>

<li>Slide Panel</li>

<li>British Wildlife Cup (DH)</li>

<li>Cat Bowl (Portrait)</li>

<li>DW Shield (Holiday Travel)</li>

<li>FP Cup (Humour)</li>

<li>LN Cup (Architecture)</li>

<!-- NEED TO ADD THE WORD ON SINGLE LINE .... "PLUS" -->

<li>Highest total points for the Year (from competitions i to vii above)</li>

<li>Print of the Year</li>

<li>Slide of the Year</li>

</ol> <!--specifies a classname for an element End from i to xv -->

For competitions i. to vii. above competition points are gained according the placement achieved from the aggregated members' marks:

<ol class="rom"> <!--specifies a classname for an element .. i to ix -->

<li>Winner 10 points</li>

<li>Second 8 points</li>

<li>Third 7 points</li>

<li>Fourth 6 points</li>

<li>Fifth 5 points</li>

<li>Sixth 4 points</li>

<li>Seventh 3 points</li>

<li>Eighth 2 points</li>

<li>All other entrants 1 point</li>

</ol>

</li>

<!-- NEED TO ADD THE FOLLOWING TEXT:-....Where two entrants gain the same aggregated marks they share the place points. The next placed entrant is awarded points for the position two below. Thus, for example, if equal third both entrants gain (7+6) divide 2=6.5 points and the next placed entrant gains 5 points.-->

<li>For Trophy Competitions (viii to xii) the winner is selected by the appointed judge or, in the absence of a judge, on the highest aggregated marks awarded by members.</li>

<li>For Highest Total Points (xv) award the winner is the member gaining the highest total competition points during that Club year.</li>

<li>For Print of the Year (xiii) and Slide of the Year xiv) the winner is selected by the appointed judge.</li>

</ol> <!-- end of defined order list a to h -->

 

<div class="pb"></div>

  • Author

If each li tag is numbered, your best bet is to put in a line break <br> inside one li tag to break into two rows.

 

You can make ordered lists stop numbering and start at a defined number, but that is more complicated. See item 3 here

http://www.wickham43.net/lists.php

 

Hi Wickham, Thanks for the prompt reply, I have tried several variation of what you suggested by all seems to upset the numbering throughout. I unfortuantly have to apply my application strictly to this to match a printed version also in circulation to members of the club. Everything is correct in the following:-

 

<li>FF Cup (Humour)</li>

<li>LN Cup (Architecture)</li>

PLUS This is line 62

<li>Highest total points for the Year (from competitions i to vii above)</li>

<li>Print of the Year</li>

 

But the above fails the W3C with the following error about the PLUS word:-

 

Validation Output: 1 Error

 

1. Error Line 62, Column 4: character data is not allowed here

 

PLUS

 

 

You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:

* putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>), or

* forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes), or

* using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.

 

I don't full understand what the above is telling me to do.

 

One thought I am wondering if any of the css is upsetting things.

 

What do you think

You have used character data somewhere it is not permitted to appear.

means that you have put text (character data) in a ol tag list without li tags; that's why I suggested that you include it in the previous li tag and use a <br> line break.

 

Alternatively you have to end one list with </ol> then put in the text in <p>...</p> tags then start another list with <ol> but that destroys the numbering so you would have to use the start code to start at a certain number. See my link in my last post.

  • Author

You have used character data somewhere it is not permitted to appear.

means that you have put text (character data) in a ol tag list without li tags; that's why I suggested that you include it in the previous li tag and use a <br> line break.

 

Alternatively you have to end one list with </ol> then put in the text in <p>...</p> tags then start another list with <ol> but that destroys the numbering so you would have to use the start code to start at a certain number. See my link in my last post.

 

Hi Wickham,

 

Great news all sorted, many thanks for all your pointers. I would not like to say how long I have been sorting this problem over the last few weeks.

 

What I did was as follows:-

 

<li>FP Cup (Humour)</li>

<li>LN Cup (Architecture)<p>PLUS</p></li>

<li>Highest total points for the Year (from competitions i to vii above)</li>

 

I did not have to get the numbering to start again as I expected it just carried on.

The same applied to the second entry of text. I changed it to:-

 

<li>Eighth 2 points</li>

<li>All other entrants 1 point<p>Where two entrants gain the same aggregated marks they share the place points. The next placed entrant is awarded points for the position two below. Thus, for example, if equal third both entrants gain (7+6) divide 2=6.5 points and the next placed entrant gains 5 points.</p></li>

</ol>

 

I will press on now and will come back to this forum with some of the other problems I have outstanding

 

Thank you very much indeed.

Well, that's not strictly correct as you shouldn't put a p tag inside an li tag, but it works although I don't think it will validate. The p tag starts a new paragraph with probably slightly more space between lines than a br tag.

  • Author

Hi Wickham,

 

I did try it in other ways, but it seemed to upset the line and paragraph numbering, also created a further indent in the paragraph and it looked a mess - also it failed the W3C test.

 

The way I have it now does give me a pass message in W3C. As it has given it the OK I will leave things as currently set. I agree perhaps it's given me a little more space between lines, but I looks fine. When I have completed the website I may go back to it and have another go.

 

Again many thanks for you great help that gave me the result I wanted.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.