✔ Nord-Ost Pfeil vor allen Links

[ZodiacXP]

Moin Maik und auch alle anderen

Es sollen alle Links einen NO-Pfeil erhalten die nicht nur aus einem img bestehen:

<style type="text/css">
  a[href^="http://"]::before, a[href^="https://"]::before {
    content : "\2197\00A0";
  }
</style>

<!-- Dieser Link ohne Pfeil davor -->
<a href="http://del.icio.us/post?url={Url}">
  <img src="http://l.yimg.com/hr/10316/img/delicious16.gif" />
</a>

<!-- Dieser Link mit weil er nicht nur aus Bild besteht -->
<a href="http://www.mister-wong.de/index.php?action=addurl&amp;bm_url={Url}">
  Mister Wong
  <img src="http://www.mister-wong.de/img/buttons/logo16_blue.gif" />
</a>

Kann auch <span>Mister Wong</span> sein. Egal. Ich find kein Weg das mit first child oder sonstwas zu lösen.

 

[Maik]

Hi,

und wieso definierst du den NO-Pfeil nicht mit einer eigens erstellten Grafik als Hintergrundbild, denn mit der content-Eigenschaft schliesst du zumindest schon mal den IE/Mac und IE/Win (auch in der aktuellen Version) aus.

mfg Maik

 

[Maik]

So, hab mal kurz meine CSS-Bookmarks durchstöbert, et voilà: Iconize Textlinks with CSS - pooliestudios.

Wenn du nun noch in einem IE-spezifischen Stylesheet (mittels des "Conditional Comments") auf den Attribut-Selektor verzichtest, wissen sogar die älteren IEs bis einschliesslich dem IE6 das Stylesheet zu interpretieren.

mfg Maik

 

[ZodiacXP]

God damn it. Was kann der IE überhaupt?

<style type="text/css">
  a[href^="http://"], a[href^="https://"] {
    padding-left : 12px;
    background : url('no-arrow.gif') no-repeat left center; // 10x10 gif
  }

  a[href^="http://"], a[href^="https://"] {
    border-bottom : 0.01em solid #00f;
    text-decoration : none;
  }
</style>

<!-- Dieser Link ohne Pfeil davor -->
<a href="http://del.icio.us/post?url={Url}">
  <img src="http://l.yimg.com/hr/10316/img/delicious16.gif" />
</a>

<!-- Dieser Link mit weil er nicht nur aus Bild besteht -->
<a href="http://www.mister-wong.de/index.php?action=addurl&amp;bm_url={Url}">
  Mister Wong
  <img src="http://www.mister-wong.de/img/buttons/logo16_blue.gif" />
</a>

So. Nun dürfte nur noch <=IE5 unter Win Probleme haben, was mir relativ egal ist.
Nur mit welchem Trick (egal wie kompatibel) verhindert man die Anzeige bei Bildlinks?

a[href^="http://"] > img {
  margin-left : -12px;
}

Ist da nicht so das wahre. Vor allem ein Pfeil für alle Schriftgrößen...

 

[Maik]

Nur mit welchem Trick (egal wie kompatibel) verhindert man die Anzeige bei Bildlinks?

Indem du diese Links mit einer Klasse (hier: .noIcon) auszeichnest:

a.noIcon {
padding-left:0;
background:none;
}

mfg Maik

 

[ZodiacXP]

Tut mir leid. Suche eine Lösung ohne Klassen.
Am HTML sollte sich nichts ändern. Nur im CSS.

 

[Maik]

Dann such mal.

mfg Maik