...

View Full Version : a href properties not working...



njfail
12-12-2010, 10:59 PM
I want the words in the div to become underlined when highlighted.

Later, I might make a picture for the 'back button' and then I would want the picture to change to another picture...

But for the time being... the 'hover over' properties I have aren't working!

The code below is what I wrote to have it underlined when hovered over, and then change to a lighter blue when already visited.
However, the actual result of the page is it becomes underlined and purple when click :\
Am I missing something with this code??

#backbutton a: hover {
color: #0099FF;
text-decoration: underline;
}

#backbutton a{
color: #0033FF;
text-decoration: none;
}

DrDOS
12-12-2010, 11:30 PM
#backbutton a: hover { should be #backbutton a:hover {

No gap between the a: and hover.

njfail
12-13-2010, 12:11 AM
the hover property still isn't working :\
The others seem to be working though.
I've tested it in the lastest versions of firefox and IE.

any ideas?

Excavator
12-13-2010, 12:17 AM
Hello njfail,
Can we see some more code? You have not provided enough information to get an answer yet.

njfail
12-13-2010, 12:23 AM
I think I've figured it out;
Do you guys see any problems with the following code? it works but I have yet to do any testing and I don't want to just be "lucky" and not have it the right way!

I've been googling examples and I changed it to:


#backbutton span a:hover {
etc. etc.

and added this to the html:


<span>
<div id="replaylinks">
<li><a href="/replays/2kings">2 Kings Tournament (10-29-10)</a></li><br />
<li><a href="/replays/pam">1v1 PAM Tournament (11-26-10)</a></li><br /></span>
</div>

I've heard that div's and spans are sort of the same thing, is it ok to have spans inside of divs?

Excavator
12-13-2010, 12:27 AM
<span> tags around your <li>'s would not be valid.
<span> tags around a <div> would also be invalid.
<li>'s with no <ul>/<ol> is invalid.

See the links about validation in my signature line.

njfail
12-13-2010, 01:13 AM
<span> tags around your <li>'s would not be valid.
<span> tags around a <div> would also be invalid.
<li>'s with no <ul>/<ol> is invalid.

See the links about validation in my signature line.

I see, it should be


<ul>
<li>item#1</li>
</ul>


What is the correct way to set up the a:hover feature??
without span it doesnt seem to work...

Excavator
12-13-2010, 01:32 AM
Have a look at what w3schools has to say about lists here (http://www.w3schools.com/html/html_lists.asp).

That w3schools is a handy site. They have tons of examples and tutorials on coding for websites.

Excavator
12-13-2010, 01:43 AM
What is the correct way to set up the a:hover feature??
without span it doesnt seem to work...

Put an anchor in your list and you can have a hover effect on that -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
ul {list-style: circle;}
li a:link,
li a:visited {
height: 20px;
width: 100px;
background: #000;
color: #fff;
}
li a:hover,
li a:active {
background: #fff;
color: #000;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
</ul>
<!--end container--></div>
</body>
</html>

Easy to add a little styling and make a simple menu from there, like this (http://nopeople.com/CSS%20tips/ulmenu/index.html).

njfail
12-13-2010, 04:06 AM
So an example of that, except inside a .css file, and not as inline styling, would be:


/*no mention to ul { style }, as the default style is a dot*/
#thelistdiv a:link,
#thelistdiv a:visited {
color: #0099ff;
}
#thelistdiv a:hover,
#thelistdiv a:active {
color: #0033ff;
}


When you say "anchor", you mean the " , " that you inserted?
That doesn't make any sense to me, especially since I want the visited color and normal link color to be 2 different things. I also want active to have no affect...

Excavator
12-13-2010, 05:45 AM
That doesn't make any sense to me, especially since I want the visited color and normal link color to be 2 different things. I also want active to have no affect...

I'm not going to try to guess what you want your links to do. It's up to you to code them to do what you want.
Did you visit that link I gave you to the w3schools?

They have a great description of links that walks you through it, tells you what each setting does. http://www.w3schools.com/html/html_links.asp
You can take my example, place your list items in it and style it so the link/visited/hover/active states do whatever you want.


When you say "anchor", you mean the " , " that you inserted?

An anchor is the a tag (http://www.w3schools.com/TAGS/tag_a.asp).

njfail
12-13-2010, 07:37 AM
Ahhh, I'm sorry, I misinterpreted what you meant when you said " put an anchor on your list"

You meant literally put a:hover on li

Arbitrator
12-13-2010, 07:49 AM
the 'hover over' properties I have aren't working!

The code below is what I wrote to have it underlined when hovered over, and then change to a lighter blue when already visited.
However, the actual result of the page is it becomes underlined and purple when click :\
Am I missing something with this code??

#backbutton a: hover {
color: #0099FF;
text-decoration: underline;
}

#backbutton a{
color: #0033FF;
text-decoration: none;
}This code has three issues.

First, you didn't specify the hover pseudo-class (i.e., :hover) correctly. The colon is part of the pseudo-class syntax. DrDOS already pointed this out, but I figured it might be informative to state it in a different way.

Second, your style rules are in the wrong order. #backbutton a (i.e., the default state) will override #backbutton a:hover because it occurs later in the style sheet and due to a concept called "specificity". (You can look it up.)

Third, you haven't specified anything to differentiate between the visited and unvisited states even though you apparently want to differentiate them.

Your code should be something closer to this:


#backbutton a { color: #03f; text-decoration: none; }
#backbutton a:visited { color: lightblue; }
#backbutton a:hover { color: #09f; text-decoration: underline; }


Do you guys see any problems with the following code? it works but I have yet to do any testing and I don't want to just be "lucky" and not have it the right way!

I've been googling examples and I changed it to:


#backbutton span a:hover {
etc. etc.

and added this to the html:


<span>
<div id="replaylinks">
<li><a href="/replays/2kings">2 Kings Tournament (10-29-10)</a></li><br />
<li><a href="/replays/pam">1v1 PAM Tournament (11-26-10)</a></li><br /></span>
</div>As others have pointed out, this HTML structure is incorrect.

1. You misnested tags by opening a div element inside a span element and by closing the span element before you closed all of the elements inside of it (i.e., the div element isn't closed).

2. You didn't wrap the list in an ol or ul element.

3. With the missing ol or ul elements in place, you would have another error: br elements are not allowed as immediate children of those two elements. You should create the line breaks with CSS or nest the offending elements inside of the li elements.

A more correct structure is:


<div>
<ul id="replaylinks">
<li><a href="/replays/2kings">2 Kings Tournament (10‐29‐10)</a></li>
<li><a href="/replays/pam">1v1 <abbr>PAM</abbr> Tournament (11‐26‐10)</a></li>
</ul>
</div>


I've heard that div's and spans are sort of the same thing...They are the same thing in terms of meaning. Both are for generic use and have no meaning associated with them. This is unlike, say, var and abbr elements which indicate variable and abbreviated content, respectively (as in, e.g., <var>&lt;insert name here></var> and <abbr title="Texas">TX</abbr>).

They have different renderings though. div is used to group elements and is rendered similar to a paragraph element while span is used to mark up a run of text and doesn't have a specific rendering attached to it.


is it ok to have spans inside of divs?Yes.


When you say "anchor", you mean the " , " that you inserted?Commas separate multiple CSS selectors for the same declaration block.

The name of the a element is short for "anchor". For example, one might have used <h2><a name="section_title"><var>Section Title</var></a></h2> where the a element defines an anchor and <a href="#section_title">Go to <var>Section Title</var>.</a> takes you to it.

The name is somewhat of a misnomer now in that this behavior is deprecated in favor of using id attributes to do the same thing (on any element). The above code would be <h2 id="section_title><var>Section Title</var></h2> with <a href="#section_title">Go to <var>Section Title</var>.</a> nowadays. (Note that the anchor wasn't created with an anchor element.)


So an example of that, except inside a .css file, and not as inline styling, would be:


/*no mention to ul { style }, as the default style is a dot*/
#thelistdiv a:link,
#thelistdiv a:visited {
color: #0099ff;
}
#thelistdiv a:hover,
#thelistdiv a:active {
color: #0033ff;
}


...
That doesn't make any sense to me, especially since I want the visited color and normal link color to be 2 different things. I also want active to have no affect...I believe that was just generic example code. See the code that I provided earlier in this post for code more specific to your issue.

njfail
12-13-2010, 09:58 PM
Thank you :)

Is it ok if I put this in my css:


a: {
color: #333333;
}
a:hover {
color: #444444;
}


Would that make it refer to all links on the page, reguardless of what div they're in? is that legal? :cool:

Excavator
12-13-2010, 11:15 PM
Would that make it refer to all links on the page, reguardless of what div they're in? is that legal? :cool:

It would and it is legal.

Did it work for you when you tried it?

Arbitrator
01-02-2011, 04:26 PM
Thank you :)

Is it ok if I put this in my css:


a: {
color: #333333;
}
a:hover {
color: #444444;
}


Would that make it refer to all links on the page, reguardless of what div they're in? is that legal? :cool:It would and would be legal if you used correct syntax.

As I pointed out previously, "[t]he colon is part of the pseudo-class syntax." a:, therefore, doesn't make sense since no pseudo-class name (such as hover in :hover) was specified. The first rule should simply have a (and not a:) as a selector.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum