Results 1 to 11 of 11

Thread: HTML/CSS Help

  1. #1
    LWA
    LWA is offline
    Senior Member
    Join Date
    Jul 2003
    Location
    London
    Posts
    2,171
    Thanks
    134
    Thanked
    57 times in 41 posts

    Question HTML/CSS Help

    Hey guys and gals,
    I am building a phonebook that is written in asp, javascript and html. I am currently using javascript to display/hide items by altering the CSS.

    I am using an <a> tag as follows:

    <a onClick="callJavaFunction()">Show</a>

    As the <a> tag has no href attribute it does not display as a regular hyperlink (which I would ike it to do). I could add a ' href="#" ' which would display this as a hyperlink but this is a bit hacky for my liking.

    Any ideas how to make the 'Show' text look like a hyperlink but without the hack?

    Thanks in advance.
    Leon

  2. #2
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    If you just want it to use a different colour, be underlined or change mouse cursor, you can do it all using CSS.

    e.g. <a class="show" onClick="callJavaFunction()">Show</a>

    And in the CSS:

    .show{
    color:#0000ff;
    text-decoration:underline;
    cursor:pointer;
    }

    You can also make it underlined when you hover over it using :hover.
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  3. #3
    Gaarrrrr! Dav0s's Avatar
    Join Date
    Aug 2005
    Location
    Bristol
    Posts
    1,442
    Thanks
    1
    Thanked
    3 times in 3 posts
    wow mike i never knew the cursor: pointer thing.

    learn something new every day, ta

  4. #4
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    href="#" is not a hack, it's a perfectly valid use of the tag

    mike's answer is almost spot on. An <a> tag needs an href to be semantically correct. To make your code comply with the standards you should use a <span> tag and put the onclick event in there otherwise you will be applying a hack to the <a> tag.

    Personally I would use the href="#", there's nothing wrong with it

  5. #5
    LWA
    LWA is offline
    Senior Member
    Join Date
    Jul 2003
    Location
    London
    Posts
    2,171
    Thanks
    134
    Thanked
    57 times in 41 posts
    Thanks Mike that solution looks very nice and should work perfectly.

    Quote Originally Posted by Iain
    href="#" is not a hack, it's a perfectly valid use of the tag

    mike's answer is almost spot on. An <a> tag needs an href to be semantically correct. To make your code comply with the standards you should use a <span> tag and put the onclick event in there otherwise you will be applying a hack to the <a> tag.

    Personally I would use the href="#", there's nothing wrong with it
    Iain, dude I wasn't critising anyone who uses that code, I simply think it looks hacky and I don't like it.

    Thanks for the interesting info on the <a> tag, I was not aware of that fact.

  6. #6
    Ah, Mrs. Peel! mike_w's Avatar
    Join Date
    Oct 2003
    Location
    Hertfordshire, England
    Posts
    3,326
    Thanks
    3
    Thanked
    9 times in 7 posts
    Quote Originally Posted by Davos
    wow mike i never knew the cursor: pointer thing.

    learn something new every day, ta
    There's quite a few cursor: thingys.

    http://www.w3.org/TR/CSS21/ui.html#cursor-props
    "Well, there was your Uncle Tiberius who died wrapped in cabbage leaves but we assumed that was a freak accident."

  7. #7
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    No problem, if it's a personal preference then go for it. I didn't take it as you criticising anyone

  8. #8
    LWA
    LWA is offline
    Senior Member
    Join Date
    Jul 2003
    Location
    London
    Posts
    2,171
    Thanks
    134
    Thanked
    57 times in 41 posts
    Quote Originally Posted by Iain
    No problem, if it's a personal preference then go for it. I didn't take it as you criticising anyone
    Ahh that's good to hear.

    Also the <a href="#" etc makes the page 'jump' which is an undesired side effect.

    Thanks again for the suggestions.

  9. #9
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    It won't make it jump if you set it an anchor which refers to a static position based on where the link is. But yes, it generally has that side effect

  10. #10
    Senile Member
    Join Date
    Dec 2003
    Posts
    442
    Thanks
    3
    Thanked
    0 times in 0 posts
    Bear in mind that since you are getting the hyperlink "look" via CSS you don't even need an anchor tag, i.e

    <span onClick="blah()">Show</span>

    or a div, or anything

  11. #11
    LWA
    LWA is offline
    Senior Member
    Join Date
    Jul 2003
    Location
    London
    Posts
    2,171
    Thanks
    134
    Thanked
    57 times in 41 posts
    Yep that is exactly what I'm going to do

    Thanks again all. Hexus rocks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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