Change content with CSS?
Mike
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
Mike
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
Jeff North
comp.infosystems.www.authoring.stylesheets "Mike" <mpe...@gmail.com>
<1141761340.6...@v46g2000cwv.googlegroups.com> wrote:
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/selector.html#before-and-after
http://www.w3.org/TR/REC-CSS2/generate.html
---------------------------------------------------------------
jnor...@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
Stephen Poley
>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
Mike
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
Jasen Betts
There is... I got some spam like that,
But don't use it cause it may go away.
--
Bye.
Jasen
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>
Mike
with this and see if I can get it working...
Thanks!
Mike
Eric Lindsay
Stephen Poley <sbpoleySpi...@xs4all.nl> wrote:
> On 7 Mar 2006 11:55:40 -0800, "Mike" <mpe...@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
Stephen Poley
<NOSPAm...@ericlindsay.com> wrote:
>In article <om0t02t6cmicmdsev...@4ax.com>,
> Stephen Poley <sbpoleySpi...@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.
Timothy Larson
> 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
Jan Roland Eriksson
<sbpoleySpi...@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
Jasen Betts
you could do something like this.
<A CLASS="footnote" HREF="#footnote_6" TITLE="from the Big Book of Facts">
footnote this</a>
Bye.
Jasen
Timothy Larson
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
Chris Morris
> On Wed, 08 Mar 2006 08:16:43 +0100, Stephen Poley
> <sbpoleySpi...@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
Jasen Betts
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