Grafisches Element an Textlänge anpassen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 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:
    HTML-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

  • #2
    Versuchs mal damit:
    HTML-Code:
    <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.

    Kommentar


    • #3
      Leider nicht
      Angehängte Dateien

      Kommentar


      • #4
        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 Beitrag anzeigen
        Versuchs mal damit:
        You still drunk ...?
        HTML-Code:
        <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
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          @wahsaga das mit dem quelltext komm noch hinzu

          hab nun mit viel hin und her etwas hinbekommen:

          HTML-Code:
          <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

          Kommentar


          • #6
            Zitat von moreplz Beitrag anzeigen
            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.
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar

            Lädt...
            X