Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How to do a coloured line

Reply
Thread Tools

How to do a coloured line

 
 
Thibault
Guest
Posts: n/a
 
      10-07-2004

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


 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      10-07-2004
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
 
Reply With Quote
 
 
 
 
Jan Faerber
Guest
Posts: n/a
 
      10-07-2004
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
 
Reply With Quote
 
brucie
Guest
Posts: n/a
 
      10-07-2004
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
 
Reply With Quote
 
Dylan Parry
Guest
Posts: n/a
 
      10-07-2004
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


 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      10-07-2004
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


 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      10-07-2004
On Thu, 7 Oct 2004 13:28:09 +0200, "Thibault" <(E-Mail Removed)> 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


 
Reply With Quote
 
Jan Faerber
Guest
Posts: n/a
 
      10-10-2004
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
 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      10-11-2004
On Sun, 10 Oct 2004 15:05:00 GMT, Jan Faerber <(E-Mail Removed)>
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
 
Reply With Quote
 
Jan Faerber
Guest
Posts: n/a
 
      10-11-2004
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
[OT]Visual Studio 2005 - coloured bars near line numbers? Rob Meade ASP .Net 2 08-14-2007 09:07 AM
How do I print out in the standard output coloured lines cniharral@gmail.com Python 9 02-02-2007 02:35 PM
Blue coloured text beneath folders. g saul Computer Support 10 10-02-2005 02:26 PM
Differently Coloured Text in one textual area arun.hallan@gmail.com Java 2 02-11-2005 10:33 AM
Coloured Buttons Venkat HTML 3 07-01-2003 08:24 AM



Advertisments