473,320 Members | 1,988 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Change content with CSS?

I'm trying to modify actual html content via the style sheet. I know
there is the :before and :after tags, but I'm not quite sure how to use
it and if there's another way to do it.

Here's the HTML code:

<p class:xyz>Section Heading</p>

Here's some things I've tried in the CSS:

..xyz:after { content: <p>New heading<p> }
..xyz:before { content: <p>New heading<p> }

Neither actually modifies the content. Any ideas?

Thanks!

Mike

Mar 7 '06 #1
15 7135
One more thing.... I'm doing this in an organization that uses IE6 as
their standard, so I know that :content, :before and :after don't work.
I wonder if there's some way to embed javascript code via css... or is
that the very same issue?

Thanks!

Mike

Mar 7 '06 #2
On 7 Mar 2006 11:55:40 -0800, in
comp.infosystems.www.authoring.stylesheets "Mike" <mp*****@gmail.com>
<11**********************@v46g2000cwv.googlegroups .com> wrote:
| I'm trying to modify actual html content via the style sheet. I know
| there is the :before and :after tags, but I'm not quite sure how to use
| it and if there's another way to do it.
|
| Here's the HTML code:
|
| <p class:xyz>Section Heading</p>
|
| Here's some things I've tried in the CSS:
|
| .xyz:after { content: <p>New heading<p> }
| .xyz:before { content: <p>New heading<p> }
|
| Neither actually modifies the content. Any ideas?


You need to modify your css to:
..xyz:after { content: "New heading" }
..xyz:before { content: "New heading" }

Although it doesn't look like that you can include html tags you might
be able to set the top-margin properties to achieve the same effect.

http://www.w3.org/TR/REC-CSS2/select...fore-and-after
http://www.w3.org/TR/REC-CSS2/generate.html
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
Mar 8 '06 #3
On 7 Mar 2006 11:55:40 -0800, "Mike" <mp*****@gmail.com> wrote:
I'm trying to modify actual html content via the style sheet. I know
there is the :before and :after tags, but I'm not quite sure how to use
it and if there's another way to do it.
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly. But if IE ever
implements them I'm quite sure that in 99% of cases they will be used
inappropriately.

Here's the HTML code:

<p class:xyz>Section Heading</p>

Here's some things I've tried in the CSS:

.xyz:after { content: <p>New heading<p> }
.xyz:before { content: <p>New heading<p> }

Neither actually modifies the content. Any ideas?


Two:
1) for headings, use <Hn> markup, not <P>
2) if you wish to insert standard text in various locations, server-side
processing is the place to do it (PHP, JSP or similar).

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Mar 8 '06 #4
Thanks for this. I'm attempting to do this in a Microsoft Sharepoint
Portal Server enviroment. Sharepoint has about 100 pages in their
templates. Each use the same two CSS files, with an optional "custom"
CSS, so any changes I make to the CSS apply to each of the template
files. Microsoft warns that they may overwrite these template files in
future service packs or upgrades. They do, however, say they will not
touch the customized CSS. So, unfortunately, my choice is to modify
each of the 100 or so template files, and risk loosing the changes in
the future, or make the change once in the custom CSS. How would you
approach it?

Mike

Mar 8 '06 #5
> I wonder if there's some way to embed javascript code via css...

There is... I got some spam like that,
But don't use it cause it may go away.
--

Bye.
Jasen
Mar 9 '06 #6
VK

Mike wrote:
I'm trying to modify actual html content via the style sheet. I know
there is the :before and :after tags, but I'm not quite sure how to use
it and if there's another way to do it.


I don't know about :before and :after selectors (never encountered them
- looks like one of W3C sick fantasies to me :-)

You can attach CSS behaviors (bindings by Mozilla) on any descent
browser to change the text - and anything else. It is widely used - and
used by me widely.
(Under "descent browser" I hold IE 5.5 or higher, Firefox 1.0.4 or
higher, Camino 1.0 or higher).
// HTML file
<html>
<head>
<title>Behaviors</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
h1 {
-moz-binding: url(hover.xml#HoveringText);
behavior: url(hover.htc);
}
</style>
</head>
<body>
<h1>Sample</h1>
</body>
</html>
// hover.htc
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" />
<SCRIPT LANGUAGE="JScript">
function Hilite() {
if (event.srcElement == element) {
innerHTML = "Mouse is OVER me";
}
}
function Restore() {
if (event.srcElement == element) {
innerHTML = "Mouse is OUT of me";
}
}
</SCRIPT>
// hover.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="HoveringText">
<handlers>
<handler event="mouseover">
this.innerHTML = "Mouse is OVER me";
</handler>
<handler event="mouseout">
this.innerHTML = "Mouse is OUT of me";
</handler>
</handlers>
</binding>
</bindings>

Mar 9 '06 #7
This looks really intersting, I had no idea. I'm going to play around
with this and see if I can get it working...

Thanks!

Mike

Mar 9 '06 #8
In article <om********************************@4ax.com>,
Stephen Poley <sb******************@xs4all.nl> wrote:
On 7 Mar 2006 11:55:40 -0800, "Mike" <mp*****@gmail.com> wrote:
I'm trying to modify actual html content via the style sheet. I know
there is the :before and :after tags, but I'm not quite sure how to use
it and if there's another way to do it.


I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly. But if IE ever
implements them I'm quite sure that in 99% of cases they will be used
inappropriately.


Personally I like the idea of the :before and :after pseudo-elements,
although I am not sure exactly how to best make use of them as yet.

However I am not precisely seeing how their use modifies HTML content
any more than any other use of CSS. Unless you are implying that CSS
should not create content (say text, as below) on a page? In which
case, would not the use of background images in CSS fall into the same
category?

Using pseudo-elements in the CSS for my header:

#header li:before { content: "| "; } /* Pipe symbol except on first */
#header li:first-child:before { content: ""; }

/* The current folder is floated right and marked >> in the header */
#folder { display: inline; float: right; }
#header #folder:before { content: ">> "; }

allowed me to use cleaner HTML:
<ol id="header">
<li><a href="../index.htm">home</a></li>
<li><a href="../airlie/index.htm">airlie</a></li>
<li><a href="../blog/index.htm">blog</a></li>
<li><a href="../computer/index.htm">computer</a></li>
<li><a href="../epoc/index.htm">epoc</a></li>
<li><a href="../sf/index.htm">gegenschein</a></li>
<li id="folder"><a href="../palmtop/index.htm">palmtop</a></li>
<li><a href="../web/index.htm">web</a></li>
</ol>

to get this result:
home | airlie | blog | computer | epoc | gegenschein | web >> palmtop

in this incomplete experimental page
http://www.ericlindsay.com/palmtop/palmnote.htm

--
http://www.ericlindsay.com
Mar 10 '06 #9
On Fri, 10 Mar 2006 13:57:06 +1000, Eric Lindsay
<NO**********@ericlindsay.com> wrote:
In article <om********************************@4ax.com>,
Stephen Poley <sb******************@xs4all.nl> wrote:
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly. But if IE ever
implements them I'm quite sure that in 99% of cases they will be used
inappropriately.
Personally I like the idea of the :before and :after pseudo-elements,
although I am not sure exactly how to best make use of them as yet.

However I am not precisely seeing how their use modifies HTML content
any more than any other use of CSS.


I would have thought it rather clear that inserting a block of text is a
different category of operation to, say, colouring existing text blue.
Unless you are implying that CSS
should not create content (say text, as below) on a page? In which
case, would not the use of background images in CSS fall into the same
category?
If the background images contained textual content, that would be an
abuse of CMS. Anything can be abused. However the "natural" use of
background images is sensible. It seems to me that :before and :after
positively encourage abuse.
Using pseudo-elements in the CSS for my header:

#header li:before { content: "| "; } /* Pipe symbol except on first */
#header li:first-child:before { content: ""; }

/* The current folder is floated right and marked >> in the header */
#folder { display: inline; float: right; }
#header #folder:before { content: ">> "; }


<snip rest of example>

I haven't looked at this in detail (I'm about to leave for the rest of
the day). If however this was the CSS for one class of device (black and
white?) whereas another class of device used something different
(colouring?) then I'll concede that you may have a situation where they
are justified. However using CSS merely to make your HTML source look
prettier would seem to me to be abuse.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Mar 10 '06 #10
Stephen Poley wrote:
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly. But if IE ever
implements them I'm quite sure that in 99% of cases they will be used
inappropriately.


I find them very useful to match conventions between two media. Online,
I use microcontent (like title attributes) because it is convenient
shorthand - it doesn't have to be in the readers' faces unless they want
to see it. When printed, I expand DFN by printing the title afterward,
I expand the links on my references page to show the URL, etc, because
that's how you represent those things in that medium. Bullets and
counters are naturals for generated content using :before and :after,
since they are more about reading conventions than content.

Speaking of which, is there a good way to implement footnotes/endnotes yet?
Tim
Mar 11 '06 #11
On Wed, 08 Mar 2006 08:16:43 +0100, Stephen Poley
<sb******************@xs4all.nl> wrote:

[...]
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly...
Sure; and there was quite a lot of discussion "plus/minus" going on when
the original idea came up.

Consensus came to be that CSS should make it possible to include extra
items in presentation that was not part of the original sematically
marked up data, e.g. specific list marks in print etc...
But if IE ever implements them I'm quite sure that in 99% of cases
they will be used inappropriately.


Sure; that's the way the world works, ignorance rules.

--
Rex
Mar 11 '06 #12
On 2006-03-11, Timothy Larson <th*********@cox.net> wrote:
Stephen Poley wrote:
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly. But if IE ever
implements them I'm quite sure that in 99% of cases they will be used
inappropriately.


I find them very useful to match conventions between two media. Online,
I use microcontent (like title attributes) because it is convenient
shorthand - it doesn't have to be in the readers' faces unless they want
to see it. When printed, I expand DFN by printing the title afterward,
I expand the links on my references page to show the URL, etc, because
that's how you represent those things in that medium. Bullets and
counters are naturals for generated content using :before and :after,
since they are more about reading conventions than content.

Speaking of which, is there a good way to implement footnotes/endnotes yet?


you could do something like this.

<A CLASS="footnote" HREF="#footnote_6" TITLE="from the Big Book of Facts">
footnote this</a>

Bye.
Jasen
Mar 11 '06 #13
Jasen Betts wrote:
On 2006-03-11, Timothy Larson <th*********@cox.net> wrote:
Speaking of which, is there a good way to implement footnotes/endnotes yet?


you could do something like this.

<A CLASS="footnote" HREF="#footnote_6" TITLE="from the Big Book of Facts">
footnote this</a>


I was thinking of something using CSS generated content, to keep track
of the number for you automatically as footnotes/endnotes are
added/removed in your document.

Tim
Mar 11 '06 #14
Jan Roland Eriksson <jr****@newsguy.com> writes:
On Wed, 08 Mar 2006 08:16:43 +0100, Stephen Poley
<sb******************@xs4all.nl> wrote:
I have to say I find these :before and :after pseudo-elements (not tags)
very dubious. CSS has no business modifying HTML content. There *may* be
a handful of cases where they can be used sensibly...


Sure; and there was quite a lot of discussion "plus/minus" going on when
the original idea came up.

Consensus came to be that CSS should make it possible to include extra
items in presentation that was not part of the original sematically
marked up data, e.g. specific list marks in print etc...


It's considerably more useful with (some) XML to visually express the
semantics of the arbitary elements in that. I'm not sure I'd use it on
the WWW for that, though - it seems more useful to just transform to
extra HTML elements around the data here.

--
Chris
Mar 11 '06 #15
On 2006-03-11, Timothy Larson <th*********@cox.net> wrote:
Jasen Betts wrote:
On 2006-03-11, Timothy Larson <th*********@cox.net> wrote:
Speaking of which, is there a good way to implement footnotes/endnotes yet?


you could do something like this.

<A CLASS="footnote" HREF="#footnote_6" TITLE="from the Big Book of Facts">
footnote this</a>


I was thinking of something using CSS generated content, to keep track
of the number for you automatically as footnotes/endnotes are
added/removed in your document.


footnotes are content they'd need better support in html before CSS can
customise the numbering

the list of footnodets could be in an <OL> that'd get you automatic
numbering but not at the places refering to the notes. :(

a scripted solution may be possible.

--

Bye.
Jasen
Mar 12 '06 #16

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Mr.Clean | last post by:
I need to write a function to return an image that has been base64 encoded into a string. This is how it is done in PHP and I need to know how I can do the same in javascript: function...
1
by: opt_inf_env | last post by:
Hello, Do anybody know whether the following is possible in html. I want to create a page consisting of two frames in the first one I want to display an "external" page (for example...
5
by: Gary | last post by:
I am using List<MyClassto store a bunch of MyClasses. And in my program, I want to change the content of one class in this list. However, it seems to me that this list keeps an original copy and is...
7
by: Bon | last post by:
Dear all I create a master page with image buttons on the left-hand side for navigation. When a user clicks the student button, the content (i.e. ContentPlaceholder) in masterpage will be...
0
by: kieran | last post by:
hi, i am pulling content from a dynamic source to my webpage in VS2005. i can not edit the content before it is pulled onto my webpage. before the content is displayed to the user, i want to...
3
by: synergy_711 | last post by:
I feel like this should be fairly easy but I have been struggling with this for sometime. I have not been able to find someone who's had the same problem as mine yet. ...
5
by: Murray | last post by:
Forgive me if this question is too basic, but I'm new to ASP.NET programming, and I can't locate a simple answer to this question. I have a web page that consists of a Master Page and a single...
0
by: priyammaheshwari | last post by:
Hi There I am developing a site which would be used worldwide,so some of the people in China and Japan want that they should be able to see the site in their respective language.So to change the...
0
by: Czechtim | last post by:
Hello, I have problem with databinding. I created small application using structure that I need to demonstrate problem. I need to change content of label when changing content of property...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.