Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   How to do a coloured line (http://www.velocityreviews.com/forums/t159589-how-to-do-a-coloured-line.html)

Thibault 10-07-2004 11:28 AM

How to do a coloured line
 

Hello,

I need to draw an horizontal, red-colored line. I thought <HR> was the right
thing to use, but it doesn't seem to work in Opera, does it ? Is there any
alternative way to do my line ? Perhaps by using a unique, red pixel with a
huge WIDTH attribute ?
Thanks for your help !

Thibault



brucie 10-07-2004 11:30 AM

Re: How to do a coloured line
 
In alt.html Thibault said:

> I need to draw an horizontal, red-colored line. I thought <HR> was the right
> thing to use, but it doesn't seem to work in Opera, does it ?


of course it does.

hr{color:red;background:red;height:1px;border:0;}


--
i t ' s t h e l i t t l e v o i c e s

Jan Faerber 10-07-2004 12:08 PM

Re: How to do a coloured line
 
brucie wrote:

> In alt.html Thibault said:
>
>> I need to draw an horizontal, red-colored line. I thought <HR> was the
>> right thing to use, but it doesn't seem to work in Opera, does it ?

>
> of course it does.
>
> hr{color:red;background:red;height:1px;border:0;}
>
>


hm - why is it, that opera only accepts this combination?
And what if you want to use <hr /> with XHTML 1.0?
Can you use css then aswell?

--
Jan

http://213.47.90.11

brucie 10-07-2004 12:12 PM

Re: How to do a coloured line
 
In alt.html Jan Faerber said:

>> hr{color:red;background:red;height:1px;border:0;}


> hm - why is it, that opera only accepts this combination


browsers vary on how they apply styles to a <hr>. e.g. opera doesn't
need 'color:red' but other browsers do or some don't need
'background:red'. the solution i provided for the OP gives the most
consistent styling across browsers.

> And what if you want to use <hr /> with XHTML 1.0?


no change

> Can you use css then aswell?


of course you can.


--
i t ' s t h e l i t t l e v o i c e s

Dylan Parry 10-07-2004 12:12 PM

Re: How to do a coloured line
 
As an authority on the subject, Jan Faerber proclaimed:

>> hr{color:red;background:red;height:1px;border:0;}
>>

> hm - why is it, that opera only accepts this combination?


Some browsers use the color value, whereas others use the background
value. Just to make sure if works for all it is best to use both values.

> And what if you want to use <hr /> with XHTML 1.0?
> Can you use css then aswell?


The CSS for <hr> and <hr /> is exactly the same. It makes no difference to
the CSS whether you are using XHTML or HTML.

--
Dylan Parry
http://webpageworkshop.co.uk - FREE Web tutorials and references



Jukka K. Korpela 10-07-2004 04:42 PM

Re: How to do a coloured line
 
brucie <****@usenetshit.info> wrote:

> browsers vary on how they apply styles to a <hr>. e.g. opera doesn't
> need 'color:red' but other browsers do or some don't need
> 'background:red'. the solution i provided for the OP gives the most
> consistent styling across browsers.


We might even say that there is nothing that says that either color or
background-color has any effect on rendering. That is, what is content
(in the CSS sense) and what is background for a horizontal line?

So while the technique currently works on most (or all?) graphic
browsers, you can't really complain if a browser vendor chooses to
implement <hr>, by default, as border around some empty content.

This in turn suggests that it's better to use a bottom border for a
preceding element, or a top border for the next element. In that case you
would not use any HTML element like <hr> but instead make sure that the
preceding or next element is a block element, e.g.

<div style="border-bottom: solid red 1px">
stuff preceding the line
</div>
stuff after the line

This gives the extra option of using other border formatting, e.g.
creating a dashed or outset border.

On the other hand, if the line is meant to work as a separator between
topics, or something, I would use

<div style="border-bottom: solid red 1px">
stuff preceding the line
<hr style="display:none">
</div>
stuff after the line

to create a fallback for non-CSS browsing.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html



Sid Ismail 10-07-2004 11:46 PM

Re: How to do a coloured line
 
On Thu, 7 Oct 2004 13:28:09 +0200, "Thibault" <noone@nospam.com> wrote:

: I need to draw an horizontal, red-colored line. I thought <HR> was the right
: thing to use, but it doesn't seem to work in Opera, does it ?


<hr style="color:red;">

You can also use width, height, etc. See CSS specs:
http://www.devguru.com/Technologies/...css_index.html

Sid



Jan Faerber 10-10-2004 03:05 PM

Re: How to do a coloured line
 
Jukka K. Korpela wrote:

> <div style="border-bottom: solid red 1px">
> stuff preceding the line
> </div>
> stuff after the line


Can you do something css equivalent for IE with <hr>
like with text .classname { writing-mode:tb-rl; } ... "<vr>" (:
beside style="border-right: solid red 1px"?

> <div style="border-bottom: solid red 1px">
> stuff preceding the line
> <hr style="display:none">
> </div>
> stuff after the line
>
> to create a fallback for non-CSS browsing.



You mean a non-CSS supporting browser would show a horizontal line with
<hr style="display:none;">?



--
Jan

http://213.47.90.11

Mark Parnell 10-11-2004 02:09 AM

Re: How to do a coloured line
 
On Sun, 10 Oct 2004 15:05:00 GMT, Jan Faerber <faerber73@yahoo.com>
declared in alt.html:

> You mean a non-CSS supporting browser would show a horizontal line with
> <hr style="display:none;">?


Yes - the 'style="display:none;"' bit is CSS, therefore if CSS isn't
supported, the <hr> is still displayed.

--
Mark Parnell
http://www.clarkecomputers.com.au
"Never drink rum&coke whilst reading usenet" - rf 2004

Jan Faerber 10-11-2004 10:08 AM

Re: How to do a coloured line
 
Mark Parnell wrote:


> Yes - the 'style="display:none;"' bit is CSS, therefore if CSS isn't
> supported, the <hr> is still displayed.



Oh - yes - very good!



--
Jan

http://213.47.90.11


All times are GMT. The time now is 04:45 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.