| Home | Forums | Reviews | Guides | Newsgroups | Register | Search |
 |
| Thread Tools |
|
Guest
Posts: n/a
|
|
|
|
||
|
|
| |
|
Guest
Posts: n/a
|
|
|
|
|
||
|
|
| |
|
Guest
Posts: n/a
|
Paul Furman wrote:
> OK this works. I don't know if it validates. > > <!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;} > > a:link hr {height:1px; color: #339966; background-color: #339966;} > a:visited hr {height:1px; color: #339966; background-color: #339966;} > a:hover hr {height:1px; color: #123456; background-color: #123456;} > > > </style> > </head> > <body> > <a href="#"> > > <span class="left"> > left text > </span> > > <hr> > > <span class="center"> > centered text > </span> > > </a> > </body> > </html> It doesn't, because you still have the <hr> inside the <a> element. But I found a way: Just pick any small gif for the image. Uploaded again: http://home.tiscali.nl/~elizabeth/Paul.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.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; text-decoration:none;} a:visited {color: #339966;text-decoration:none;} a:hover {color: #123456;text-decoration:none;} a:link img {border-bottom:5px solid #339966;} a:visited img {border-bottom:5px solid #339966;} a:hover img {border-bottom:5px solid #123456;} div {text-align:center;} ..left {position:absolute; left:10px;} img {height:0px;width:100%;} </style> </head> <body> <div> <a href="#"> <span class="left"> Left aligned text</span> <br> <img src="hr.gif" alt=""> Centered text </a> </div> </body> </html>  -- Els Mente humana é como pára-quedas; funciona melhor aberta. |
|
|
|
|
|||
|
Guest
Posts: n/a
|
Quoth the raven named Els:
> 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 > You're not allowed to  > Sorry, didn't check beforehand. But it works in Moz, NS, Opera, IE, ... Try it with a strict doctype? > Any other inline element with borders that might replace the div? > > How about this one then? .... > <p> > <a href="#"> > <hr> > </a> > </p> > 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? Isn't an <hr> a block-level element as well? Block elements aren't allowed inside anchors, or other inline elements. -- -bts -This space intentionally left blank. |
|
|
|
|
|||
|
Guest
Posts: n/a
|
Beauregard T. Shagnasty wrote:
> Quoth the raven named Els: > >> 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 >> You're not allowed to >> Sorry, didn't check beforehand. But it works in Moz, NS, Opera, IE, ... > > Try it with a strict doctype? That's what I started with >> <p> >> <a href="#"> >> <hr> >> </a> >> </p> > >> 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? > > Isn't an <hr> a block-level element as well? Apparently  > Block elements aren't > allowed inside anchors, or other inline elements. I noticed -- Els Mente humana é como pára-quedas; funciona melhor aberta. |
|
|
|
|
|||
|
Guest
Posts: n/a
|
|
|
|
|
||
|
Guest
Posts: n/a
|
Paul Furman wrote: > Thanks all! > > This is what I'm using on the actual page and it works well: > > a hr {height:1px; width: 100%; border: 0;} > a:link hr {color: #444444; background-color: #444444;} > a:visited hr {color: #444444; background-color: #444444;} > a:hover hr {color: #339966; background-color: #339966;} > a:active hr {color: #444444; background-color: #444444;} But it doesn't validate -- Els Mente humana é como pára-quedas; funciona melhor aberta. |
|
|
|
|
|||
|
Guest
Posts: n/a
|
Els wrote:
> Beauregard T. Shagnasty wrote: > >> >> Isn't an <hr> a block-level element as well? > > > Apparently Well, that's just dumb. It's a line not a container. I vote that they change it <g>. |
|
|
|
|
|||
|
Guest
Posts: n/a
|
Paul Furman wrote: > Els wrote: > >> Beauregard T. Shagnasty wrote: >> >>> Isn't an <hr> a block-level element as well? >> >> Apparently > > Well, that's just dumb. It's a line not a container. I vote that they > change it <g>. You have my vote too  -- Els Mente humana é como pára-quedas; funciona melhor aberta. |
|
|
|
|
|||
|
Guest
Posts: n/a
|
Els wrote:
> > But it doesn't validate Bah! Why shouldn't I be able to wrap an a-href around a whole section of a page if I want to? They are just being silly, there's no reason for it. |
|
|
|
|
|||
|
|
| |
|
| Thread Tools | |
|
|
