Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts

    a href properties not working...

    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??
    Code:
    #backbutton a: hover {
    	color: #0099FF;
    	text-decoration: underline;
    	}
    
    #backbutton a{
    	color: #0033FF;
    	text-decoration: none;
    	}

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,451
    Thanks
    17
    Thanked 275 Times in 275 Posts
    #backbutton a: hover { should be #backbutton a:hover {

    No gap between the a: and hover.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?
    Last edited by njfail; 12-13-2010 at 01:13 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Hello njfail,
    Can we see some more code? You have not provided enough information to get an answer yet.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:
    Code:
    #backbutton span a:hover {
    etc. etc.
    and added this to the html:
    Code:
    <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?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    <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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    <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
    Code:
    <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...
    Last edited by njfail; 12-13-2010 at 02:30 AM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Have a look at what w3schools has to say about lists here.

    That w3schools is a handy site. They have tons of examples and tutorials on coding for websites.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by njfail View Post
    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 -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So an example of that, except inside a .css file, and not as inline styling, would be:
    Code:
    /*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...

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by njfail View Post
    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??
    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:

    Code:
    #backbutton a { color: #03f; text-decoration: none; }
    #backbutton a:visited { color: lightblue; }
    #backbutton a:hover { color: #09f; text-decoration: underline; }
    Quote Originally Posted by njfail View Post
    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:
    Code:
    #backbutton span a:hover {
    etc. etc.
    and added this to the html:
    Code:
    <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:

    Code:
    <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>
    Quote Originally Posted by njfail View Post
    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.

    Quote Originally Posted by njfail View Post
    is it ok to have spans inside of divs?
    Yes.

    Quote Originally Posted by njfail View Post
    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.)

    Quote Originally Posted by njfail View Post
    So an example of that, except inside a .css file, and not as inline styling, would be:
    Code:
    /*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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you

    Is it ok if I put this in my css:
    Code:
    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?

  • #15
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by njfail View Post
    Would that make it refer to all links on the page, reguardless of what div they're in? is that legal?
    It would and it is legal.

    Did it work for you when you tried it?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •