www.webdeveloper.com
Results 1 to 8 of 8

Thread: link styles

  1. #1
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    221

    link styles

    Looking for suggestions on how to style internal and external links.

    External links will open a new page (or tab); and there are two types of internal links: a sub-menu type link; and one that opens a popup pane.

    I've road-tested a couple of ideas and the users have found both a bit confusing: underlining all links, and giving different backgrounds to each type; and underlining just the external links and giving both internals the same background.

    Also tried to delve into Wikipedia to find the origin of that little diagonal-arrow-thingy used on external links.

    Are there any well-established conventions? Things you know work with viewers of varying savviness?

    Cheers.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    I'm not sure if there is a styling convention for links, but for what it's worth this is what I normally do for links within text unless there is a specific need to do otherwise.

    All other page text is black by default.

    All links' text lables are a darkish blue by default with no underlining.

    On hover, the link text colour is changed to a darkish red with underlining.

    Visited links are set to their default style.

  3. #3
    Join Date
    Jan 2009
    Posts
    3,346
    You could follow the social media effort. Facebook for example has a page all external requests are funneled through telling the user they are about to go to an external site.

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    I'm always hesitant to change from blue and underlined, perhaps with the colours tweaked.

    Normally attribute selectors are used for external links, either with a rel="external" in the link or something like [href^=http://] if you use http://something.com for all external links. However, if you then use pseudo-content classes to generate an image, that won't work in IE 7, so a background image would probably be best.

  5. #5
    Join Date
    Feb 2010
    Location
    Berlin
    Posts
    97
    Quote Originally Posted by ctoz View Post
    Also tried to delve into Wikipedia to find the origin of that little diagonal-arrow-thingy used on external links.
    Take a look at this page: http://www.psyked.co.uk/css/auto-matic-link-icons.htm

    In short, it's done with this simple bit of CSS:
    Code:
    a[href^="http://"] {
        background: url(img/url.png) center right no-repeat;
        padding-right: 24px;
    It'll save you a lot of trouble adding all kinds of link styles (there are also variables for .zip, .pdf, etc.) and it's very clear to your site's visitors.

  6. #6
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    221
    Thanks to all: plenty to work with.



    hmmm:

    "(img/url.png)" isn't among the Silk collection which psycked links to...
    Last edited by ctoz; 07-19-2010 at 10:40 PM.

  7. #7
    Join Date
    Feb 2010
    Location
    Berlin
    Posts
    97
    Quote Originally Posted by ctoz View Post
    "(img/url.png)" isn't among the Silk collection which psycked links to...
    Silk collection? You mean this? It's an icon I made myself, I have a design portfolio and will not use other people's designs if I can avoid it.

  8. #8
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    221
    No, the icon i was referring to I've found here, see attached.

    It could look untidy if you have a lot of these in a paragraph of text, though.
    Attached Images Attached Images

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
  •  
HTML5 Development Center



Recent Articles