Class selectors, still a bit of a...

Sep 24th, 2009 at 01:34 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

Here is a small bit of html on a page I am working on. A bulleted list needs some different-coloured text, so I created a class selector:
<ul type="square">
<class ="articlelist">
<li>The QES Approach - explaining QES attitude to correct English. Prescriptivist or descriptivist?</li><br>
<li>Academies overview - introducing academies in other languages and what they do.</li><br>
<li>Style - explaining what constitutes good style in English.</li><br>
<li>The People's English - Showing just how badly ordinary people use their mother tongue.</li><br>
<li> Gender and Gender Neutrality - How the word "gender" is currently being misused to mean "sex".</li><br>
<li> Teaching English - An article by Mona McNee, a specialist in English teaching in the UK.</li><br>
<li>Political correctness - Demonstrating that political correctness plays havoc with correct language</li><br>
</articlelist>
</ul>
In my sttylesheet, I created this small rule:
.articlelist {
color: #330033;
}
I saved everything, but no change has been achieved 'been messing around for half an hour and still none the wiser.
Any advice would be appreciated
:lol::lol:
tonethemoan
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Sep 24th, 2009 at 01:57 PM
User 122279 Photo

Inger
Senior Advisor
14,648 posts
Online Now

Change this bit

<ul type="square">
<class ="articlelist">

to

<ul type="square" class="articlelist">

You also won't need the closing tag for articlelist.

BTW, something that throws errors when validating are the <br>s in between the list items.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Sep 24th, 2009 at 02:01 PM
User 3004957 Photo

CoffeeCup Software Rocks!
Registered User
866 posts

A class is an attribute that's set for any element on the page, not a separate element by itself. That means the class would need to be applied to either the ul or li tags:
<ul class="articlelist">
<li></li>
<li></li>
<li></li>
</ul>


You'll also want to put the list type into the CSS code:
<style type="text/css">
.articlelist {
list-style-type: square;
color: #303;
}
</style>
Sep 24th, 2009 at 02:06 PM
User 122279 Photo

Inger
Senior Advisor
14,648 posts
Online Now

...Something else: Be sure to post a link to the site when it is finished. Those list items made me want to read on ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Sep 24th, 2009 at 03:17 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

Your assistance is appreciated Inger Elk, I have a site now and you will see when you get there that there is a very good reason why it needs a complete overhaul....it was my first attempt:
http://www.queens-english-society.com.
I see you do not approve of <br> What is the stablished way of line spacing?
tonethemoan
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Sep 24th, 2009 at 03:31 PM
User 3004957 Photo

CoffeeCup Software Rocks!
Registered User
866 posts

LI elements are usually rendered as either block-level or at least inline-block-level elements, meaning there's an automatic line break after each item. If you want to increase the spacing between items, then you can use more CSS to add line-height, padding, margins, or other properties:

.articlelist li {
line-height: 1.5em;
}
Sep 24th, 2009 at 03:38 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

You are a star Cesar.
I think in my case it's and old dog learning new tricks ;)
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Sep 24th, 2009 at 03:39 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

Your site is pleasing to the eye. I did not go beyond the first page, but I think I should bookmark your site for future reference.

During your overhaul of your site, be sure to validate your code. Your current site has 64 errors in the CSS style sheet. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.queens-english-society.com%2Fcss%2Fstyles2.css&profile=css21&usermedium=all&warning=1&lang=en Some of these errors will be ignored by some browsers (the entire entry) and others will attempt to interpret what is meant, and may get it wrong,

Some of those errors are caused by the _ being placed in from of a valid entry.

Since Inger is probably sleeping (Norway) right now, may I suggest using the line-height style. You can see an example using a paragraph tag but it will also work for other text tags such as h1, h2, ul, li, etc. http://www.w3schools.com/css/pr_dim_line-height.asp.

When you validate the code on your pages, start by fixing the things at the very top of the code. Frequently errors at the beginning cause other valid code to appear to be bad. When using xhtml doctypes, tags must all be in lowercase and your <HEAD> tag will make the validator think that other items are not where they belong and will mark them as invalid.

Hope this helps.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Sep 24th, 2009 at 04:01 PM
User 1964159 Photo

Tonethemoan
Registered User
156 posts

BillR Sir, I am obliged to you. I was ahead of you on the line height thing, stupidly i was trying it with line-space: 1.5em; and just did'nt think. The advice about validation is excellent, that is one of the big points about the CC software, that and the "help forums", of course.
Thanks again, what a decent bunch you are.
tonethemoan
I luv the web
http://www.ajswebdesign.com
http://www.thethatcherstavern.com
http://www.philchambersconsultancy.co.uk
Sep 24th, 2009 at 07:24 PM
User 148353 Photo

Widoktadwat
Ambassador
808 posts

Tonethemoan wrote:

I see you do not approve of <br> What is the stablished way of line spacing?
tonethemoan


You should use <br /> instead of <br>
"Time heals everything. Know who said that? My Latin teacher at barber college!"
- Floyd Lawson

Widoktadwat - "Plays Well With Others"

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.