Sven: content:"attr(href)")" http://domain.de auch b. relativen Links

Hallo,

meine für den Druck optimierte CSS-Datei enthält unter anderem folgendes:

body a:link:after, body a:visited:after {
color: #fff;
content: " (" url(../bilder/symbol.png) attr(href) ") ";
font-weight: normal;
font-size: 80%;
}

Ausgedruckt sieht

<p>Hier geht es zu den <a href="verzeichnis/links.html">Links</a> und hier zum <a href="anderesverzeichnis/impressum.html">Impressum</a>.</p>

dann in etwa so aus:

Hier geht es zu den Links (verzeichnis/links.html) und hier zum Impressum (anderesverzeichnis/impressum.html).

Wie kann ich die vollständige URL ausdrucken lassen, auch wenn interne Links aus relativen Pfadangaben bestehen?

Es sollte also wie folgt aussehen:

Hier geht es zu den Links (http://domain.de/verzeichnis/links.html) und hier zum Impressum (http://domain.de/anderesverzeichnis/impressum.html).

Grüße
Sven

  1. Hi,

    Wie kann ich die vollständige URL ausdrucken lassen, auch wenn interne Links aus relativen Pfadangaben bestehen?

    Es sollte also wie folgt aussehen:

    Hier geht es zu den Links (http://domain.de/verzeichnis/links.html) und hier zum Impressum (http://domain.de/anderesverzeichnis/impressum.html).

    Mit CSS AFAIK gar nicht.
    Aber was spricht dagegen, "http://domain.de/" im CSS mit anzugeben und die Links mit führendem / anzugeben?

    freundliche Grüße
    Ingo

    1. Aber was spricht dagegen, "http://domain.de/" im CSS mit anzugeben und die Links mit führendem / anzugeben?

      Da bin ich noch gar nicht draufgekommen. So werde ich es machen.

      content: " (" url(../bilder/symbol.png) http://domain.de/ attr(href) ") ";

      Viele Grüße
      Sven

      1. Hi,

        Da bin ich noch gar nicht draufgekommen. So werde ich es machen.

        content: " (" url(../bilder/symbol.png) http://domain.de/ attr(href) ") ";

        wohl besser so:
           content: " (" url(../bilder/symbol.png) "http://domain.de" attr(href) ") ";

        freundliche Grüße
        Ingo

        1. Hi,

          wohl besser so:

          noch besser wird es, wenn man den Selektor auf jene Werte des href-Attributs einschränkt, die mit einem "/" beginnen. Sonst wird die Ausgabe je nach Link-URL etwas ... merkwürdig :-)

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. noch besser wird es, wenn man den Selektor auf jene Werte des href-Attributs einschränkt, die mit einem "/" beginnen. Sonst wird die Ausgabe je nach Link-URL etwas ... merkwürdig :-)

            Cheatah spricht von der Verwendung eines CSS3-Attributselektors:

            a[href]:after { content: " " attr(href); }  
            a[href^="/"]:after { content: " http://domain.de/" attr(href); }
            

            (Das geht außer im Gecko und Konqueror auch im Opera, obwohl attr(href) dort die gesamte URI zurückgibt, nicht den tatsächlichen href-Attributwert.)

            1. Hi,

              a[href] gibt es übrigens schon in CSS 2 (so wie [attr~=value] und [attr|=value].

              (Das geht außer im Gecko und Konqueror auch im Opera, obwohl attr(href) dort die gesamte URI zurückgibt, nicht den tatsächlichen href-Attributwert.)

              Ja, diesen Bug hab ich vor längerer Zeit mal bei Opera gemeldet.
              Gefixt ist er immer noch nicht.

              Kennt Opera inzwischen auch die [attr^=value], [attr$=value] und [attr*=value]? Kurzer Test: nö. Aber er kennt [attr] und [attr=value]

              cu,
              Andreas

              --
              Warum nennt sich Andreas hier MudGuard?
              Schreinerei Waechter
              Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            2. Das ist ja genau das, was ich brauche. Ich werde versuchen, das einzubauen. Mal schauen, wie weit ich komme - so weitreichend sind meine CSS-Kenntnisse nämlich leider noch nicht. Ich bin vor allem mal gespannt, was der IE drucken wird.

              Wenn ich

              a[href]:after { content: " " attr(href); }
              a[href^="/"]:after { content: " http://domain.de/" attr(href); }

              allerdings richtig verstehe, müssten Links auf meiner Netzpräsenz nicht so:

              <a href="verzeichnis/links.html">Links</a>

              sondern so:

              <a href="/verzeichnis/links.html">Links</a>

              aussehen.

              Viele Grüße
              Sven

              1. Hi,

                Ich bin vor allem mal gespannt, was der IE drucken wird.

                er wird große Teile Deines CSS-Codes ignorieren, weil er solche Dinge wie :after, [href], content oder attr() nicht beherrscht. Das sind aber auch erst recht junge Techniken, von denen man nicht erwarten kann, dass sie in so kurzer Zeit in eine Software eingebaut werden können. CSS/2.0 wurde schließlich erst anno 1998 verabschiedet ...

                allerdings richtig verstehe, müssten Links auf meiner Netzpräsenz nicht so:
                <a href="verzeichnis/links.html">Links</a>
                sondern so:
                <a href="/verzeichnis/links.html">Links</a>
                aussehen.

                Ja. Es sei denn, Du schreibst den CSS-Code für jedes einzelne Verzeichnis; dann kannst Du auch für pfadrelative Links die URL korrekt erzeugen.

                Cheatah

                --
                X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                X-Will-Answer-Email: No
                X-Please-Search-Archive-First: Absolutely Yes