Grafisches Element an Textlänge anpassen

Hallo zusammen ich habe folgendes Problem:

Ich will auf meiner Webseite ein Tag-System integrieren und hab mir dazu folgendes überlegt:



Wie man hier sieht habe ich das "Tag" in 3 Teile geschnitten, tl.png, tm.png und tr.png (left, mid, right).. Nun hab ich mir das so überlegt, dass ich es mit befor7after mache, aber das geht nicht.

Mein Code:

<style type="text/css">
  a.tag:before {
      content: url(tag_left.png);
  }
  a.tag:after {
      content: url(tag_right.png);
  }
  a.tag {
      background:url(tag_middle.png) repeat-x;
      height:25px;
      line-height:25px;
      color:#996633;
      text-shadow:0px 1px #rgba(0,0,0,0.7);
      text-decoration:none;
  }
</style>

<a href="#" class="tag">hihihi</a>

Das Ergebnis;


Hab schon mit padding und margin rumprobiert aber bisher keinen erfolg.. hoffe jemand kann mir weiterhelfen.. Dankeee

Versuchs mal damit:

<style type="text/css">
  a.tag:before {
      content: '<span class="tag"><span class="tag-before"></span>';
  }
  a.tag:after {
      content: content: '<span class="tag-after"></span></span>';
  }
  span.tag {
      height: 25px;
      line-height: 25px;
  }
  span.tag-before {
      background: url(tag_left.png) no-repeat;
  }
  span.tag-after {
      background: url(tag_right.png) no-repeat;
  }
  a.tag {
      background: url(tag_middle.png) repeat-x;
      color: #996633;
      text-shadow: 0px 1px #rgba(0,0,0,0.7);
      text-decoration: none;
  }
</style>

<a href="#" class="tag">hihihi</a>

Ungetestet.

Leider nicht

Zitat von moreplz

Hab schon mit padding und margin rumprobiert aber bisher keinen erfolg..

Die sollten nicht nötig sein.
Deine height-Angabe darf aber keine Wirkung zeigen, so lange das A als inline-Element dargestellt wird.
display:inline-block oder floating schaffen Abhilfe.

Zitat von onemorenerd

Versuchs mal damit:

You still drunk ...?

<style type="text/css">
  a.tag:before {
      content: '<span class="tag"><span class="tag-before"></span>';
  }

Die content-Eigenschaft fügt Text ein* - und dass moreplz den Textinhalt, den du hier angibst, im Dokument stehen haben will, bezweifle ich doch.


* oder Bilder/Quotes/Counter

@wahsaga das mit dem quelltext komm noch hinzu

hab nun mit viel hin und her etwas hinbekommen:

<style type="text/css">
  a.tag:before {
      content: url(tag_left.png);
      float:left;
  }
  a.tag:after {
      content: url(tag_right.png);
      float:right;
  }
  a.tag {
      height:25px;
      line-height:25px;
      color:#996633;
      text-shadow:0px 1px #rgba(0,0,0,0.7);
      text-decoration:none;
      display:inline-block;
  }
  a.tag span {
      width:100px;
      float:left;
      background:url(tag_middle.png) repeat-x;
}
</style>

<a href="#" class="tag"><span>hihihi</span></a>

Somit funktioniert es wunderbar, wer aber noch ne ander möglichkeit hat die evtl. besser wäre, nur her damit

Zitat von moreplz

Somit funktioniert es wunderbar, wer aber noch ne ander möglichkeit hat die evtl. besser wäre, nur her damit

Bevor ich mir das anschaue, solltest du wenigstens die einzelnen Grafiken verfügbar machen* - ich habe keine Lust, mir die jetzt aus der eingangs geposteten selber zurecht zu schneiden ...

* vorzugweise direkt über HTTP - dann reicht Firebug zum Herumprobieren, ohne noch irgendwas herunterladen, entpacken und irgendwo ablegen zu müssen.