<a href and <a id coding help

Discussion in 'CSS' started by xxll_martin_llxx, Dec 2, 2014.

0
  1. #1
    Hi guys,

    Where am I going wrong in my code?

    <a href="#AINTREE">Aintree</a>
    <a href="#ASCOT">Ascot</a>
    <a href="#AYR">Ayr</a>

    Clicking any of that will you take to the anchor point further down the page.



    <a id="AINTREE">Aintree</a>
    <a id="ASCOT">Ascot</a>
    <a id="AYR">Ayr</a>



    How do I style the id parts?


    a, a:link, a:active { text-decoration:underline; color:#06C; }
    a:hover { color:#06C; }
    a:visited { color:#06C;/*#6300CC*/; }
    .ainv a, .ainv a:link, .ainv a:visited, .ainv a:active { text-decoration:none; }
    .ainv a:hover { text-decoration:underline; }
    a.ainv:link, a.ainv:visited, a.ainv:active { text-decoration:none; }
    a.ainv:hover { text-decoration:underline; }

    a.id {
    color:#000;
    text-decoration:none; }

    http://www.horseracingtipcomparison.com/uk-horse-racing-tracks-number-2/ - the site is indeed under construction.
     
    Last edited: Dec 2, 2014
    xxll_martin_llxx, Dec 2, 2014 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    If you are going to use ID, you don't need to use an anchor -- if anything those look like they should be HEADINGS. It used to be to do internal hash-links you did it with the NAME attribute, but unless you need nyetscape 4 support 1990's style, just point at the ID's... which you can put on ANY element, not just anchors. Really in this day and age if you're not putting a href on it, don't use an anchor! Use the proper semantic element -- the proper element depending on the content and document structure around it.

    Though I don't see anything on the page you linked to that bears the slightest resemblance to the code in your post; or that would require internal linking.
     
    deathshadow, Dec 3, 2014 IP
    sarahk and COBOLdinosaur like this.
  3. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #3
    Yeah heading tags with ids look to be the most logical. If you need styling beyond native heading presentation just use a class to apply the properties you need.
     
    COBOLdinosaur, Dec 3, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Or inherit off the parent's selector since you'd think all those like targets would be same-level headings off the same parent. That really depends on the data though since as always, the content should be dictating the markup, NOT the other way around.
     
    deathshadow, Dec 3, 2014 IP
  5. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #5
    may be you should try and give a css for it else he will not understand
     
    Naina S, Dec 4, 2014 IP
  6. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #6
    use #AINTREE
    {
    ......
    }
    #AINTREE:hover
    {
    ......
    }
     
    Naina S, Dec 4, 2014 IP
  7. xxll_martin_llxx

    xxll_martin_llxx Well-Known Member

    Messages:
    128
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    155
    #7
    I did some Googling about proper semantic element but that went over my head.

    I ended up with: 

    <a href="#AINTREE">Aintree</a>
<a href="#AYR"</a>
    Code (markup):
    
<a id="ASCOT">Ascot</a><br />
<a id="AYR">Ayr</a><br />
    Code (markup):
    
a[id]{ 
     color:#000; 
     text-decoration:none; }
    Code (markup):

    This does exactly what I wanted it to do, and allows for any change should I need to in coming months.
     
    xxll_martin_llxx, Dec 8, 2014 IP