Inserting content using css

[Certificates]

I am new to this CSS system having used plain old HTML with millions of tags for the last ten years.

At the bottom of my web pages is the phrase Copyright 1999-2011.

When the year changes every year I update this on over 100 pages.

Can you use a CSS Sheet to do it ?

At present the very simple shee I am using is below


body {
color: black; font-weight:bolder;font-style:italic;font-size: 15px;;
background-color: aqua }
table,td,th

p { font-size: 15px;font-style:italic;font-weight:bold}

a:link {
color: black }
a:visited {
color: black }A{text-decoration:none}

Thanks very much

Antony

[topr8]

no, css affects the style of the page not the content.

[Certificates]

Thank you.

I guess CSS won't help me here then !

Kind regards

Antony

[lucy24]

:: cough, cough ::

css:

p.copyright:after {content: "2011";}

html

<p class = "copyright">
Copyright 1999-</p>

[alt131]

Hi Antony, good to see you back :) While I agree with topr8's statement that css affects style, not content - and personally believe it the two should be kept firmly separated, css does provide a way to generate content using the 12.2 The Content Property [w3.org] on 12.1 :before/:after pseudo-elements [w3.org]

So you could do something like
<p class="copy">Copyright </p>
and
p.copy:after {
content: " 1999-2011"
}

However, I think the real question is whether you should use style to do this as copyright is critical content and should therefore be in the HTML, plus pseudo elements are only supported by modern browsers. What is commonly used for this is something like a simple php include if your server allows. They are designed for exactly this sort of thing, and if you have been using HTML for 10 years you should be able to set one up quite easily. A search on "php includes" should bring up lots of easy tutorials explaining how.

The other issue to consider if whether the copyright date can change. We don't do legal advice at WebmasterWorld, so the following is not advice, only information to indicate why it is best to obtain advice from appropriate specialists: Basically, in many jurisdictions the author of an original work automatically has ownership from the date of creation (or in some jurisdictions some form of "publication"), but it means the date on which the work was created, and therefore the date from which copyright commences, does not/cannot change. But to emphasise - this is not legal advice, just general information about the underlying issues!

Awww ... Lucy's faster at typing than me ;)

[topr8]

ok!

i stand corrected, glad of the info.

however it is insane to put such a rule in your style sheet as you will be serving worthless bandwidth. (which when served millions of times over the year comes to quite a lot)

also it saves you nothing as every year you will still have to change the style sheet, you may as well do it in php or similar on the page anyway.

[Certificates]

Thanks all again for your input.

This appears to be the best way forward as far as I can see



<p><script language="Javascript" type="text/javascript">
<!--
document.write('&copy;1999' );
document.write(' - ');
document.write(new Date().getFullYear());
document.write(' C5D-Certificates');
//-->
</script> <p>

Kind regards

Antony

[caffinated]

...and if the user has js switched off?

alt131's php solution is better if you can do it

[lucy24]

Ditto. I'd hesitate to use javascript for an essential part of page content. It's not just decoration; it's information the user needs to have. At a minimum, put in a <noscript> piece saying something generic like "all text copyright".

Isn't the "script language" tag deprecated? (I found one place that said it's been "deprecated" since 1996!) Most places leave it out. But then again,

According to IANA, the "text/javascript" MIME type is obsolete. The new standard is "application/javascript". However, "application/javascript" is not supported by Internet Explorer.

:: sigh ::

[Certificates]

If this is the best solution


So you could do something like
<p class="copy">Copyright </p>
and
p.copy:after {
content: " 1999-2011"
}

Are you saying that this bit goes on the web page ?
<p class="copy">Copyright </p>

and this

p.copy:after {
content: " 1999-2011"
}

Goes in the style sheet ?



It seems all so much different from what I'm used to ! I have really tried to do it myself having got books from the library but it's not easy reading

Thanks

[lucy24]

Are you saying that this bit goes on the web page ?
...

and this
...

Goes in the style sheet ?

Yup.

HTML goes on the page: <p>, <p class = "blahblah">, what have you.

CSS goes in the style sheet:

p {generic blahblah for all paragraphs}
p.copy {specific blahblah for only this class of paragraph}

p:after {"pseudo-class" for stuff that gets automatically added to the end of each paragraph}
p.copy:after {"pseudo-class" for stuff that gets automatically added only after paragraphs of class "copy"}

You won't actually have a "p:after" piece. I just put that in so you can see the pattern.


Oh, and bandwidth isn't exactly an issue, since the stylesheet is already there anyway. A few more bytes per visit, that's all. Definitely less bandwidth than having server-side php add the same text to every page :)

[topr8]

>>Oh, and bandwidth isn't exactly an issue, since the stylesheet is already there anyway. A few more bytes per visit, that's all. Definitely less bandwidth than having server-side php add the same text to every page

actually i take your point that the extra bandwidth is tiny, however by saving it wherever you can it does add up - assuming you serve a lot of pages or aspire to.

but actually using server side scripting would use less bandwidth not more.
(although it would take more processing power on the server - if we are being pinickity)

however the main point is that in actual fact the OP's question was wrong, if they want to easily change the date at the bottom of x pages, there are 2 better solutions:

1. if the site has ambition and is expected to expand a lot over time, then making the 'footer' some kind of include (there are many ways to do this) would make sense as ultimately as the site gets bigger server side scripting is going to become essential.

2. if the site is going to remain as plain html pages then, using a text editor to update every page on the site would make sense, most editors will be able to find and replace across a whole site/folder whatever.

i guess i'm just very old school and believe that it is best to keep it as simple as possible, why use css or js when actually it could just be changed in the page code and be done with it ... i like to leave the client (device) with as little to do as possible.

[lucy24]

If it really comes down to it, CSS isn't much more approprite than javascript. Originally I was just pointing out that it can be done.

Certificates, it's only fair to say that in practice you'd hardly ever use pseudo-classes for anything but recurring decorations-- like putting brackets around some type of span, or changing a link color. I took a quick look at my own style sheets and the only pseudo-class I could find, apart from a:hover and similar, was one directory that uses first-letter.

[Certificates]

Thanks to all of you.

I seem to have set of a debate between you three !

Most of it is over my head at this point, but I'll keep working on it !

Kind regards

Antony

[rocknbil]

This appears to be the best way forward as far as I can see

As mentioned, if JS is disabled it won't work, and search engines don't parse JS - so this is what will get indexed

Copyright 1999-
(To infinity . . .AND BEYOND! :-)

Additionally document.write is much more intensive than other JS methods, using the client's memory - choose something else.

Otherwise the issue remains that you have to go in and update it every year. Server side scripting and SSI's (server side indcludes, a very appropriate tool for the job considering how minor it is) take care of that. Given the simplicity of the task, if nothing else dynamic os going on, I'd set the server to parse HTML as SSI

# add to .htaccess at root
AddHandler server-parsed .html

... and do . . .

<!--#config timefmt="%Y"-->

Copyright 1999-<!--#echo var="DATE_LOCAL" -->

The page output will have the year without JS, you'll never have to update it, low scripting overhead . . . golden.

[topr8]

Thanks to all of you.

I seem to have set of a debate between you three !

well, thank you Certificates, i love a good debate - especially on minor points! (i probably don't get out enough!)

[Certificates]

I did try doing this, but it just doesn't seem to work even though I have copied and pasted it eactly as typed.


This is my style sheet
..........................................................
body {
color: black; font-weight:bolder;font-style:italic;font-size: 15px;;
background-color: aqua }
table,td,th
p.copy:after {
content: " 1999-2011"
}
p { font-size: 15px;font-style:italic;font-weight:bold}


a:link {
color: black }
a:visited {
color: black }A{text-decoration:none}}
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

And this is the relevant bit from the HTML


<p class="copy">Copyright </p>



Does it look rught or is it me ? I did google for using P Copy ut didn't find much of much use

[alt131]

I seem to have set of a debate between you three !

Yes - the css forum is for discussing code issues, so discussing the issues associated with various techniques is what we do ;)

Most of it is over my head at this point,

Only so much, Antony - I see you've raised three issues with this thread:
#1. Can css generate content of the sort required here <--- it can.
#2. How to do this using css - and <--- which is the technical code issue for you, and I expect that once you understand classes and pseudo-classes you'll be better placed to start thinking about the issues being raised in:
#3. Whether this should be done using css or some other technology. <--- which is the issue most of the other posters are having so much fun discussing.

So I second Topr8 - your question creates a chance to swap thoughts and opinions. Like most regulars I'm here to listen, learn and share if I can - so this thread is really enjoyable :)

but it just doesn't seem to work

What browser are you viewing in - recall my comment this only works for modern browsers, so you will need higher than internet explorer7. Also, note your selector is actually:
th p.copy:after {...}

That means the :after will only be applied to a <p> with the class name "copy" that is a child of a a th. Note your original post had this:

table,td,th
p { font-size: 15px;font-style:italic;font-weight:bold}

- which means the <p> styles only apply to a para that is contained inside a th as well. Are you quite sure you have the all you're <p>'s nested inside <th>'s and that the <p> with the copyright notice really is inside a <th>? If not, put a comma after the th so you have this:
th, p.copy:after {...}

I did google for using P Copy ut didn't find much of much use

that's to be expected because "copy" is a class name I invented. (Just like Lucy invented "copyright") Our "Css crash course" [webmasterworld.com] explains about classes, and the Opera Web Developers course [dev.opera.com] provides a lot more detail and useful background as well.

[Certificates]

Thanks all very much for your efforts, but it's simply too much for me.

As far I can see, I am doing everything correctly, but the desired result fails to materialise.

I have tried to take it to it;s very simplest and tried a test CSS sheet with the HTML page but there is nothing after the word copyright.

I am using IE9 on Windows 7, so it's pretty much up to date. And the HTML validates. I am testing it out on a fairly basic page without any tables

Here is the very basic CSS sheet, named testmystyle.css


body {

p.copy:after {
content: " 1999-2011"
}


And if I am allowed to post the HTML, it's here. Rather basic and certainly much improvabel with CSS i guess, but if I can't grasp this basic bit of stuff, then maybe there is no hope.


You will note that most of my posts are very early in the morning. So I shall not be able to reply again this evening



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>The Hurst Coronation Medal</TITLE>
<META name="description" content="English Birth Certificates English Death Certificates &amp; English Marriage Certificates supplied within 5 Days">
<META name="keywords" content="Birth Certificates, Death Certificates, Marriage Certificates, Family History">
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.6000.16481" name=GENERATOR>
<link rel="stylesheet" href="testmystyle.css"></HEAD>
<body>
<span style="font-size: 19px; color: red;"> C5D(Certificates)</span>
<br>Example<BR>
Example
<br>Example
<br>Example<BR><A
href="http://www.example.com"><span style="color: blue;">www.example.com</span></A>
<BR>Fax Number:+123456<BR>E mail:<IMG height=24
src="#" width=268 alt="e mail address">
<HR><div align="center"><span style="font-size: 19px; color: red;"> Your Certificates in 5 Days ?</span></div>
<div align="center"><br>There is another way. <a href="http://www.example.com">www.example.com</a> Why not give me a try ?</div><HR><br><br><center><div align="center"><a href="http://www.example.com/click-123456" target="top">
<img src="http://www.example.com/image-123456" width="264" height="60" alt="234x60 I am, your Nan" border="0"></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--START MERCHANT:merchant name Find My Past from example.com.-->
<a href="http://www.example.com/cread.php?"><img src="http://www.example.com" width="264" height="60" alt="264x60" border="0"></a>
<!--END MERCHANT:merchant name Find My Past from example.com--></div></center>
<center><br>
<br>This medal was struck in 1911 to celebrate the Coronation of King George V.
<br>
<br>I have no idea of how many were struck I'm afraid:- I got it from E Bay!&nbsp;&nbsp; From someone in Scotland.
<br>
<br><A
href="http://www.example.com/example.jpg"><IMG height=650
src="http://www.example.com/example.jpg" width=600
border=0 alt="Medal"></A></center>

<br>
<br><center><INPUT TYPE="button" VALUE="Return to example pages" ONCLICK="window.location.href='http://www.example.com/pages.htm'">
<br>
<br>
<br>
<br><br><br><a href="http://www.example.com/click-123456" target="_top">
<img src="http://www.example.com/image-123456" width="468" height="60" alt="Enthusiasts" border="0"></a>
<br><br><!--webbot bot="HTMLMarkup" startspan -->
<BR><br><p class="copy">Copyright </p>
</center>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html40" alt="Valid HTML 4.0 Transitional" height="31" width="88"></a>
</BODY></HTML>

Once again thank you all very much for your efforts, I really do appreciate your and will just have to keep pegging away to see if I can get anywhere

Best regards

Antony

[edited by: alt131 at 12:06 am (utc) on Oct 25, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

[alt131]

Hi Antony, yes you can post "relevant" HTML (and thanks for being concerned), and although in this case (see my third paragraph) I think the issue is in the css, the HTML has helped confirm that is the case. The only thing is to avoid site-identifiable information, so I've "examplified" the code for you.

I'm sure other posters will have lots of suggestions about things to do to improve the code: Recall most of us aim to write the "cleanest" code possible so users get the best possible experience - so suggestions are to help you achieve that goal too.

But to the all-important solution :) If your test stylesheet really does look like this, then we probably have the cause of the trouble.

body { <---look closely at this
p.copy:after {
content: "1999-2011"
}
See how you've opened a rule set for body - but not closed it again with a matching brace before starting the rule for p.copy:after? So, for your test stylesheet delete everything until it is blank, then insert this:
p.copy:after {
content: " 1999-2011"
}

Second, best to include a type with the stylesheet link, so change
<link rel="stylesheet" href="testmystyle.css">
to
<link rel="stylesheet" type="text/css" href="testmystyle.css">

Then let us know how you get on - we've got most time-zones covered so someone will be around when you next post.

[Certificates]

Thanks again, but sadly, no luck.

I tried removing the body ] completely and just using





p.copy:after {
content: " 1999-2011"



}

on the page, but it made no difference.

I then tried this second option where the body tag appears to be closed after the color Aqua. Agai no luck.



body {
color: black; font-weight:bolder;font-style:italic;font-size: 15px;
background-color: aqua}
p.copy:after {
content: " 1999-2011"
}



I have tested it by putting both items on my desktop. Also by putting both items on line too and seeing it in a live situation but again the only thing is

Copyright amd nothing to do with the year.

Do the whole lot work for any of you ?

Thanks

Antony

[lucy24]

Boy, that aqua background makes it easy to tell if it's reading your CSS doesn't it :lol:

Yup, works for me. HTML preview, all five browsers, though not in Lynx or-- hahaha-- MSIE 5.2.

[Certificates]

Well it doesn't seem to work on IE 9 for me.

I have tried two different computers too.

I know that I can't check the URL here, so if I were to send you the link as private message would you check if what I have done loads on line correctly for you, so then I shall know that it is something to with how IE9 is set up

Thanks

Antony

[alt131]

Hi Antony, really appreciate you respecting the no links policy - especially as the whole point is to change the sample page as soon as possible to get it working ;) We also try to avoid taking conversations off-forum so we can make sure the solution remains in the thread and helps anyone else with the same problem in the future, but enough admin - back to code :)

Using your provided code works for me in ff, Op11, winsafari4, so the issue is your ie. So:

1. Have you checked you have ie9 standards mode rather than an older compatibility view?
   
   
2. I can't test, but I ust realised the doctype in your provided code is:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   That switches ie into non-standard mode. It's not really best practise to use it for coding so try your test page with the following (full) doctype to try the page in standards mode:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
   
   
3. As already suggested, make sure you send the type in your link to the style sheet, so change
   <link rel="stylesheet" href="testmystyle.css">
   to
   <link rel="stylesheet" type="text/css" href="testmystyle.css">

Does any of that help?

[Certificates]

Well, perhaps I'm not a CSS numpty after all. Just an IE numpty.

I downloaded Firefox and the Stylesheet works perfectly.

So why not in IE 9 ? I have tried both in and out of compatability mode, but it's the same. Beyond me

I really appreciate all of the time you have each spent with me for nothing.

It's been very helpful, even if some of it has been above my head !

Now I can try and start working with some of the other aspects of the HTML which is probably quite pre historic !

Kind regards

Antony

[Certificates]

Just a quick PS. I have been advised as follows

By looking at your source it becomes clear why you do not see your dates in IE:
p.copy::after {
content: " 1999-2011";
}

Internet Explorer does not support the ::after CSS3 psuedo element.


Again thanks for the efforts

Antony

[alt131]

Hi Antony, ie does not support the css3 double colon syntax. It does support the css2.1 single colon syntax as suggested here, and what you have been copy/pasting as the code in your css.

[Certificates]

Well perhaps it does, but it just won't do this.

It's above me I'm afraid.

But at least the styling you have provided me with is fine.

Thanks and Good night

Antony

[alt131]

Have you tried adjusting the doctype and stylesheet link as also suggested?

[Certificates]

Alt; that's it, you've cracked it. It's now working perfectly.

I had done part of what you suggested but I had assumed that this bit was a link to read (though it wouldn't open)

"http://www.w3.org/TR/html4/loose.dtd">

I didn't realise that it should go in my html document.

Thank you all very much for your patience and help. You've all been great

Thanks

Antony