Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > external link symbol at wikipedia?

Reply
Thread Tools

external link symbol at wikipedia?

 
 
T.J.
Guest
Posts: n/a
 
      04-17-2005
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


 
Reply With Quote
 
 
 
 
David Dorward
Guest
Posts: n/a
 
      04-17-2005
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-se...ute-substrings

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
 
Reply With Quote
 
 
 
 
T.J.
Guest
Posts: n/a
 
      04-17-2005

"David Dorward" <(E-Mail Removed)> wrote in message
news:d3u2e2$5ms$2$(E-Mail Removed)...
> 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-se...ute-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'>&#160;(<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?


 
Reply With Quote
 
David Dorward
Guest
Posts: n/a
 
      04-17-2005
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
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      04-18-2005
On Sun, 17 Apr 2005 17:09:14 +0100, "T.J." <(E-Mail Removed)> 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.
 
Reply With Quote
 
T.J.
Guest
Posts: n/a
 
      04-18-2005

"David Dorward" <(E-Mail Removed)> wrote in message
news:d3u75m$bal$1$(E-Mail Removed)...
> 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?


 
Reply With Quote
 
T.J.
Guest
Posts: n/a
 
      04-18-2005

"Andy Dingley" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On Sun, 17 Apr 2005 17:09:14 +0100, "T.J." <(E-Mail Removed)> 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.


 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      04-18-2005
On Sun, 17 Apr 2005 18:10:45 +0100, "T.J." <(E-Mail Removed)> wrote:

><a href="http://wikitravel.org/en/article/Amsterdam" class='external'
>title="http://wikitravel.org/en/article/Amsterdam">Wikitravel</a>
><span
>class='urlexpansion'>&#160;(<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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
(Encryption Package) error: cannot find symbol symbol: class BaseNCode clusardi2k@aol.com Java 6 08-29-2012 08:33 PM
Why ":symbol" failed but 'symbol' successed with JRuby 1.0.3? Song Ma Ruby 2 07-20-2008 04:08 AM
Re: Link Link Link DANGER WILL ROBINSON!!! Kevin Spencer ASP .Net 0 05-17-2005 10:41 AM
what's differnece between #ifdef symbol and #if defined(symbol) baumann@pan C Programming 1 04-15-2005 08:25 AM
unresolved external symbol/using an external dll Scott Allen C++ 8 05-02-2004 06:11 PM



Advertisments