PDA

Click to See Complete Forum and Search --> : Double-bar link style in HTML?

trackermo
05-08-2007, 02:01 PM
Is there a code for the double-bar link style (in which, when one hovers over the link, a line both above and below the link appears), or is that only available in PHP or Java. And, if so, which... and what is the code for it?

Thanks for your help!

Mo
Kevey
05-08-2007, 02:20 PM
You can add this to your css:

a:hover {text-decoration:overline underline;}

You'll also have to make sure that you set text-decoration:none for the 'a' element unless you want links underlined prior to hover.

Here's a simple example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>a cool title</title>
<meta name="description" content="my content" >
<meta name="keywords" content="overline, underline, something else" >
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<style type="text/css">
a {text-decoration:none;}
a:hover {text-decoration:overline underline;}
</style>
</head>
<body>
<h1>This is a <a href="http://cnn.com">test of hover</a></h1>
</body>
</html>
trackermo
05-08-2007, 03:36 PM
Thanks, Kevey...

I'll try that and let you know how it looks.

Mo
WebJoel
05-08-2007, 05:44 PM
Or, not quite semantic but interesting spfx:

CSS:
a.special {text-decoration:none;padding:3px 0 3px 0;}
a.special:hover {border-top:6px double red; border-bottom:6px double red;}
HTML:
<a class="special" href="#">Special Link</a>
Kevey
05-08-2007, 06:27 PM
Or, not quite semantic but interesting spfx:

CSS:

HTML:

sweet! I like that effect. I have to learn to think out of the box. :D
Major Payne
05-09-2007, 02:01 AM
Really thinking outside of box! Problem with IE 7.0 though, as it doesn't remove one of the bottom bars after hovering. FF works just fine. When I switched to HTML 4.01 strict, IE stopped working altogether while FF kept working. LOL

Ron
LeeU
05-09-2007, 08:40 AM
Since we're talking CSS here, I moved it to the proper forum.
WebJoel
05-09-2007, 12:34 PM
...Problem with IE 7.0 though, as it doesn't remove one of the bottom bars after hovering. FF works just fine. When I switched to HTML 4.01 strict, IE stopped working altogether while FF kept working. Hmm... I would expect compliancy from 'top level browsers' and surprisingly, IE7(??) does this while Fx2.0.0.3 doesn't(??)... So, I'd probably try adding "text-decoration:none;", with such explicitely stated declarations, it should work as intended. :o In fact, I removed "text-decoration:none;" from the "a.special {}" in my testing as it made no difference to IE6 (rendering engine of my HTML-editor) nor with Fx 2.0.0.3, and I don't use/trust IE7 yet so couldn't test this x-browser... :eek:
Major Payne
05-09-2007, 04:49 PM
Hi WebJoel:

Tried adding removing lots of stuff from the CSS special to make it work in IE 7, but just could not get IE 7 to remove one of the bottom lines after hover. FF worked using your CSS from the get-go! GO FIREFOX!!! Let me know if you come up with a solution. Will work on it more later since I do have IE7.0.

Ron
WebJoel
05-09-2007, 06:11 PM
Then, fake it. Make the 'at rest state' have border-top:4px double white; border-bottom:4px double white; and the 'hover' state have border-top:4px double RED; border-bottom:4px double RED;... let IE7 flub & choke on that...:rolleyes:

-Basically then, we're swapping border-top & border-bottom colors, from the 'background color' white, to the 'hover color' red...

Let me know if this works... (I loathe IE... it makes me work so much harder than I should)..
Kevey
05-09-2007, 06:15 PM
let IE7 flub & choke on that...

L0L :p
Major Payne
05-10-2007, 04:36 PM
IE didn't flub or choke! :P Worked like a charm. I went back to your original and put in a background color for the body then same color for "at rest state". Now when IE makes it red on hover, the bottom bar returns to background color off hover. Possibilities are endless, but just need to think out of the box more.

Thanks for nudge.

Ron
WebJoel
05-10-2007, 06:43 PM
IE didn't flub or choke! :P Worked like a charm. .... See? :D I don't make mistakes. Ever. (Once I thought I did, ...but I was wrong!) :D
Major Payne
05-10-2007, 08:24 PM
I like a guy who's modest! :D

Ron
Sheldon
05-10-2007, 08:27 PM
Different to what every else is suggesting


a, a:visited, a:active {
color: #991122;
text-decoration: none;
border-bottom: 3px double #991122;
}

a:hover {
color: #000000;
text-decoration: none;
border-bottom: 3px double #000000;
}


<a href="http://www.inboxdesign.co.nz" title="Inbox Design">Inbox Design</a>
WebJoel
05-11-2007, 07:52 AM
Ultimately, that is exactly how I'd give it to a client once bugs were worked out of expected user-agents & versions. But yeah... nice solution! (I have to keep working harder & harder to impress you people... the overall skills of everyone are on the upward curve) :D