1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Grafisches Element an Textlänge anpassen

Dieses Thema im Forum "CSS" wurde erstellt von moreplz, 17. April 2011.

  1. moreplz

    moreplz Grünschnabel

    Hallo zusammen ich habe folgendes Problem:

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

    [​IMG]

    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:
    HTML:
    1. <style type="text/css">
    2.   a.tag:before {
    3.       content: url(tag_left.png);
    4.   }
    5.   a.tag:after {
    6.       content: url(tag_right.png);
    7.   }
    8.   a.tag {
    9.       background:url(tag_middle.png) repeat-x;
    10.       height:25px;
    11.       line-height:25px;
    12.       color:#996633;
    13.       text-shadow:0px 1px #rgba(0,0,0,0.7);
    14.       text-decoration:none;
    15.   }
    16.  
    17. <a href="#" class="tag">hihihi</a>
    18.  
    Das Ergebnis;
    [​IMG]

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

    CPoly Mitglied Weizenbier Premium-User

    Bevor du weiter mit :before und :after kämpfst, würde ich dir empfehlen es einfach mit mehreren Elementen zu machen. Das hat mehrere Vorteile:
    1. Funktioniert in "jedem" Browser
    2. Du kannst CSS Sprites benutzen (keine Ahnung ob das mit before/after geht)
    3. Wie du siehst, sind die beiden Grafiken innerhalb des Elementes. Selbst wenn du sie vertikal richtig ausrichten kannst, wirst du durch den transparenten Bereich der "Spitze" den Hintergrundverlauf sehen.
  3. hela

    hela Premium-User

    Hallo,

    es würde sicherlich auch mit den Pseudoelementen funktionieren, aber CPoly hat recht: Der IE7 unterstützt das nicht und der IE8 unterstützt auch nur bestimmte CSS-Eigenschaften in den Pseudoelementen. Man muss sich da leider überraschen lassen.

    Solange aber vom HTML-Kontext nichts bekannt ist (außer dass die Pseudoelemente in einem A-Element untergebracht werden sollen) kann man dir nur mit einem Link helfen:

Diese Seite empfehlen