As you can see, the "yes/no" widget on the bottom of the screenshot is:

[button] [number]

The number is not part of the button. How to make it like this instead:

[button number]

edit: a perfect example, the thumbs-up/thumbs-down rating widget on Yahoo Answers: http://answers.yahoo.com/question/index;_ylt=Ao37OQz9iO3ZJvacOl9pH8_j1KIX;_ylv=3?qid=20121104010935AAs5NQk

The number is in the button. Clicking anywhere on that button registers a vote.

| improve this question | | | | |

This is done by using some CSS.

look at the HTML structure there. 'LI' tag is used there. Just use the anchor style to LI tag.

background: #EEE; border: 1px solid #CCC; margin-right: 3px;

Use this style to li and remove anchor border. Also change the hover style of anchor tag.

Use firebug to find the structure.

| improve this answer | | | | |
  • ok, the number is visually inside the button, but how to make the number clickable as part of that button? – suzy Nov 4 '12 at 5:33
  • Add hover effect to li. then add cursor:pointer to li. – Sibiraj PR Nov 4 '12 at 7:33
  • I mean, css makes it visually look like it's part of the button, but functionally that number still doesn't behave any differently, it still does nothing (a user clicking on it won't make it register a vote for that button). – suzy Nov 4 '12 at 8:22
  • You mean the functionality is not working? – Sibiraj PR Nov 4 '12 at 14:15
  • the yes/no widget "looks" like this: [ yes 0 ] [ no 0 ] but the structure is still [ yes ] [ 0 ] [ no ] [ 0 ] the number isn't an anchor and clicking the number doesn't register a vote. – suzy Nov 4 '12 at 17:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.