ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
927
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
  1. 17.04.11 03:23 #1
    moreplz
    moreplz ist offline Mitglied
    Registriert seit
    Apr 2011
    Beiträge
    10
    Hallo zusammen ich habe folgendes Problem:

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

    http://img6.imagebanana.com/img/npx1evqj/ex.jpg

    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;
    http://img6.imagebanana.com/img/gb0utt0r/err.jpg

    Hab schon mit padding und margin rumprobiert aber bisher keinen erfolg.. hoffe jemand kann mir weiterhelfen.. Dankeee
     
    Zitieren Zitieren
  2. 17.04.11 17:21 #2
    CPoly
    CPoly ist offline Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.662
    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.
     
    Zitieren Zitieren
  3. 17.04.11 20:22 #3
    Avatar von hela
    hela
    hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.246
    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:
     
    "Nur der Blinde fürchtet nicht das Krokodil" R.J.
    Zitieren Zitieren
Thema nicht erledigt
« Pinnwand im IE | clearfix »

Ähnliche Themen

  1. Textfeld soll sich Textlänge anpassen
    Von basti-hoppe im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 13.03.08, 12:41
  2. Hintergrundbild automatisch an Textlänge (XML) anpassen
    Von flashjamp im Forum Flash Plattform
    Antworten: 2
    Letzter Beitrag: 08.02.08, 16:49
  3. Textlänge in Pixel?
    Von redneb im Forum Java
    Antworten: 4
    Letzter Beitrag: 18.09.07, 16:55
  4. auto:height die sich dem grösseren Div Element anpassen soll
    Von gaengsterbruth im Forum CSS
    Antworten: 2
    Letzter Beitrag: 15.08.07, 13:04
  5. Div Element auf seitenhöhe anpassen
    Von Michael Engel im Forum CSS
    Antworten: 1
    Letzter Beitrag: 04.07.07, 15:32