«

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. 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

"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-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?

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

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.

"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?

"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.

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'>&#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.