Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

a:link .. style only for textual link

Posted on 2011-10-15
8
Medium Priority
?
325 Views
Last Modified: 2012-05-12
Hi All,

Please take a look at the CSS snipit below. It defines have a link should look.

It looks and works great, however, It also attaches the little "Link_Icon" image to images which form links within the "AA_ArContent_Div".

Is there a way to only apply these rules to textual links, not images which form links.

Best regards

Abiel M de Groot Sanders
#AA_ArContent_Div a:link  {
	text-decoration: none;
	color: #F39D81;
	background-image: url(../../VD_Generic_Images/Link_Icon.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}
 #AA_ArContent_Div a:visited  {
	text-decoration: none;
	color: #F39D81;
	background-image: url(../../VD_Generic_Images/Link_Icon.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}
 #AA_ArContent_Div a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-image: url(../../VD_Generic_Images/Link_Icon_Active.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}
 #AA_ArContent_Div a:active  {
	text-decoration: none;
	color: #F39D81;
	background-image: url(../../VD_Generic_Images/Link_Icon.gif);
	background-repeat: no-repeat;
	background-position: left 3px;
	padding-left: 10px;
}

Open in new window

0
Comment
Question by:Abiel de Groot
  • 3
  • 3
  • 2
8 Comments
 
LVL 12

Accepted Solution

by:
Ramkisan Jagtap earned 1000 total points
ID: 36974264
write a another css class which does not contain background image. Apply it to the links containing images.
0
 
LVL 5

Author Comment

by:Abiel de Groot
ID: 36974296
@ramkisan

Ok, sounds good... How?

Give me an example

A
0
 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 36974321
css class as below
.linkImage{
text-decoration:none;
background-color:yourcolor;
padding-left:10px;
}
Link as below
<a href="#" class="linkImages" ><img/></a>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:Ramkisan Jagtap
ID: 36974323
sorry
class="linkImage"
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36974690
Or, if you don't want to change your markup, add this to your css file:

#AA_ArContent_Div a img {background:none !important;}
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36974693
never mind, that won't work.... duh.
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 1000 total points
ID: 36974708
what ramkisan is saying is good, but you have to remove the background-image previously set on the link.

add:

background:none !important;

to the rule.

You probably don't want the padding now either:

padding-left:0;

And you might want to remove the border on linked images, so add this too:

border:0;

The full class:

 
.linkImage{
text-decoration:none;
background:none !important;
padding-left:0;
border:0;
}
Link as below
<a href="#" class="linkImage" ><img/></a>

Open in new window


0
 
LVL 5

Author Closing Comment

by:Abiel de Groot
ID: 36978360
Many thanks
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question