Antje Bijken: einfügen von Graphiken über definiertes CSS?

Hallo!

Ich hoffe, jemand von Euch kann mir bei meinem CSS Problem weiterhelfen:

Geht es, und wenn ja wie, dass ich ein CSS schreibe, welches mir automatisch an einer definierten Stelle eine Graphik einfügt? Klingt schwer verständlich, also ein Beispiel:

Ich habe auf einer Seite viele Links, nun soll ein CSS dafür sorgen, dass vor jedem Link ein Linksymbol erscheint, etwa eine Pfeilgraphik.

Aus:

"Zum Forumsarchiv"

würde dann:

"->Zum Forumsarchiv"

Für jede Hilfe wäre ich dankbar.
Gruss und Kuss,
Antje

  1. Hi,

    Geht es, und wenn ja wie, dass ich ein CSS schreibe, welches mir automatisch an einer definierten Stelle eine Graphik einfügt? Klingt schwer verständlich, also ein Beispiel:

    Ich habe auf einer Seite viele Links, nun soll ein CSS dafür sorgen, dass vor jedem Link ein Linksymbol erscheint, etwa eine Pfeilgraphik.

    ja, durch Verwenden des Pseudo-Elements :before und der content-Property:

    a:link:before { content:url(Pfad/zum/Bild.png); }

    Beachte aber: technisch veraltete Browser (Netscape 4.7, Internet Explorer 6.0, ...) zeigen das Bild nicht an.

    cu,
    Andreas

    --
    Der Optimist: Das Glas  ist halbvoll.  - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
    http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/
    1. Beachte aber: technisch veraltete Browser (Netscape 4.7, Internet Explorer 6.0, ...) zeigen das Bild nicht an.

      Danke Andreas!
      Gibt es denn vielleicht noch eine Browserübergreifende Möglichkeit? Wenn der IE das nicht korrekt interpretiert, haben 90 Prozent der User ja nichts davon...

      1. Hallo,

        Gibt es denn vielleicht noch eine Browserübergreifende Möglichkeit? Wenn der IE das nicht korrekt interpretiert, haben 90 Prozent der User ja nichts davon...

        Allenfalls kannst Du versuchen, es mit einem Hintergrundbild und entsprechendem Padding
        zu loesen.
        a { padding-left:20px; background:url(pfeil20x20.gif) top left no-repeat; }

        Gruesse,

        Thomas

        1. Hallo,

          "früher" haben die Leute immer geschimpft, wenn man Würgarounds für Netscape 4 basteln mußte. Ich bin erstaunt darüber, daß die Klagen über den IE bisher so leise ausfallen (von ein paar Stimmen mal abgesehen). Sollte es sich zum Gros der "Webdesigner" noch nicht rumgesprchen haben, was für gewaltige Kräfte in Mozilla, Opera und Co. schlummern...?

          Viele Grüße
          Carsten

          1. Hi,

            "früher" haben die Leute immer geschimpft, wenn man Würgarounds für Netscape 4 basteln mußte. Ich bin erstaunt darüber, daß die Klagen über den IE bisher so leise ausfallen

            dito. Mir fiel da spontan die Lautfolge "au, au, au" ein ...

            a[href*="://self"][href*=".teamone.de"]:before { content:url('/images/selflink.png'); }

            Wer's nicht kann, zeigt's nicht an.

            Cheatah

            --
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Ich selbst bin auch begeisterte Userin von Mozilla. Und dort funktioniert auch beides oben geschilderte.
              Aber was habe ich davon, wenn diese Zeile:

              a:visited {padding-left:20px;  background:url(../pic/link.gif) left no-repeat; }

              vom IE so falsch interpretiert wird, dass die Graphik immer das Padding ignoriert (und damit die Graphik immer unter dem Link sitzt)?

              Weiss jemand einen Rat?

              Antje

              1. Hallo ,

                Aber was habe ich davon, wenn diese Zeile:
                  a:visited {padding-left:20px;  background:url(../pic/link.gif) left no-repeat; }
                vom IE so falsch interpretiert wird, dass die Graphik immer das Padding ignoriert (und damit die Graphik immer unter dem Link sitzt)?

                Ist das wirklich nur bei visited so?

                Jeena Paradies

                --
                Ihr wisst ja nichts ist besser als Bass.
                1. Ist das wirklich nur bei visited so?

                  Nein nein, es ist bei jedem Parameter so. Die Paddings wirken sich nicht auf das Background Image aus. Ich bin ratlos.

                  Antje

                  1. Hi Antje,

                    das padding kann sich auch nicht auf das Image auswirken. Es wirkt auf den Link der nach links verschoben wird. Du  musst das Image richtig bauen.

                    Guck dir mal mein Beispiel an:

                    [link=http://grassegger.at/xperimente/css_pfeil/]CSS Pfeil[url]

                    HTML Seite:
                    http://grassegger.at/xperimente/css_pfeil/index.php

                    Grafik:
                    http://grassegger.at/xperimente/css_pfeil/pfeil.gif

                    HTH

                    Rene

                    HTH

                    1. sorry antje,

                      richtiger Link

                      http://grassegger.at/xperimente/css_pfeil/

                      HTH

                      Rene

                      1. Hi,

                        aber  mitten im Text ist das wegen display:block; ja nicht nutzbar...
                        daher nutze ich auch die reine css-lösung und verzichte halt darauf, daß der ie das darstellt..;-)
                        freundliche Grüße
                        Ingo

                        1. Hallo ,

                          daher nutze ich auch die reine css-lösung und verzichte halt darauf, daß der ie das darstellt..;-)

                          Ja würde ich auch machen.

                          Jeena Paradies

                          --
                          Ihr wisst ja nichts ist besser als Bass.
                      2. Hallo Rene,

                        Meine Lösung war exakt die gleiche, wie die von Dir, jedoch funktioniert Deine Version, weil sie "display:block" einsetzt.
                        Das ist bei mir jedoch nicht möglich, da die Links in Texten erscheinen sollen und damit nicht als Block stehen dürfen. Und wenn man "display:block" weglässt, dann funktioniert's auch schon gleich nicht mehr im IE.
                        Hast Du villeicht noch einen Tip für mich?

                        Gruss, Antje

                        1. Hallo,

                          Hast Du villeicht noch einen Tip für mich?

                          Lesen lernen? [pref:t=58929&m=331190]

                          Grüße
                          Thomas

                        2. Hallo Antje,

                          wenn ich display: inline; reinschreibe funktionierts bei mir unter Win/Xp IE 6.0 trotzdem.

                          Das display: block; war nur aus Faulheit, des Erstellers.

                          HTH

                          Werner

                          1. Danke.
                            Aber leider nicht unter IE 5x, und das ist ja noch die grosse Mehrheit, wenn ich mich nicht irre. Wenn es nun beim 5er nicht interpretiert werden würde, ok, aber mit der Graphik _unter_ dem Linktext kann man sich einfach nicht arrangieren.

                            1. Hallo,

                              Aber leider nicht unter IE 5x, und das ist ja noch die grosse Mehrheit, wenn ich mich nicht irre.

                              Ich habe jetzt aus Neugier die letzen 6 Monate von meiner eigenen Webseite ausgewertet:
                              Habe nur Browser in die Auswertung bezogen die sich mit "Mozilla/4.0" zu identifizieren anfangen (also so gut wie alle IE-Varianten):
                              davon sind:
                              56,11% IE 6
                               0,54% IE 6.0b
                              18,10% IE 5.5
                               6,40% IE 5.0
                               7,96% IE 5.1 bzw. 5.0x (wie IE 5.1x (Mac) oder IE 5.01 etc.)
                               0,59% IE 5.2x (Mac)
                               1,39% IE 4.x

                              8.91% andere Useragents, die sich zwar als "Mozilla/4.0" aber nicht als IE identifizieren.

                              Das spricht doch eine deutliche Sprache, finde ich.

                              Grüße
                              Thomas

              2. Hallo,

                a:visited {padding-left:20px;  background:url(../pic/link.gif) left no-repeat; }
                vom IE so falsch interpretiert wird, dass die Graphik immer das Padding ignoriert (und damit die Graphik immer unter dem Link sitzt)?

                Naja, das hatte ich befuerchtet. Mein Vorschlag war auch "aus dem hohlen Bauch heraus",
                ohne Praxistest...

                Padding ist eigentlich nur bei Block-Level-Elementen sinnvoll, aber <A> ist ja
                ein Inline-Element. Und a { display:block; } ist wohl nicht gerade, was Du Dir wuenschst.

                Anstatt Padding koenntest Du ein   an den Anfang jedes Links setzen:
                <a href="url"> Externer Link</a>
                Ist natuerlich auch nur quick-and-dirty, sogar "very dirty"...

                Korrekte Loesungen:

                • CSS :before - unter Verzicht auf MS IE...
                • HTML <img> hardcoded im Link drin - aufwendig, aber zuverlaessig

                Gruesse,

                Thomas

                1. Hi,

                  Padding ist eigentlich nur bei Block-Level-Elementen sinnvoll,

                  http://www.w3.org/TR/CSS21/box.html#propdef-padding sagt etwas anderes.

                  Anstatt Padding koenntest Du ein   an den Anfang jedes Links setzen:

                  WAH! Workarounds werden nicht besser, wenn man sie workarounded.

                  Ist natuerlich auch nur quick-and-dirty, sogar "very dirty"...

                  Ja, allerdings ... :-)

                  Korrekte Loesungen:

                  • CSS :before - unter Verzicht auf MS IE...

                  Eventuell mal einen bis n Bugreports an Microsoft schicken, dass seit 1998 verfügbare und _deutlich_ dem Leistungsziel der Software entsprechen, noch immer nicht umgesetzt sind.

                  • HTML <img> hardcoded im Link drin - aufwendig, aber zuverlaessig

                  Jepp. Ich empfehle die CSS-Lösung, denn: Was ist so schlimm daran, dass die Darstellung je nach Qualität der Software unterschiedlich ist?

                  Cheatah

                  --
                  X-Will-Answer-Email: No
                  X-Please-Search-Archive-First: Absolutely Yes
                  1. Jepp. Ich empfehle die CSS-Lösung, denn: Was ist so schlimm daran, dass die Darstellung je nach Qualität der Software unterschiedlich ist?

                    Tja, weil Fatalismus selten eine Lösung für einen unzufriedenen Kunden darstellt. Was nützt das Meckern über eine wie wir alle wissen schlechte Standartsoftware, wenn sie nunmal und definitiv unterstützt werden muss.

                    1. Hi,

                      Jepp. Ich empfehle die CSS-Lösung, denn: Was ist so schlimm daran, dass die Darstellung je nach Qualität der Software unterschiedlich ist?

                      Tja, weil Fatalismus selten eine Lösung für einen unzufriedenen Kunden darstellt. Was nützt das Meckern über eine wie wir alle wissen schlechte Standartsoftware, wenn sie nunmal und definitiv unterstützt werden muss.

                      was ist denn "Unterstützung"? "Sieht so aus wie bei anderen", oder "liefert bestmögliche Ergebnisse"? Was ist so schlimm daran, wenn etwas mit besserer Software besser ist - und was ist eigentlich so schlimm daran, es _so herum_ zu betrachten, anstatt festzustellen, dass es mit schlechterer Software schlechter ist?

                      Cheatah

                      --
                      X-Will-Answer-Email: No
                      X-Please-Search-Archive-First: Absolutely Yes
                      1. Tja weil der Kunde es nicht mit dieser Ideologie sehen mag, sondern im Zuge von Design und Konzept auf eine Lösung festgelegt ist. In diesem Fall bestimmen Design und Ästhetik den technischen Aufwand.

                2. Hallo,

                  Padding ist eigentlich nur bei Block-Level-Elementen sinnvoll, aber <A> ist ja
                  ein Inline-Element. Und a { display:block; } ist wohl nicht gerade, was Du Dir wuenschst.

                  Sie kann aber auch
                  a { display:inline-block; }
                  verwenden.

                  Der IE (6) wird das verstehen.

                  Grüße
                  Thomas

          2. Hallo ,

            "früher" haben die Leute immer geschimpft, wenn man Würgarounds für Netscape 4 basteln mußte. Ich bin erstaunt darüber, daß die Klagen über den IE bisher so leise ausfallen (von ein paar Stimmen mal abgesehen). Sollte es sich zum Gros der "Webdesigner" noch nicht rumgesprchen haben, was für gewaltige Kräfte in Mozilla, Opera und Co. schlummern...?

            Mensch gerade wollte ich schreiben: "Na typisch wieder mal der IE immer das gleiche"

            Jeena Paradies

            --
            Ihr wisst ja nichts ist besser als Bass.
          3. Hallo,

            "früher" haben die Leute immer geschimpft, wenn man Würgarounds für Netscape 4 basteln mußte. Ich bin erstaunt darüber, daß die Klagen über den IE bisher so leise ausfallen (von ein paar Stimmen mal abgesehen). Sollte es sich zum Gros der "Webdesigner" noch nicht rumgesprchen haben, was für gewaltige Kräfte in Mozilla, Opera und Co. schlummern...?

            Doch, aber wen interessiert das, wenn es sich nicht beim Gros der Nutzer geschweige denn beim Gros der IE-Entwickler herumgesprochen hat?

            Gruß,

            MI

            --
            XFrames Working Draft (Deutsche Übersetzung) : http://jendryschik.de/TR/xframes/
            Die Wissensgesellschaft : http://jendryschik.de/michael/inf/wissensgesellschaft/
            Einführung in XHTML, CSS und Webdesign: http://jendryschik.de/wsdev/einfuehrung/
            Feste Positionierung, richtig angewandt : http://jendryschik.de/wsdev/css/fixed/
            sh:( fo:) rl:( br:& br:] ' n4:& | n4:? ' ie:| va:) de:] zu:) fl:{ ss:| ls:& js:|
        2. Super Tipp!

          Seid umarmt, viele Grüsse,
          Danke, Antje

  2. Hallo,

    Ich habe auf einer Seite viele Links, nun soll ein CSS dafür sorgen, dass vor jedem Link ein Linksymbol erscheint, etwa eine Pfeilgraphik.

    <html>
    <head>
     <title>Untitled</title>
     <style type="text/css">
      a {
       display:inline-block;
       background-image:url(grafik.gif);
       background-position:left;
       background-repeat:no-repeat;
       padding-left:20px;
      }
     </style>
    </head>

    <body>

    <a href="blablabla.hmtl">blablabla</a> | <a href="blablabla.hmtl">blablabla</a>
    <br>
    </body>
    </html>

    Grüße
    Thomas

    1. Danke.
      Gleiches Problem wie gehabt: läuft nicht unter IE5.

      1. Hallo,

        Danke.
        Gleiches Problem wie gehabt: läuft nicht unter IE5.

        Sorry, aber wer hat noch IE 5??? Und bitte erzähle mir jetzt nicht, dass 90% User den benutzen.
        ------
        Aber leider nicht unter IE 5x, und das ist ja noch die grosse Mehrheit, wenn ich mich nicht irre.
        -------
        Kurz: du irrst dich.

        Gut, zugegeben unter IE 5.5 wird es auch nicht gehen.
        Aber du dekst trotzdem IE 6, Mozilla 1.4 --> Netscape 7.x damit ab und das sind immerhin 60% - 70% der User.

        Da ich den IE 5.0 seit mehreren Jahren nicht mehr habe, kann ich es nicht ausprobieren, aber  M$ Sagt dazu (zu padding):
        --------
        As of Microsoft® Internet Explorer 5.5, this property applies to inline elements. With earlier versions of Internet Explorer, inline elements must have an absolute position or layout to use this property. Element layout is set by providing a value for the height property or the width property.
        --------

        Also ich würde sagen, du versuchst es mit "width:auto;" und padding: für a, damit sollte auch der 5-er klarkommen.

        Übringes, ich hoffe du verrechnest deinem Kunden diesen riesen Aufwand!

        Grüße
        Thomas