This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > December 2003 > HR as a graphic image
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
HR as a graphic image
|
|
| Charax 2003-12-28, 8:28 am |
| Is it possible to use CSS to define <hr> as a graphic image?
FrontPage 2003 has apparently dropped the graphic hr from their themes and I
am becoming more involved in using CSS, but would like to retain the
automatic inclusion of a graphic in place of hr.
I have a 300 px graphic I'd like to continue using, without a manual search
and replace of <hr> on 300 web pages....
Thanks,
Chris Hopkins
www.parthia.com
| |
| Jukka K. Korpela 2003-12-28, 11:29 am |
| "Charax" <chopkins@ameritech.net> wrote:
quote:
> Is it possible to use CSS to define <hr> as a graphic image?
Strictly speaking not, since you cannot add image content using CSS,
but you can specify a background image.
quote:
> I have a 300 px graphic I'd like to continue using, without a
> manual search and replace of <hr> on 300 web pages....
I wonder what you have been using (in terms of HTML and CSS, i.e. what
FrontPage has inserted for you), but the following would seem
reasonable:
hr { display: block;
width: 300px;
height: 10px;
background: url(deco.gif); }
Replace 10px by the height of your image.
This however leaves a border around the image on IE. I don't know why -
and setting border: none doesn't remove it.
This reminded me of Alan Flavell's "CSS1 and the Decorative HR",
http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html
which explains how complicated the issue is.
Personally I think using something like
<div><img alt="End of section." src="deco.gif"></div>
is a feasible alternative to using <hr> and then trying to style it
into an image. After all, <hr> itself is at least half-presentational,
and we generally use <img> to add purely decorative images. (Writing
adequate alt attributes is more important than being theoretically
puristic about not using "presentational tags".)
--
Yucca, http://www.cs.tut.fi/~jkorpela/
| |
|
|
| Alan J. Flavell 2003-12-29, 2:29 pm |
| On Sun, 28 Dec 2003, Jukka K. Korpela wrote:
quote:
> This reminded me of Alan Flavell's "CSS1 and the Decorative HR",
> http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html
> which explains how complicated the issue is.
Thanks for the plug ;-)
To be honest, it explains how complicated the issue _was_ at the time
that I wrote it: as the preface says, it was devised in the hope of
getting something that worked also in IE4, NN4.* etc.
Nowadays I would probably prefer to shield the older browsers from
most of the CSS, and use a more straightforward, spec-conforming
stylesheet to get the effect in more recent versions. After all,
it's only meant as a cosmetic device, and when the chips are down
the details of the presentation are meant to be optional.
quote:
> Personally I think using something like
> <div><img alt="End of section." src="deco.gif"></div>
> is a feasible alternative to using <hr> and then trying to style it
> into an image. After all, <hr> itself is at least half-presentational,
> and we generally use <img> to add purely decorative images. (Writing
> adequate alt attributes is more important than being theoretically
> puristic about not using "presentational tags".)
I'm not going to argue with your basic thesis there - but perhaps with
the detail: it would be helpful if you said directly what "adequate"
alt attribute you would consider acceptable in such a case?
In interpreting an <hr>, I presume that a speaking browser would be
expected to insert a longer than usual pause, or something of that
kind?
| |
| Charax 2003-12-29, 6:29 pm |
| > Nowadays I would probably prefer to shield the older browsers fromquote:
> most of the CSS, and use a more straightforward, spec-conforming
> stylesheet to get the effect in more recent versions. After all,
> it's only meant as a cosmetic device, and when the chips are down
> the details of the presentation are meant to be optional.
Alan,
This is an intriguing approach. Can you point me to a source of info on how
to shield earlier browsers from CSS? I still have a lot of traffic from
Version 4 browsers (and, alas, even earlier versions, but I have stopped
trying to support them).
Your web page on HR substitution was very helpful.
Thank you,
Chris Hopkins
www.parthia.com
| |
| Jukka K. Korpela 2003-12-29, 8:29 pm |
| "Alan J. Flavell" <flavell@ph.gla.ac.uk> wrote:
quote:
>
> I'm not going to argue with your basic thesis there - but perhaps
> with the detail: it would be helpful if you said directly what
> "adequate" alt attribute you would consider acceptable in such a
> case?
Well, things like "End of section." Words that you would use if you
read some text aloud and wanted to indicate major divisions, or changes
of topic, using some explanatory words. At
http://www.cs.tut.fi/~jkorpela/html/alt.html#hr
I even suggest a verbose explanation like
alt="End of page content proper. Contact information follows."
The point is that more information is needed than in visual
presentation, where the user can more or less draw conclusions from the
overall appearance and from small things like that fact that a
horizontal line is near the end of a page.
quote:
> In interpreting an <hr>, I presume that a speaking browser would be
> expected to insert a longer than usual pause, or something of that
> kind?
That's what HTML specifications have suggested, and it is a natural
expectation. In a sense we lose that possibility when we don't use
<hr>, but the explanatory words are like a long pause filled with
metainformation. It's a pity that we cannot effectively suggest a
different tone of voice for it, or a pause, using CSS.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|