Forum Moderators: not2easy
How do I set up the links for 'p3'? Changes to the link attributes give no change. The links currently display in the normal blue text links and work fine. It's just that the link style doesn't change.
Don't know if this has any bearing, but the 'Bookman Old Style' is an .eot embedded font.
This is the HTML page:
<div id="ad">
<div class="p3"><br />
<p><a href="chap_1.html">Test 1</a></p>
<p><a href="chap_2.html">Test 2</a></p>
<p><a href="chap_3.html">Test 3</a></p>
</div>
</div>
This is the Stylesheet:
(*Note: the link attribute is set to 'hidden' for testing purposes.)
#ad {
height: 600px;
}
.p3 {
font-family: "Bookman Old Style";
font-size: 15px;
font-weight: normal;
width: 150px;
position: relative;
text-decoration: underline;
}
a.p3:link {
visibility: hidden;
}
a.p3:visted {
visibility: hidden;
}
a.p3:hover {
visibility: hidden;
}
a.p3:active {
visibility: hidden;
}
.p3 a:link etc.
<edit added>Note: you need to correct the spelling of "visted" to "visited" if that is not just a posting mistake.</edit>
.p3 a:link {
visibility: hidden;
}
.p3 a:visted {
visibility: hidden;
}
.p3 a:hover {
font-size: 18px;
}
.p3 a:active {
visibility: hidden;
}
Yes, that did it. Do you have any idea why an internet article whould have 'a.p3:hover' as the solution? Was the guy just wrong or is there a trick to writing it that way?
Thought those changes solved the problem because when mouse rolled over the link it disappeared.
It doesn't exactly disappear. What it does is move down and to the right by about the same amount that p3 is instructed to do.
Apparently, the <a> tag is cascading from the p3's <p> tag. Sure is confusing.
How do I get the link attributes to work at the right location?
a.p3:hover as the solution?
The difference here is which element has the assigned class. The a.p3:hover syntax applies rules to an anchor element:
<a class="p3"></a>
The .p3 a:hover syntax applies rules to anchor tags that are within (descendants of) any element that has class="p3" - in this case, the containing div:
<div class="p3"><a></a><div>
This is the result:
.ad a:link {
text-decoration: underline;
font-size: 24px;
}
.ad a:visted {
text-decoration: underline;
font-size: 24px;
}
.ad a:hover {
text-decoration: underline;
font-size: 24px;
}
.ad a:active {
text-decoration: underline;
font-size: 24px;
}
PROBLEM:
When the mouse hovers over the link the font size changes to 24px. However, the link doesn't initially start at 24px nor does it show the underline (it does show the underline when hovering.)
Where is a:link and a:active getting their definitions? Why is it a:hover works, but not the others?
.ad is a class
#ad is an id
BTW this isn't some fluky IE problem is it? I don't understand why I'm having any trouble at all. The 'ad' class is nested within another DIV. Does that have any bearing on this problem?
My hair was thinning when I started working on this problem. Now I'm bald.
Problem assigning <a> properties to class
Your thread title has it backwards: you actually want to assign the properties detailed in a class to one or more <a>.
In the example code the class is applied to the container <div>. Inside the <div> are <p>s and inside each <p> is the <a> you want to affect. The first thing you always need to be clear about is exactly which elements you want to do what. Using your example as a basis:
* One: I want the <a> links to have: text-decoration: underline; font-size: 24px;, regardless of pseudo-class, therefor:
a:link {text-decoration: underline; font-size: 24px;}
* Two: I want this <a> behaviour only to apply to links within a <div> which is styled with the class .p3 therefor change code to:
.p3 a {text-decoration: underline; font-size: 24px;}
* Three: add in the containing divs:
#ad {height: 600px;}
.p3 {position: relative; width: 150px; font: 15px "Bookman Old Style";}
.p3 a:link {text-decoration: underline; font-size: 24px;}
.p3 a:hover {color: #0f0; /* to show pseudo-class works */}
Test in following HTML:
<div id="ad">
<div class="p3">
<p>This should be 15px while links should be 24px</p>
<p><a href="x">Test 1</a></p>
<p><a href="x">Test 2</a></p>
<p><a href="x">Test 3</a></p>
</div>
</div>
It works as wanted.
Note: you might well write the code differently if you also had links within the div but outside a <p> ... that is why planning your layout/markup/styling/etc. depends on the particular instance. There is no "one code fits all" answer.
The point is to be as specific as possible with the minimum of possible code. You implemented the example code incorrectly (we all do at times) but the example code has a potential problem:
As tedster points out a.p3:link means that it applies only to an anchor link that is identified by the class p3. This means that each and every link must be addressed i.e.
<p><a class="p3" href="x">Test 1</a></p>
<p><a class="p3" href="x">Test 2</a></p>
<p><a class="p3" href="x">Test 3</a></p>
The additional coding of such specificity can build up over a large site increasing maintenance time/costs. The "cascade" part of CSS is its greatest power and should not be neglected - as it often is by people not taking the time to fully think out and plan their pages and the available cascade.
Copying code is great but take the time to study it and read the applicable w3c CSS 2.0 recommendations [w3.org] and understand why and how it actually works. You may well then reiterate it in a variant that others will copy and study and understand and so on ...
<Added>:
The 'ad' class is nested within another DIV. Does that have any bearing on this problem?
Running the code as given (with my changes as noted) it works well cross browser. Run it by itself to confirm. Then add in each additional containing/adjacent div in turn. If a problem arises debug ... and post fuller code as necessary if urge to smash keyboard into monitor arises.
My hair was thinning when I started working on this problem. Now I'm bald.
We all are. We just put a wig and keep our mouths shut :-)
