SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Want to know about this syntax in an <a href.

    Hi All,

    I have a super simple question on something I don't understand:

    <li><a href="./index.php" id="here">Home</a></li>

    What is the purpose of the id="here" ?

    I ran across it in a simple menu and I understand the reference, but I don't know what the id="here" is for.

    Thanks ahead.

    Jim

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    It's basically there in case you want to apply special styling the that link (such as making is a different color from all other links). But on its own it will do nothing unless there are some styles relating to it in your CSS, or perhaps if you are targeting that link with JavaScript.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply. I looked around in the styles for the site and the javascript and there was no matching id. I was 99% sure it was a css id, but what is weird is that if I remove it changes the color of the menu item - indicating a style or script somewhere....
    I checked all the links and includes through my IDE and visually and I don't see anything referenced. I have been looking for awhile because I would like to change the way it displays and figured I would just change the ID instead of replacing it. Oh well, it's no biggie to replace it because it isn't used anywhere else.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You can easily see what styles are applying to an element. If using Chrome, right click on the link and choose Inspect Element. It will show you the HTML of the element and the CSS that applies to it, and where those styles are in your style sheet.

    You can also do the same in Opera, Safari, and in Firefox by downloading the Firebug plugin.

    If you are having problems, feel free to post a link to your site and we can check for you.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's basically there in case you want to apply special styling the that link (such as making is a different color from all other links). But on its own it will do nothing unless there are some styles relating to it in your CSS, or perhaps if you are targeting that link with JavaScript.
    You left out the possibility of it being the destination of another link elsewhere on the same page <a href="#here"> or on another page <a href="nextpage.html#here">
    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="^$">

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by felgall View Post
    You left out the possibility of it being the destination of another link elsewhere on the same page <a href="#here"> or on another page <a href="nextpage.html#here">
    Yes, good point.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is very odd and here is why. This has to be a style (there are only two stylesheets with about 2500 lines so looking through it is not fun) but I use PHPStorm with CSS Xfire which invokes Firebug. Code inspect reveals nothing, there is no CSS preprocessor, but a bunch of includes and Javascript. I have no idea where the style is coming from at this point, but I replaced the style and it worked.
    How can this be? There are no styles on this page, I can find every other style I have looked for easily. Because I couldn't find this style I started wondering if "here" was some sort of predefined style. This program is running in its own CMS so.... I don't know. My lack of experience is showing. I can't really show this, but I thank you for your help and suggestions and, in essence, the problem is solved. Regardless, I feel like I wasted 3 hours chasing my tail (and still have the nagging feeling I missed something obvious)

  8. #8
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    IE's developer mode is quite good too. Press F12, give focus to the left hand panel of the developer window by clicking it, and then press Ctrl+B (or click the arrow which is the first of a list of icons). As you move your mouse around the screen a blue border will show around the element you are hovering over. Click the element (the link) and it will show you what style has been applied and what file applied it. If it doesn't, press the refresh button and try again.

    IE's developer mode is really useful for this type of thing
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •