Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   <HL> deprecated? (http://www.velocityreviews.com/forums/t157158-hl-deprecated.html)

Paul Furman 02-15-2004 02:46 PM

<HL> deprecated?
 
Horizontal line <HL> is probably another taboo html tag. Is there
another simple alternative with css rendering or something? I couldn't
find any reference in http://www.w3.org/TR/html401 or
http://www.w3.org/TR/CSS2


David Dorward 02-15-2004 02:56 PM

Re: <HL> deprecated?
 
Paul Furman wrote:

> Horizontal line <HL> is probably another taboo html tag.


I think you mean <hr>, horizontal rule.

> Is there another simple alternative with css rendering or something?


border-*

--
David Dorward <http://dorward.me.uk/>

Toby A Inkster 02-15-2004 03:30 PM

Re: <HL> deprecated?
 
Paul Furman wrote:

> Subject: <HL> deprecated?


No, it's not been deprecated in any version of HTML yet. It looks like
it's still going to be there in XHTML 2 too.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me - http://www.goddamn.co.uk/tobyink/?page=132


Paul Furman 02-15-2004 04:17 PM

Re: <HR> deprecated?
 
David Dorward wrote:

> Paul Furman wrote:
> probably another taboo html tag.
>
>
> I think you mean <hr>, horizontal rule.



Doh!
So the HTML spec says it's OK to use but to use CSS to set it's display
properties. I can't find where the css spec would explain that. Border
properties add a border around the

I want this (doesn't work):
<hr width=100% style="size: 1px; color: #339966;">
but this is the closest that works:
<hr width=100% size="1" style="color: #339966;">
but that doesn't give me a 1 pixel thickness in Mozilla, I get the 3D
effect.


>
>>Is there another simple alternative with css rendering or something?

>
>
> border-*



So maybe border-bottom applied to a div is a better way to do it? What I
really want is the line to follow <a> link properties for hover. But
since I can't do that, I'm making it the hover green color which looks
OK moused or not:
http://hills.ccsf.edu/~pfurma02
Maybe a border could be given <a> properties?


Els 02-15-2004 04:44 PM

Re: <HR> deprecated?
 

Paul Furman wrote:

> I want this (doesn't work):
> <hr width=100% style="size: 1px; color: #339966;">
> but this is the closest that works:
> <hr width=100% size="1" style="color: #339966;">
> but that doesn't give me a 1 pixel thickness in Mozilla, I get the 3D
> effect.
>
>>> Is there another simple alternative with css rendering or something?


Yes: you have to set the border to none, and the
background-color to the same color as the color.

Like this:
hr {
color: #339966;
background: #339966;
height:1px;
width: 100%;
border:none;
margin-top:0px;
margin-bottom:0px;
}

> So maybe border-bottom applied to a div is a better way to do it?


Some people say it is.

> What I
> really want is the line to follow <a> link properties for hover. But
> since I can't do that, I'm making it the hover green color which looks
> OK moused or not:
> http://hills.ccsf.edu/~pfurma02
> Maybe a border could be given <a> properties?


No, but the div can be given <a> properties :-)
Like this code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>hovering over div border</title>
<style>

* {border:0px;}
/* these link styles are necessary to make the link styles
apply to the div later on */
a:link {color: #339966;}
a:visited {color: #339966;}
a:hover {color: #123456;}

/* without height for the div, there's nothing to hover */
div {height:1px;}

a:link div {border-bottom: 10px solid #339966;}
a:visited div {border-bottom: 10px solid #339966;}
a:hover div {border-bottom: 10px solid #123456;}

</style>
</head>
<body>
<a href="#">
<div>
</div>
</a>
</body>
</html>


--
Els

Mente humana é como pára-quedas; funciona melhor aberta.


Spartanicus 02-15-2004 04:46 PM

Re: <HR> deprecated?
 
Paul Furman <paul@edgehill.net> wrote:

>I want this (doesn't work):
><hr width=100% style="size: 1px; color: #339966;">


div.hr{border-bottom:1px solid #339966}
div hr{display:none}

<div class="hr"><hr></div>

Usage of the <hr> is optional.

--
Spartanicus

Els 02-15-2004 04:48 PM

Re: <HR> deprecated?
 

Els wrote:

Uploaded an example:

http://home.tiscali.nl/~elizabeth/Paul.html

And I said it wrong: the div can't be given <a> properties,
but you can put the <div> inside an <a> element.
Effect as desired, though.

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.


Beauregard T. Shagnasty 02-15-2004 05:18 PM

Re: <HR> deprecated?
 
Quoth the raven named Els:

> but you can put the <div> inside an <a> element.


Hmmm? I don't think so... <g>

http://www.htmlhelp.com/cgi-bin/vali...l&warnings=yes

"Error: element A not allowed here; possible cause is an inline
element containing a block-level element"

--
-bts
-This space intentionally off to the Daytona 500.

Els 02-15-2004 05:44 PM

Re: <HR> deprecated?
 


Beauregard T. Shagnasty wrote:

> Quoth the raven named Els:
>
> > but you can put the <div> inside an <a> element.

>
> Hmmm? I don't think so... <g>


Yes, you can :-D
You're not allowed to :-(
Sorry, didn't check beforehand. But it works in Moz, NS,
Opera, IE, ...

Any other inline element with borders that might replace the
div?

How about this one then?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>hovering over 'hr'</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<style type="text/css">

* {border:0px;}

a:link {color: #339966;}
a:visited {color: #339966;}
a:hover {color: #123456;}

a:link hr {height:10px; color: #339966; background-color:
#339966;}
a:visited hr {height:10px; color: #339966; background-color:
#339966;}
a:hover hr {height:10px; color: #123456; background-color:
#123456;}

</style>
</head>
<body>
<p>
<a href="#">
<hr>
</a>
</p>
</body>
</html>

Uploaded again:
http://home.tiscali.nl/~elizabeth/Paul.html

It's still not valid, the validator now keeps complaining
that it needs a start-tag of one of these:"APPLET",
"OBJECT", "MAP", "IFRAME", "BUTTON".

Can anyone tell me why?


--
Els

Mente humana é como pára-quedas; funciona melhor aberta.


Paul Furman 02-15-2004 06:06 PM

Re: <HR> deprecated?
 
Els wrote:
>
>> the div can be given <a> properties :-)
>> http://home.tiscali.nl/~elizabeth/Paul.html



Beauregard T. Shagnasty wrote:
>
> "Error: element A not allowed here; possible cause is an inline element
> containing a block-level element"


So you can't nest a div in an a-href. Hmph.

>> /* without height for the div, there's nothing to hover */
>> div {height:1px;}



I tried using (an inline) span instead of div but it wouldn't appear
without text and even then is only as wide as the text.


Supposed to look like this all in one link that hover-blinks in unison:


left text
------------------------------------
centered text



<a href="#">

<span class="left">
left text
</span>

<br>

<span class="line">
(actually no text, just looks like a line)
</span>

<br>

<span class="center">
centered text
</span>

</a>






All times are GMT. The time now is 03:55 AM.

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