Marco Krip: Automatisch Zeichen oder Grafik anfügen

Hi!

Kann ich mit CSS festlegen das bei einem bestimmten Tag immer ein von mir festgelegtes Zeichen oder eine kleine Grafik angefügt wird. Beispielsweise ein kleiner Pfeil nach rechts-oben (Grafik) für bestimmte links oder einfach ein ">" (ascii) hinter einer von mir definierten CSS-Klasse.

Gruß
Marco

  1. Hi Marco!

    Kann ich mit CSS festlegen das bei einem bestimmten Tag immer ein von mir festgelegtes Zeichen oder eine kleine Grafik angefügt wird.

    Klar. Hilfe findest du bei Selfhtml oder im Archiv.

    Ich würde das mit einer Hintergrundgrafik lösen, die entsprechend positioniert ist. Der Text wird mit einem bestimmten Innenabstand so eingerückt, dass die Grafik gut sichtbar ist.

    MfG H☼psel

    --
    "It's amazing I won. I was running against peace, prosperity, and incumbency."
    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
  2. Moin Marco!

    »»[...] Beispielsweise ein kleiner Pfeil nach rechts-oben (Grafik) für bestimmte links [...]

    Genau sowas haben wir bei uns für Links, die auf externe Webseiten führen, quasi als Entscheidungshilfe für den Benutzer, ob er den Link in einem neuen Fenster öffnen möchte. Das funktioniert im Firefox recht bequem über den Link selbst:  Beginnt er mit "http:" oder "https:" so bekommt er automatisch die Grafik davor.
    Das sieht dann so aus wie auf http://www.brettspielwelt.de/Community/. Die Links in den beiden letzten Absätzen verweisen auf externe Seiten.
    Für andere Browser sehen die Links aus wie alle Anderen, aber Nutzer eines vernünftigen Browsers dürfen gerne auch etwas Komfort genießen ;)

    Das CSS dazu sieht folgendermaßen aus und die Idee entstammt dem YAML-Framework:

      
    #col3 a[href^="http:"], #col3 a[href^="https:"],  
    #col1 p a[href^="http:"], #col1 p a[href^="https:"],  
    #col2 p a[href^="http:"], #col2 p a[href^="https:"]  
    {  
     padding-left: 12px;  
     background-image: url('../img/ext_link.gif');  
     background-repeat: no-repeat;  
     background-position: left;  
    }
    

    Grüße,

    Stefan

    1. Hi,

      Das CSS dazu sieht folgendermaßen aus und die Idee entstammt dem YAML-Framework:

      #col3 a[href^="http:"], #col3 a[href^="https:"],
      #col1 p a[href^="http:"], #col1 p a[href^="https:"],
      #col2 p a[href^="http:"], #col2 p a[href^="https:"]
      {
      padding-left: 12px;
      background-image: url('../img/ext_link.gif');
      background-repeat: no-repeat;
      background-position: left;
      }

        
      warum nicht einfach:  
      ~~~css
        
      a[href^="http"]:before {  
        content:url('../img/ext_link.gif');  
      }  
      
      

      freundliche Grüße
      Ingo

      1. warum nicht einfach:

        a[href^="http"]:before {
          content:url('../img/ext_link.gif');
        }

        Weil das schlechtere browser (wie IE) nicht können?

        1. Hallo Jonathan.

          warum nicht einfach:

          a[href^="http"]:before {
            content:url('../img/ext_link.gif');
          }

          Weil das schlechtere browser (wie IE) nicht können?

          Stefans Vorschlag aber ebenso nicht. Ingos Vorschlag ist eine Vereinfachung.

          Einen schönen Freitag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
          1. Hat denn eine der Varianten sonst noch Vor- oder Nachteile gegenüber der anderen?

            Grüße,

            Stefan

            1. Hallo Stefan.

              Hat denn eine der Varianten sonst noch Vor- oder Nachteile gegenüber der anderen?

              Bei deinem Vorschlag muss der Client „nur“ die erweiterten Attributselektoren aus CSS Level 3 beherrschen; bei Ingos Variante ist zusätzlich noch die Kenntnis über die Pseudoelemente erforderlich.

              Wenn aber ein Client Teile aus CSS Level 3 beherrscht, kann man eigentlich davon ausgehen, dass er mit den Pseudoelementen aus CSS Level 2 keine Probleme hat.

              Vorteil an der Arbeit mit dem ::before-Pseudoelement: es ist ebenso wie normale Elemente frei formatierbar, kann also z. B. einen gesonderten Hintergrund, Rahmen oder dergleichen erhalten. Bei einer Hintergrundgrafik ist dies nur mit Trickserei und nur eingeschränkt möglich.
              Zudem hält man sich hier frei, den Links eine eigene Hintergrundgrafik verpassen zu können, welcher Platz bei deiner Variante ja schon mit der Markierungsgrafik belegt ist.

              Momentan zeichne ich meine eigenen Links noch mit class="external" aus und formatiere sie deiner Variante entsprechend. Besser gefallen würde mir dagegen ein Attributselektor, angesetzt auf rel="external", aber wir wissen ja, wer da wieder nicht mitspielt.

              Einen schönen Samstag noch.

              Gruß, Ashura

              --
              sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
              „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
              [HTML Design Constraints: Logical Markup]
              1. Hi,

                Wenn aber ein Client Teile aus CSS Level 3 beherrscht, kann man eigentlich davon ausgehen, dass er mit den Pseudoelementen aus CSS Level 2 keine Probleme hat.

                Wenn ich meinen Kurztest gestern mit dem IE 7 richtig in Erinnerung hab (ist im Büro, hier hab ich kein XP), dann kann der IE 7 Beta 3 zwar die [attr=bla]-Selectoren (auch die mit ^= usw.), aber versagt bei :after und :before.

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                Schreinerei Waechter
                O o ostern ...
                Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                1. Hallo MudGuard.

                  Wenn ich meinen Kurztest gestern mit dem IE 7 richtig in Erinnerung hab (ist im Büro, hier hab ich kein XP), dann kann der IE 7 Beta 3 zwar die [attr=bla]-Selectoren (auch die mit ^= usw.), aber versagt bei :after und :before.

                  Du hast recht. Wie gut, dass ich „eigentlich“ schrieb …

                  Einen schönen Samstag noch.

                  Gruß, Ashura

                  --
                  sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
                  „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
                  [HTML Design Constraints: Logical Markup]
        2. Hi,

          a[href^="http"]:before {
            content:url('../img/ext_link.gif');
          }

          Weil das schlechtere browser (wie IE) nicht können?

          die verstehen auch [href^="http"] nicht - also kein Grund, dann auf :before zu verzichten.

          Allerdings ist [href^="http:"] zumindest im Firefox unsinnig, da auch interne Links vor der CSS-Formatierung komplettiert werden und es dann keine Unterscheidung zwischen internen und externen Links über das Protokoll mehr gibt.

          freundliche Grüße
          Ingo

          1. Hallo Ingo.

            Allerdings ist [href^="http:"] zumindest im Firefox unsinnig, da auch interne Links vor der CSS-Formatierung komplettiert werden und es dann keine Unterscheidung zwischen internen und externen Links über das Protokoll mehr gibt.

            Hast du dies ausprobiert? Dem ist nicht so und ich wüsste auch nicht, warum Firefox hier anders reagieren sollte.

            Einen schönen Freitag noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
            1. Hi,

              Hast du dies ausprobiert? Dem ist nicht so und ich wüsste auch nicht, warum Firefox hier anders reagieren sollte.

              Ja hatte ich. Nur dummerweise an einer Seite, in der die einzigen internen Links über
              if(x) x.href += d[i]+".html";
              modifiziert wurden. Und hierbei wird offensichtlich nicht nur ein Dateiname angehängt, sondern auch das Protokoll vorangestellt...

              freundliche Grüße
              Ingo

              1. Hi,

                Hast du dies ausprobiert? Dem ist nicht so und ich wüsste auch nicht, warum Firefox hier anders reagieren sollte.
                Ja hatte ich. Nur dummerweise an einer Seite, in der die einzigen internen Links über
                if(x) x.href += d[i]+".html";
                modifiziert wurden. Und hierbei wird offensichtlich nicht nur ein Dateiname angehängt, sondern auch das Protokoll vorangestellt...

                Richtig, beim Auslesen der .href-Eigenschaft wird eine vollständige URL geliefert. Und
                x.href += bla
                ist ja nur eine Kurzschreibweise für
                x.href = x.href + bla

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                Schreinerei Waechter
                O o ostern ...
                Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.