SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Need Hyperlink beneath Icon

    In a User's Private Message Inbox is a column where people can "flag" a Message.

    I am in the process of adding the ability to sort by this column.

    In the Column's Heading, I have a Flag icon that I found on WikiPedia Commons.

    Is there some way to *visually* add an HTML hyperlink beneath the icon so people will know to click on it if they want to sort on that column??

    Here is a code snippet...
    HTML Code:
    	<th id='colFlag'>
    		<a href=''>
    			<img src='/images/red_flag_icon.png' width='15' alt='' />
    		</a>
    	</th>
    Unfortunately, you can't see a hyperlink below it, which is weird, because I was sure I was doing this the correct way?!

    Sincerely,


    Debbie

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    What do you mean by visually add a hyperlink?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If you mean the text-decoration:underline then that doesn't get applied to images but you could add a border to the anchor (or to an element around the image if other content is in the same vicinity).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #colFlag a {
    	border-bottom:1px solid blue;
    	text-decoration:none;
    }
    #colFlag img a { vertical-align:baseline }
    </style>
    </head>
    
    <body>
    <table>
    		<tr>
    				<th id='colFlag'> <a href='#'><img src='http://placehold.it/15x15' width='15' height="15" alt='' /></a> </th>
    		</tr>
    </table>
    </body>
    </html>

  4. #4
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B,

    Thank you!!

    That is exactly what I was talking about!


    Now the only issue is that my Column Headings look a bit off... (*See Vertical Alignment issue in screenshot)

    Attachment 63316


    What do you think about how that looks?

    Would you do anything to improve it?

    Sincerely,


    Debbie

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Maybe the bottom border could be closer to the image.

    Make sure the image and the anchor around it are both set to display:block and the border will touch the bottom of the image.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Personally, I think it looks awful to have a line under the image like that. A much nicer option is to get the image to change on hover (go a bit darker or another color etc.) A sprite image is good for that.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Maybe the bottom border could be closer to the image.

    Make sure the image and the anchor around it are both set to display:block and the border will touch the bottom of the image.
    That didn't help.

    (Maybe I need to post more??)


    Debbie

  8. #8
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Personally, I think it looks awful to have a line under the image like that.
    Ouch!


    Quote Originally Posted by ralph.m View Post
    A much nicer option is to get the image to change on hover (go a bit darker or another color etc.) A sprite image is good for that.
    Well, as I'm sure you recall, JavaScript is out for this build.

    Is there a way to achieve something that you find more appealing that doesn't require JavaScript?

    If so, I'm open to your ideas!!

    Thanks,


    Debbie

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    I didn't mention JS. An image rollover like that is standard CSS. http://css-tricks.com/css-sprites/

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    That didn't help.
    Then its likely that the space under the image is part of your image otherwise the border would touch the image.

    How about you just give the image a border on hover instead.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    #colFlag a {
    	text-decoration:none;
    	display:block
    }
    #colFlag img {
    	display:block;
    	border:1px solid transparent;	
    }
    #colFlag a:hover img{border:1px solid blue} 
    </style>
    </head>
    
    <body>
    <table>
    		<tr>
    				<th id='colFlag'> <a href='#'><img src='http://placehold.it/15x15' width='15' height="15" alt='' /></a> </th>
    		</tr>
    </table>
    </body>
    </html>

  11. #11
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I didn't mention JS. An image rollover like that is standard CSS. http://css-tricks.com/css-sprites/
    I just skimmed the article.

    Looks like a good idea down the road, but since I don't have any Image-Editing Software (e.g. Photoshop), nor do I have any knowledge of such apps, I'm sorta out of luck.

    (My flag icon was just downloaded as-is from WikiMedia Commons.)

    Sincerely,


    Debbie

    P.S. I did add a TITLE to the <img> tag with the description "Click to sort by Flag" so if someone hovers over my Flag icon, at least they have that cue.

  12. #12
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Then its likely that the space under the image is part of your image otherwise the border would touch the image.
    Well, I see a tiny gap between the image and the border you added in your last post, but it is only maybe 1px, so it could just be an optical illusion in FireBug.


    Quote Originally Posted by Paul O'B View Post
    How about you just give the image a border on hover instead.
    I could do that, but my goal was to give Users a visual clue that clicking on the Flag Icon will "Sort by Flag". (For the other columns, I have hyperlinks, so people can see that they can sort by Sender, Subject, and Date.)

    I think using the TITLE attribute probably accomplishes the same thing?!


    It is starting to look like if I had something like Photoshop it would make my life a lot easier...

    Maybe after my website is up, I can download Gimp or Inkscape and start learning them...

    Sincerely,


    Debbie

    P.S. You helped me long ago with a "slice" that I used to create Buttons which when you click on them, look dynamic in that they move a bit. Isn't there a way to do that with my Flag Icon image? I don't recall how you helped me do what I did with my blue Buttons, but they sure look cool!!

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Something to consider:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>template</title>
        <style type="text/css">
    
    table {
        border-spacing:0;
        margin:0 auto;
    }
    #colFlag {
        padding:0;
    }
    #colFlag a {
        outline:1px solid magenta;
        display:inline-block;
        width:17px;  /* if you want the image to move, add the extra px or two */
        height:17px;  /* if you want the image to move, add the extra px or two */
        background:url('http://placehold.it/15x15') no-repeat 0 0;
        border-bottom:1px solid blue;  /* if you prefer an underline, here it is */
    }
    #colFlag a:hover {
        background-position:100% 100%;  /* if you want the image to move */
        border-bottom-color:red;       /* for demo */
    }
    
        </style>
    </head>
    <body>
    
    <table>
    <tr>
    	<th id='colFlag'><a href=''></a></th>
    </tr>
    </table>
    
    </body>
    </html>
    Sincerely,
    not Paul O'B, not ralph.m

  14. #14
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Hi Debbie,
    ... my goal was to give Users a visual clue that clicking on the Flag Icon will "Sort by Flag".
    The title-attribute is a good idea (but it's only visible at a hover, while maybe a visitor just doesn't know (s)he can hover there).
    To make it more clear, the word "sort" can be put in the flag-image itself (with 17px width: just enough space for it ).
    As a sprite, with a green flag for the hover state:

    The css can be:
    Code:
    #colFlag a {
    	margin: 1px;
    	width: 17px;
    	height: 17px;
    	display: block;
    	background: url(images/flag_sort_sprite.png);
    	}
    #colFlag a:hover,
    #colFlag a:focus {
    	background-position: -17px 0;
    	}
    And the html:
    Code:
    <tr>
    	<th>..</th>
    	<th id='colFlag'><a href='#' title="Click to sort by Flag"></a></th>
    	<th><a href='#' title="Click to sort by From">From</a></th>
    	<th><a href='#' title="Click to sort by Subject">Subject</a></th>
    	<th><a href='#' title="Click to sort by Date">Date</a></th>
    </tr>
    It's in great lines the same as ronpat's code.


  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Francky's idea looks good

  16. #16
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Who agrees with Ralph and thinks putting a hyperlink beneath my original Flag icon looks cheesy?


    Debbie

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Who agrees with Ralph and thinks putting a hyperlink beneath my original Flag icon looks cheesy?


    Debbie
    I think the underline would be consistent with the other underlines. For that reason, I do not think it would look "cheesy". You could easily use the underline (post 13) as well as Francky's sprite.

  18. #18
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    If the underline is desired, you always can take it up in the image:
    or

    No worry about distances 1px more or less under the img, just what you want.

  19. #19
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    If the underline is desired, you always can take it up in the image:
    or

    No worry about distances 1px more or less under the img, just what you want.
    Thanks for the sprite, but that doesn't work for me...

    I think it looks bad to have an icon labeled "Sort".

    Sort what?!

    Um, *every* column in the Inbox is *sortable*, so having a Flag Icon labeled "sort" is confusing (and misleading) at best.

    I'll just trust that most users will think to try clicking on my Flag Icon if they want to sort by that column.

    And I think having the other Text Column Headings as hyperlinks should serve as a small cue for the User to consider the possibility that the Flag cloumn is also sortable.

    If they hover over it, they will also get the TITLE pop-up which will confirm that this is indeed a sortable column.

    ------
    I'm not so sure about the hyperlink beneath my Flag icon...

    It does look a bit out of place since that icon doesn't line up as well with the other non-icon Column Headings.

    Maybe someday when I learn Gimp/Inkscape I can make my own which fits in better?

    Sincerely,


    Debbie


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
  •