kleines bild vor einem link

[Herbert Dorfner]

hallo aus regensburg!

folgendes problem, ich moechte gerne dann vor jedem link der seitennavigation automatisch ein kleines bild angefuegt wird. leider finde ich bzw. fand ich bis jetzt nichts was mir wirklich geholfen hatt.

allesgute
herbert

[schwarze Piste]

Tachchen!

ich moechte gerne dann vor jedem link der seitennavigation automatisch ein kleines bild angefuegt wird.

Denke doch einmal nach über:

1. padding-left
2. background-image

3. einen Hack, der IEs < 5.5 von dieser Definition ausschließt,
   weil die das nicht verstehen (wenn ich das richtig im Kopf habe).

Gruß

Die schwarze Piste

[herbert dorfner]

also ich benoetige KEIN background bild sondern einen kleinen "Pfeil" vor dem jeweiligen link.

[schwarze Piste]

Tachchen!

also ich benoetige KEIN background bild sondern einen kleinen "Pfeil" vor dem jeweiligen link.

Da CSS aber keine Möglichkeit bietet, den HTML-Code zu verändern,
wirst du deinen Pfeil schon als Hintergrundbild einfügen müssen.

Gruß

Die schwarze Piste

[MudGuard]

Hi,

also ich benoetige KEIN background bild sondern einen kleinen "Pfeil" vor dem jeweiligen link.
Da CSS aber keine Möglichkeit bietet, den HTML-Code zu verändern,
wirst du deinen Pfeil schon als Hintergrundbild einfügen müssen.

Naja, CSS bietet noch eine andere Möglichkeit als das Hintergrundbild - generated Content.
Aber das scheidet vermutlich als Lösung für herbert aus, weil der IE zu blöd dafür ist.

cu,
Andreas

[herbert]

hier mein code:

a:link {
color: #000000;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(nav_arrow.gif);
background-repeat: no-repeat;
padding: 10;

leider funktioniert das padding nicht, was mach ich falsch?

url zur seite: http://www.egomedia.de/preview/hyginst/

allesgute
herbert

[Tobias Kloth]

Hallo Herbert,

padding: 10;

10 was? - außerdem darfst du nur padding-left angeben um den Text neben das Hintergrundbild zu bekommen.

Grüße aus Nürnberg
Tobias

[herbert]

hallo tobias,

habs grad rausgefunden trotzdem vilen dank fuer den tollen support der hier geleistet wird.

allesgute
herbert

[schwarze Piste]

Tachchen!

Naja, CSS bietet noch eine andere Möglichkeit als das Hintergrundbild - generated Content.

Diese Möglichkeit habe ich mit meiner Formulierung ja auch explizit _nicht_
ausgeschlossen!

Aber das scheidet vermutlich als Lösung für herbert aus, weil der IE zu blöd dafür ist.

Keine Ahnung! Am besten könnte er das entscheiden, wenn du _ihm_ diese
Möglichkeit inkl. ihrer Probleme nahe gelegt hättest.

Gruß

Die schwarze Piste

[herbert dorfner]

also ich bin jetzt nicht so der crack in dem bereich, hatt jemand evtl. einen beispiel code?

[Cybaer]

Hi,

also ich bin jetzt nicht so der crack in dem bereich, hatt jemand evtl. einen beispiel code?

Coding: Link-Kennzeichnung

Gruß, Cybaer

[Ashura]

Hallo herbert.

also ich benoetige KEIN background bild sondern einen kleinen "Pfeil" vor dem jeweiligen link.

Wie wäre es einfach mit ">" vor dem Link? *g*

Gruß, Ashura

[Elya]

Hallo Herbert,

folgendes problem, ich moechte gerne dann vor jedem link der seitennavigation automatisch ein kleines bild angefuegt wird. leider finde ich bzw. fand ich bis jetzt nichts was mir wirklich geholfen hatt.

eine gute Möglichkeit wäre, via CSS allen Links ein nicht-wiederholtes Hintergrundbild und von links einen entsprechenen Innenabstand (padding) dazu zu verpassen. Funktioniert im Großen und Ganzen, nur bei Umbrüchen innerhalb des Links zickt der IE ein wenig, aber das kannst du zur Not mit white-space:nowrap; für den Link umgehen.

Wenn innerhalb eines Selektors verschiedene Linktypen vorkommen, mit und ohne Hintergrundbild, ist die Verwendung von Klassen bei jedem betroffenen Links notwendig.

Gruß aus Köln-Ehrenfeld,

Elya

[mbr]

Hallo Herbert Dorfner

Also: ich werd mal versuchen, den Vorschlag von Elya und schwarze Piste in einem Beispiel zusammenzufassen. (glaube nämlich, dass du die Sache mit dem Hintergrundbild falsch verstanden hast - Man sieht ja nachher nicht, ob es sich um ein Hintergrundbild handelt, oder um ein normales Bild...) Somit sind die Tipps von den beiden glaub ich sehr gut.
Alle Fehler in dem Beispiel liegen selbstverständlich bei mir.
(hoffe, ihr nehmt mir nicht übel, EURE Tipps hier nochmal auszuwalzen.)

Also: in der HTML-Datei notierst du folgenden style-Bereich:

<style type="text/css">
<!--
  a:link.bild_link{
height:20px;
vertical-align:center;
color:#000000;
text-decoration:none;
font-size:10pt;
font-weight:bold;
padding-left:35px;
background-image:url(pfeil.png);
background-repeat:no-repeat;
}
a:visited.bild_link{
height:20px;
vertical-align:center;
color:#000000;
text-decoration:none;
font-size:10pt;
font-weight:bold;
padding-left:35px;
background-image:url(pfeil.png);
background-repeat:no-repeat;
}
a:active.bild_link{
height:20px;
vertical-align:center;
color:#000000;
text-decoration:none;
font-size:10pt;
font-weight:bold;
padding-left:35px;
background-image:url(pfeil.png);
background-repeat:no-repeat;
}
a:hover.bild_link{
height:20px;
vertical-align:center;
color:#0000FF;
text-decoration:none;
font-size:10pt;
font-weight:bold;
padding-left:35px;
background-image:url(pfeil.png);
background-repeat:no-repeat;
}
-->
</style>

(natürlich kann das auch in einer externen Datei stehen. Mehr zu CSS findest du bei SELFHTML)

im HTML-Code der Datei steht dann (z.Bsp.) folgender Link:

<a class="bild_link" href="ziel.html">neue Seite</a>

Das Bild muss natürlich im angegeben Verzeichnis zu finden sein...
(hier im Beispiel pfeil.png im selben Verzeichnis)
liebe Grüße

mbr

[Joerg]

Hi,

folgendes problem, ich moechte gerne dann vor jedem link der seitennavigation automatisch ein kleines bild angefuegt wird.

Ein CSS in der Art von "a.myclass:before {content:url(link.gif);}" definiert, dass vor allen a.myclass das Bild link.gif erscheinen soll. Das einzige Problem dabei ist, dass das noch lange nicht von allen Browsern so unterstuetzt wird ... daher fuege ich z.B. bei meiner eigenen Website solch ein "Link-Bild" im Text stets manuell ein. (Beispiel: http://homepage.sunrise.ch/mysunrise/joerg.hau/linux/index.htm)

Wenn Du dasselbe jedoch bei einer Liste machst (<ul class="externerlink">), funktioniert es problemlos. Beispiel: http://homepage.sunrise.ch/mysunrise/joerg.hau/linux/index.htm#links

Gruss aus Lausanne,

• Joerg