external link symbol at wikipedia?

Discussion in 'HTML' started by T.J., Apr 17, 2005.

  1. T.J.

    T.J. Guest

    Hi all,

    Using ,
    http://en.wikipedia.org/wiki/Amsterdam as an example.
    What is the symbol after the external links at the bottom
    of the page?
    and how do you replicate what they are doing?
    (using HTML rather than XHTML)

    Many thanks
    T.J., Apr 17, 2005
    #1
    1. Advertising

  2. David Dorward, Apr 17, 2005
    #2
    1. Advertising

  3. T.J.

    T.J. Guest

    "David Dorward" <> wrote in message
    news:d3u2e2$5ms$2$...
    > T.J. wrote:
    >
    >> http://en.wikipedia.org/wiki/Amsterdam as an example.
    >> What is the symbol after the external links at the bottom
    >> of the page?

    >
    > A background image, set on links starting with "http://" using a substring
    > matching attribute selector from CSS 3 (not yet a recommendation).
    >
    > http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#attribute-substrings
    >



    Thank you for the reply,
    I'm afraid that is all way above me, and think the symbol
    is a bit of a red herring as to what I am trying to ask anyway.

    I will try to rephrase it.
    again using http://en.wikipedia.org/wiki/Amsterdam as an example.
    Looking at the first of the external links, this appears to be the code.
    (sorry may wrap)

    <a href="http://wikitravel.org/en/article/Amsterdam" class='external'
    title="http://wikitravel.org/en/article/Amsterdam">Wikitravel</a>
    <span
    class='urlexpansion'> (<i>http://wikitravel.org/en/article/Amsterdam</i>)</span>

    From what I have found out, it appears it is to make the url display next to
    the text when in printing out the page.
    How can I achieve the same effect?
    T.J., Apr 17, 2005
    #3
  4. T.J. wrote:

    > From what I have found out, it appears it is to make the url display next
    > to the text when in printing out the page.


    That is an entirely seperate issue to the icon you asked about previously.

    > How can I achieve the same effect?


    Set different values for the display: property for the span in the screen
    media and print media stylesheets - but note that the URL (if you use that
    technique) will be displayed to any user who doesn't have a browser which
    can handle screen media style sheets (including, but not limited to, Lynx
    users).

    http://www.w3.org/TR/CSS2/media.html

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Apr 17, 2005
    #4
  5. T.J.

    Andy Dingley Guest

    On Sun, 17 Apr 2005 17:09:14 +0100, "T.J." <> wrote:

    >What is the symbol after the external links at the bottom
    >of the page?


    It's just a random symbol. Some sites use a "world" icon or similar.


    >how do you replicate what they are doing?


    This is the HTML code

    <a href="http://foo.com" class='external-link' >Some Stuff</a>

    And the CSS will contain something like this:

    a.external-link:after {
    content : " \21D2" url(/images/inline-icon-external-link.gif);
    text-decoration: none;
    }


    This is from one of my own sites - not exactly the same as Wiki.

    The key is to use a CSS "content" rule. You can put text, odd
    characters by code or images in there.

    It's not done with CSS "background-image", as that won't align
    correctly for this purpose.
    Andy Dingley, Apr 18, 2005
    #5
  6. T.J.

    T.J. Guest

    "David Dorward" <> wrote in message
    news:d3u75m$bal$1$...
    > T.J. wrote:
    >
    >> From what I have found out, it appears it is to make the url display next
    >> to the text when in printing out the page.

    >
    > That is an entirely seperate issue to the icon you asked about previously.
    >
    >> How can I achieve the same effect?

    >
    > Set different values for the display: property for the span in the screen
    > media and print media stylesheets - but note that the URL (if you use that
    > technique) will be displayed to any user who doesn't have a browser which
    > can handle screen media style sheets (including, but not limited to, Lynx
    > users).
    >
    > http://www.w3.org/TR/CSS2/media.html
    >



    Thank you again,
    Yes, sorry the image was a completely separate issue.
    I think I have now got a page set up so that
    text is added when printing the page, but doesn't
    display on the screen.
    http://www.sim64.co.uk/test-print.html

    It seems to work on the latest versions of IE, Opera,
    Firefox and Netscape, but from what you say wont work
    on all.
    Is this a technique I can safely use, assuming that I check
    that when the text added for the printer is displayed on
    the screen it doesn't mess the page up to much?
    T.J., Apr 18, 2005
    #6
  7. T.J.

    T.J. Guest

    "Andy Dingley" <> wrote in message
    news:...
    > On Sun, 17 Apr 2005 17:09:14 +0100, "T.J." <> wrote:
    >
    >>What is the symbol after the external links at the bottom
    >>of the page?

    >
    > It's just a random symbol. Some sites use a "world" icon or similar.
    >
    >
    >>how do you replicate what they are doing?

    >
    > This is the HTML code
    >
    > <a href="http://foo.com" class='external-link' >Some Stuff</a>
    >
    > And the CSS will contain something like this:
    >
    > a.external-link:after {
    > content : " \21D2" url(/images/inline-icon-external-link.gif);
    > text-decoration: none;
    > }
    >
    >
    > This is from one of my own sites - not exactly the same as Wiki.
    >
    > The key is to use a CSS "content" rule. You can put text, odd
    > characters by code or images in there.
    >
    > It's not done with CSS "background-image", as that won't align
    > correctly for this purpose.


    Thank you,
    Sorry, the image/symbol was actually not related to the
    question I was trying to ask see my reply to David Dorward
    for what I was trying to do.
    T.J., Apr 18, 2005
    #7
  8. T.J.

    Andy Dingley Guest

    On Sun, 17 Apr 2005 18:10:45 +0100, "T.J." <> wrote:

    ><a href="http://wikitravel.org/en/article/Amsterdam" class='external'
    >title="http://wikitravel.org/en/article/Amsterdam">Wikitravel</a>
    ><span
    >class='urlexpansion'> (<i>http://wikitravel.org/en/article/Amsterdam</i>)</span>
    >
    >From what I have found out, it appears it is to make the url display next to
    >the text when in printing out the page.
    >How can I achieve the same effect?



    Use the CSS print media selector

    You can link to a default stylesheet with most things in it and a second one that's only used for printing. This needs
    to be done on every page.

    <link rel="stylesheet" type="text/css" href="/styles/main.css" />
    <link rel="stylesheet" type="text/css" media="print" href="/styles/printonly.css" />


    Or more easily, add a print-only section to the bottom of your existing stylesheet. The following example will do it
    (and some other things you can probably work out for yourself)



    /*
    Print control
    */

    ..urlexpansion {
    display: none;
    visibility: hidden;
    }

    ..print-only{
    display: none;
    visibility: hidden;
    }


    @media print {

    body {
    background-image: none ! important;
    background-color: #ffffff ! important;
    color : black ! important;
    }

    .urlexpansion {
    display: inline ! important;
    visibility: visible;
    }

    /* Mark up any small sections for non-printing */
    .no-print {
    display: none ! important;
    visibility: hidden;
    }

    div.print-only {
    display: block ! important;
    visibility: visible;
    }

    span.print-only {
    display: inline ! important;
    visibility: visible;
    }

    div.print {
    display: block ! important;
    visibility: visible;
    }

    span.print {
    display: inline ! important;
    visibility: visible;
    }
    }
    --
    Cats have nine lives, which is why they rarely post to Usenet.
    Andy Dingley, Apr 18, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kevin Spencer

    Re: Link Link Link DANGER WILL ROBINSON!!!

    Kevin Spencer, May 17, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    800
    Kevin Spencer
    May 17, 2005
  2. Scott Allen
    Replies:
    8
    Views:
    10,907
    Scott Allen
    May 2, 2004
  3. baumann@pan
    Replies:
    1
    Views:
    732
    Richard Bos
    Apr 15, 2005
  4. Song Ma
    Replies:
    2
    Views:
    221
    Charles Oliver Nutter
    Jul 20, 2008
  5. Replies:
    6
    Views:
    1,736
Loading...

Share This Page