The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Being selective with Hyperlink Cues
bek1
post Apr 9 2012, 12:56 PM
Post #1


Unregistered









Hello.

I have code in my CSS file that looks like this:

CODE

a[href$='.pdf'] {
    background:transparent url(../img/icons/page_white_acrobat.png) center left no-repeat;
    display:inline-block;
    padding-left:20px;
    line-height:15px; }


It works great. My problem is that I need to have some links not show the image cue. I'm actually a desktop developer, so it's all pretty new to me. Does anyone know how I can use this with *some* PDF links, but not others?

This post has been edited by bek1: Apr 9 2012, 01:16 PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2012, 03:11 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Then you need a more specific selector. You could use id or class, depending on how the HTML looks and combine those selectors with the one you already have.

If for instance all the links that should have the icon are in a certain section, maybe you can give that section an id.

CODE
#foo a[href$='.pdf'] { ... }


Or if they are sprinkled out you could give them a class.

CODE
a[href$='.pdf'][class$='foo'] { }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bek1
post Apr 9 2012, 03:28 PM
Post #3


Unregistered









Pandy,

Thank you so much for responding.


They are sprinkled around my web pages. I am currently linking the PDF like this:

CODE

<a href="references/letter.pdf" title="Letter of Reference from Rick Smith"><img src="img/letter115x165.jpg" height="165" width="115" alt=""/></a><p>Rick Smith<br>Current Supervisor<br>at L&H</p>


Can you tell me how I would use your class example in HTML? Sorry to be such a noob.

This post has been edited by bek1: Apr 9 2012, 03:29 PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2012, 03:38 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Just add the class to the other attributes.

CODE

<a href="references/letter.pdf" class="foo" title="Letter of Reference from Rick Smith">


Maybe you can come up with a better name for it than foo though. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 9 2012, 03:42 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Please see the FAQ entry Where can I learn about CSS?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bek1
post Apr 9 2012, 04:27 PM
Post #6


Unregistered









Haha. Pandy, you rule. I renamed "foo" to "plainlink" just for you. wink.gif

I put this class in and it worked like a charm, but I'm encountering a new problem. The code I gave you above was actually just a little out of date (sorry, did not realize that 'til just now), and I'm actually using this now:

CODE

<a class="thumbnail" href="#thumb">
    <img src="img/letter115x165.jpg" width="115" height="165" border="0" />
    <span>
        <img src="img/tree.jpg" />Letter of Reference from Rick Smith, current Branch Manager.
    </span>
    <p>Rick Smith<br>Branch Manager<br>at Labor</p>                            <!-- Text under picture -->

    <a href="references/rickjohnson.pdf" class="plainlink" title="Letter of Reference from Rick Smith, current Branch Manager">

    </a>
</a>


When my user clicks on my link (OR my popup), nothing happens. But I thought the anchor a href=" should have taken care of that. Have I coded myself into a corner? I actually need it to open up my pdf when the user clicks on the image on the page. Any idea what I am doing wrong? Did I screw myself up by adding the class?
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bek1
post Apr 9 2012, 04:30 PM
Post #7


Unregistered









QUOTE(Darin McGrew @ Apr 9 2012, 04:42 PM) *

Please see the FAQ entry Where can I learn about CSS?


Thanks, Darin. There is certainly a LOT to learn about CSS. Unfortunately for me as a desktop developer, time is a limiting factor. I have to jump in, learn enough in my free time to get by and get the job done, then get back to what pays the bills. However, Pandy was incredibly helpful above and I very much appreciate it.
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 9 2012, 04:38 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In your second example there is no link text for the PDF link, nothing to click on. Furthermore you've nested links. You can't do that. The "outer" link also contains a P. Can't do that either. A can't contain block level elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bek1
post Apr 10 2012, 08:40 AM
Post #9


Unregistered









QUOTE(pandy @ Apr 9 2012, 05:38 PM) *

In your second example there is no link text for the PDF link, nothing to click on. Furthermore you've nested links. You can't do that. The "outer" link also contains a P. Can't do that either. A can't contain block level elements.


Ahhh... I have a lot to learn. Thank you for the heads up.
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 10 2012, 09:12 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



See the links at the top and bottom of the pages here? The validator tells you what I told you, well, not about the lacking linktext, but about the nesting and that you Peed in your link. tongue.gif
The HTML reference has some handy information about what other elements an element can contain at the top of the page for each element. For example for A you can read: "Contents: inline elements except A". Sort of says it all. In the validator result you'll find clickable links to the related spots in the reference. So using the validator isn't only a way to find your errors, it's also an easy way to learn the basics without having to read the reference or the w3c spec from top to bottom.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bek1
post Apr 10 2012, 11:30 AM
Post #11


Unregistered









Hi, Pandy.

I hate to bother you again--I know you're a busy person like everyone--but I have been struggling with this for the 3 hours since I posted my last response. I cleaned up the problems you mentioned, but am back to my original problem of having the cue show up. Can you help me one more time?

This is the code I currently have:

CODE

<a class="thumbnail" href="references/ricksmith.pdf">
    <img src="img/letter115x165.jpg" width="115" height="165" border="0" />
    <span>
        <img src="img/tree.jpg" />Letter of Reference from Rick Smith, current Branch Manager.
    </span>

    <br>Rick Smith<br>Branch Manager<br>at Labor                            <!-- Text under picture -->

</a>


I have tried adding a second class (plainlink) like this:

CODE
<a class="thumbnail plainlink" href="references/ricksmith.pdf">


But it has no effect. I have also tried adding this code to my thumbnail class:

CODE
a[href$='.pdf'] { ... }



But that also has no effect. I think I am making it more complicated than it is. Do you have any ideas how to remove the cue just for this example?

This post has been edited by bek1: Apr 10 2012, 11:32 AM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bek1
post Apr 11 2012, 11:32 AM
Post #12


Unregistered









Hi, guys.

I feel like I have wore out my welcome with my questions. If that is the case, I apologize. I understand it's a pain when so many people pop in here and ask stuff every day. I do support too. smile.gif

My original problem remains, but I can find other resources. Thank you for taking the time to discuss this problem with me.

Take care,
Brian
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Apr 11 2012, 12:06 PM
Post #13


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



The problem is that so far we only have seen code snippets, not the (url of the) entire page, which we usually prefer. Even a temporary test page, with all relevant HTML code and CSS, would help us help you.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 04:29 AM