SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Hyperlink Added to ID of Same Page Link

    Hi,

    I have added a same page link to my site. However it has had a strange affect on ID link. The link (id="L3) now is now highlighted blue and underlined. I have tried to add a class to to it. However this only work when you mouseover it.

    Can anyone advise how I can create a same page link without the ID being styled. Or to permanently style the ID link.


    Code:
     
    <a href="#L3" >Your Images</a>
    
    <a id="L3" class="boardlink">Your Images:</a>
    
    
    
    <div class="boardsegmentheaders">
    <a id="L3" class="boardlink">Your Images:</a>
    </div>

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,335
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    I'm not quite clear what you're trying to do here. This part of your code:

    Code:
     
    <a href="#L3" >Your Images</a>
    Creates a link to a part of your page with the id L3, but this part of your code

    Code:
    <a id="L3" class="boardlink">Your Images:</a>
    
    
    
    <div class="boardsegmentheaders">
    <a id="L3" class="boardlink">Your Images:</a>
    </div>
    contains two different sections with that same id. Apart from the fact that an id can only validly be used once per page, that's going to create unexpected results.

    As far as styling goes, you'll need to show us your CSS and explain a little more clearly what the problem is and what you want.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Apologies, I was meant to display the CSS.

    I think I have somehow set a default style on all links but Im not sure how. Is it possible to do that somehow?


    Code:
    .boardsegmentheaders{
       float:left;
       width:99%;
    background: #F9F8F8;
    padding-top: 1%;
    padding-left: 1%;
    padding-bottom: 1%;
    margin-bottom: 1%;
    margin-top: 1%;
    font-color: #000;
    	font-size: 80%;
       font-weight: bold;
    font-family: Helvetica, sans-serif;
    }

  4. #4
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,285
    Mentioned
    181 Post(s)
    Tagged
    4 Thread(s)
    I think you want to use name and not id for the anchor (a) tag to which your link points.
    Code:
    <a href="#somewhere">Jump on this page to "Somewhere"</a>
    ...
    <a name="somewhere">Text can be here</a>
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,335
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Blue and underlined generally is the default setting for links. If you want them to display differently, you'll need to set specific styles. If some of your links are already styled differently, then you'll need to amend your CSS to make them all the same - if that's what you want - but as you haven't shown the full CSS here, I can't be more helpful than that.

    And you still need to address the issue of having the same id twice on your page.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I dont have the same ID on the page twice. I pasted the code on here twice by mistake.

    This is the all the code I have: I have tried the name function but that has the same affect.


    Code:
    <a href="#L3" >Your Images</a>
    
       <div class="boardsegmentheaders">
    <a name="L3" class="boardlink">Your Images:</a>
    </div>
    
    
    a.boardlink:link {
    	color: #000;
    	text-decoration: none;
    	}
    
    a.boardlink:visited {
    	color: #000;
    	text-decoration: none;
    	}
    
    a.boardlink:hover {
    	color: #000;
    	text-decoration: none;
    	}

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,335
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Code HTML4Strict:
    <a name="L3" class="boardlink">Your Images:</a>
    is an anchor, not a link, so all you should need is
    Code CSS:
    a.boardlink{
    	color: #000;
    	text-decoration: none;
    	}

    However, using the code that you've pasted here, I still get the first (link) line of text blue and underlined, and the second line black, with no underlining, which is what you would expect. Works in Firefox and Chromium. Which browser are you using?
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    730
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I changed it to this and now it works fine. Cheers dude.

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

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,335
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Glad you got it sorted.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ParkinT View Post
    I think you want to use name and not id for the anchor (a) tag to which your link points.
    Code:
    <a href="#somewhere">Jump on this page to "Somewhere"</a>
    ...
    <a name="somewhere">Text can be here</a>
    Sorry Thom but that's not the 21st century way ... the use of <a name="..."> isn't recommended any more, for a number of reasons not least of which is the potential for confusion when styling a {...}.

    The best way to link to a point within a page is just to put an ID on whatever element you want to link to. So if you want the reader to jump to <div class="boardsegmentheaders"> then that's what you give the ID - ie <div class="boardsegmentheaders" id="L3">. You don't need to add in any extra elements, you can just use what you've already got there.

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    name on <a tags is obsolete - it is only necessary if you have visitors using the long dead Netscape 4.

    Similarly an id can go on any tag not just on an <a> so it generally works out better to not put it on an <a> tag unless you need to also support Netscape 4 - in which case you'd include both an id and a name with the same value.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,285
    Mentioned
    181 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Sorry Thom but that's not the 21st century way ... the use of <a name="..."> isn't recommended any more, for a number of reasons not least of which is the potential for confusion when styling a {...}.
    Well then. I will just take my slide-rule, straighten out my Leisure Suit and drive my Gremlin home in embarrassment!!

    Thanks for the edification. I was not aware of that change. Can I stop using the 'blink' tag now too???
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  13. #13
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ParkinT View Post
    Can I stop using the 'blink' tag now too???
    Yes, in all cases except <blink>182</blink>.


Bookmarks

Posting Permissions

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