Topic: A:hover special task (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=10771" title="Pages that link to Topic: A:hover special task (Page 1 of 1)" rel="nofollow" >Topic: A:hover special task <span class="small">(Page 1 of 1)</span>\

 
patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 07-16-2002 12:22 Edit Quote

I just came up with this idea and I'd like an opinion if it is feasable or doable at all.
We all know about how to change link hovers, visited etc. to different colors, remove the underline etc.
What i am trying to do now is to show the fact that there is a link behind a text by a text arrow (> ) in a different color than the text.

so what i am trying to do is

>> link <<

where the link text is grey and the little arrows are orange. Now i am looking for a way to do this with css entirely because i don't want non-css browsers to see the arrows but just a (ugly blue and underlined) link.

<´¯`·.¸ Patric ¸.·´¯`>

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 07-16-2002 13:55 Edit Quote

patric design: I don't understand what you are trying to do:

quote:
show the fact that there is a link behind a text by a text arrow (> ) in a different color than the text.



If you could elaborate I'm sure we could help Its the behind bit I don't get.

[edit: I wonder if you are looking for the :before and :after pseudo-elements which could be used to 'automatically' add those arrows to a specified link class - anyway have a look through this and a play and see if that is what you are after:
http://www.w3.org/TR/REC-CSS2/selector.html#before-and-after
it should degrade well in older browsers]

___________________
Emps

FAQs: Emperor

patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 07-16-2002 14:29 Edit Quote

ok, for clarification, I made a little graphic:



so the >> parts are automaticly added to any a:link and a:hover in a certain div.

I've tried the links you gave me and found that the note part doesn't display in IE6 but works well in Mozilla. This is bad because i was hoping that there'd be a way to get this working across the main browsers.

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 07-16-2002).]

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

IP logged posted posted 07-16-2002 15:39 Edit Quote

In addition to Mozilla, Opera also supports :before and :after CSS elements. But, as you have noticed they are still not supported by IE. In order to make something like that in IE, you'll probably have to use an image (with arrows) and define it as a background for links (this is just from top of my head as example)...


patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 07-18-2002 00:29 Edit Quote

Thanx mr. max!

I didn't know it was possible to use a background image on a link. I got it to work on a test page but i have trouble implementing it into the site as it has a combination of divs & spans.

I have

code:
background-image: url(../images/linkbg.gif);
background-repeat: no-repeat;
padding-left: 22px;
color: #999;



defined as the a tag. but then in my source i have this:

code:
<div id="content2" class="row">
<span class="left" style="text-align: right">
<div id="links">
<a href="test.htm">test</a>
</div>
</span>
<span class="right" style="text-align: left">test
</span>
</div>



I only want the link background picture on all links inside the "content2" div.

How can that be done?

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 07-18-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 07-18-2002 00:46 Edit Quote

patric design: I must admit I'd probably wait for IE to catch up with the rest of the world and I'm not sure hwo that background image will work (got a link?) but to answer your question try:

content2 a:hover {

}

___________________
Emps

FAQs: Emperor

patric design
Bipolar (III) Inmate

From: 290 km/h, fast lane, Autobahn, Germany
Insane since: Feb 2001

IP logged posted posted 07-18-2002 11:15 Edit Quote

Emperor:

I got it to work finally. It looks good (in my opinion) and except for Opera (which displays the page incorrectly anyways) it works in every browser I've tried. Check it out:
http://www.patricdesign.com/exit.html

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 07-18-2002).]

Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

IP logged posted posted 07-31-2002 14:01 Edit Quote

When I see it here, the arrows are behind the text as you'd suspect, I recon the padding or something isnt working, IE 5.0

Please figure out how to perfet this, I'd like to use similar too

I'd say knock out the padding and then in your actual code stick those &nbsp; things before and after within the <a>&</a> more work, but more compatable



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu