Solved

Overriding CSS styles for specific links on a particular page

Posted on 2009-04-09
8
708 Views
Last Modified: 2012-05-06
I am building a web site using Dreamweaver CS3. I am using a grid of small photos as a navigational tool on a few pages. For aesthetic reasons, I don't want any link highlighting on these linked photos -- no link, visited, active or hover highlighting. I have a fade-in and fade-out behavior assigned to each linked photo and that's the only thing I want to change visually when the mouse passes over the images.

The link highlighting is controlled globally by a CSS style sheet. Is there a way to override the CSS link styles and apply no link styles to specific links on a specific page, while leaving the other links on that page unchanged (i.e., controlled by the CSS style sheet)?
0
Comment
Question by:don0don
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24109285
You can manage that link with it's own css class. For example

/*  THE CSS */
<a href="page.html" class="custom"><img src="" alt="" /></a>


<!-- THE HTML -->
a.cusotm
{
     text-decoration: none;
     border: none;
}
0
 
LVL 11

Accepted Solution

by:
level9wizard earned 125 total points
ID: 24109320
Hah, had that backwards and typo'd - sorry about that. Here's a full working example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<title>test </title>
 

	<style type="text/css">

	a.custom

	{

		 text-decoration: none;

		 border: none;

		 /* any other customizations to that link here you want to override the global/default*/

	}

	</style>

</head>

<body>

	<a href="page.html" class="custom">Sample</a>

</body>

</html>

Open in new window

0
 

Author Comment

by:don0don
ID: 24110569
I hope you'll forgive a newbie question, bit regarding the /* THE CSS */ part of your instructions: would I need to add a separate class for each image on each page that I want to exclude from the global CSS formatting? In other words, here would be a separate <a href> statement for each image, pointing to the page name and the <img src> of each image?
0
 
LVL 42

Expert Comment

by:David S.
ID: 24111544
You would only need to use different classes if you wanted some of the styles to be different. Multiple elements may belong to the same class and an element may belong to multiple classes. The [X]HTML class attribute's value may be a space separated list of classes.

IDs, on the other hand, should be unique. In other words, two elements in the same document may not have the same ID.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:don0don
ID: 24111743
OK.

I've added this to the top of the page, at the bottom of the HEAD section:

     <!-- CSS CUSTOM CLASS -->
             <style type="text/css">
             a.custom
             {
                      text-decoration: none;
                      border: none;
             }
             </style>

     </head>

... and I've added class="custom" to each of the <a href> statements, immediately after the page link (see the code snippet).

Doesn't work ... the linked images still have borders around them.

Obviously, I'm doing something wrong.

Sorry to be such a bonehead about this ...



        <td width="188"><a href="Billboards_Banners.htm" class="custom" target="_blank"><img src="picts/Cat_Bill_Bann.jpg" title="Billboards & Banners" width="188" height="125" onMouseOut="MM_effectAppearFade(this, 1000, 50, 100, false)" onMouseOver="MM_effectAppearFade(this, 1000, 100, 50, false)"></a></td>

Open in new window

0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 125 total points
ID: 24113423
No, you did what was suggested. Actually the border is applied to the <img>, not the <a>. You can use the comma to make the rule apply to <a> elements that belong to the "custom" class and <img> elements that are descendants of such an element.
             <style type="text/css">

             a.custom, a.custom img

             {

                      text-decoration: none;

                      border: none;

             }

             </style>

Open in new window

0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24114561
a.custom img, img
             {
                      text-decoration: none;
                      border: 0;
             }
0
 

Author Closing Comment

by:don0don
ID: 31568607
I split the points because level9wizard was on the right track and Kravimir's tweak took it all the way to success. Thanks for your help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Paper tearing animation 6 58
jQuery or CSS 9 50
HTML and CSS for a complex page 20 57
Login area of a page 4 32
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

932 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now