Grafisches Element an Textlänge anpassen

Unregistriert

Hallo zusammen ich habe folgendes Problem:

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

[Blockierte Grafik: 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

<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>

Alles anzeigen

Das Ergebnis;
[Blockierte Grafik: 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

synaptic

ööhm mach nen link als display:block und stopf dort spans rein ebenfalls mit display:block und float:left;
breite höhe etc vergeben und testen

sejuma

synaptic:
Mal ehrlich: Meinst du mit deiner Antwort kann irgendwer was konkretes anfangen?
Wir sind hier doch im Hilfe-Forum!

@ Gast:
Ich würde es so lösen, wobei ich mir nicht ganz sicher bin, ob das funktioniert. Dazu bräuchte ich ggf. nochmal die drei Grafikbestandteile in der Originalversion.
Alle drei Grafikteile müssen die gleiche Höhe wie a haben, hier also 25px.
Versuch mal folgendes:

CSS:

Code

a.tag {


          height:25px;
          line-height:25px;
          color:#996633;
          text-shadow:0px 1px #rgba(0,0,0,0.7);
          text-decoration:none;
          background: url(tag_middle.png);
          float: left;  }


  img {float: left;}

Alles anzeigen

HTML:

Code

<img src="tag_left.png" alt="" border="0" width="15" height="25">
<a href="#" class="tag">hihihi</a>
<img src="tag_right.png" alt="" border="0" width="6" height="25">

Zwecks eindeutiger Identitifizierung arbeite noch mit einem ID oder einer Klasse, damit sich für img nicht alles auf andere Grafiken auswirkt.
Nach jeder Linkeinheit dann noch clearen.

synaptic

also ich wüsste nicht, was man daran nicht verstehen kann.. der gast hat mir jetzt nicht den eindruck gemacht, als würde er keine ahnung von der materie haben.
das einzige was bei meiner ausführung fehlte war zu sagen, dass die spans die bilder als background bekommen sollen. was aber auch ersichtlich is, da es ja um die anordnung der bilder für den link geht

Unregistriert

synaptic: zwar hast du recht, unbeholfen bin ich bzgl. dieser materie nciht, aber hab ich es mit deinen tipps nicht hinbekommen etwas zu erreichen

sejuma: danke für deine hilf, aber mit id kann ich nicht arbeiten, da diese tags mehrfach in den gleichen elementen vorkommen 8bis zu 10 mal, und dann für jedes eine einzelne id? zudem ist dies leider nciht das was ichw ollte, da ich somit viel mehr quelltext habe. trotzdem danke..

synaptic

ok dann sorry, dachte das wäre so direkt klar.
aber als kleine entschädigung hier die version in code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<style type="text/css">
    *{
        padding:0;
        margin:0;
    }
    body{
        padding:20px;
    }
    .imgLnk{
        display:block;
        overflow:hidden;
        float:left;
        margin-right:10px;
    }
    .btnl{
        display:block;
        background:url(btn_left.gif) no-repeat;
        width:16px;
        height:23px;
        float:left;
    }
    .btnm{
        display:block;
        background:url(btn_mid.gif) repeat-x;
        height:23px;
        float:left;
        padding:0 5px;
    }
    .btnr{
        display:block;
        background:url(btn_right.gif) no-repeat;
        width:3px;
        height:23px;
        float:left;
    }
</style>


</head>
<body>
<a class="imgLnk" href=""><span class="btnl"></span><span class="btnm">das hier is ein linktext der sehr lang ist</span><span class="btnr"></span></a>
<a class="imgLnk" href=""><span class="btnl"></span><span class="btnm">das </span><span class="btnr"></span></a>
<a class="imgLnk" href=""><span class="btnl"></span><span class="btnm">das awdawd</span><span class="btnr"></span></a>
<a class="imgLnk" href=""><span class="btnl"></span><span class="btnm">das w aw daw da wd </span><span class="btnr"></span></a>
</body>
</html>

Alles anzeigen

hier nochmal das ganze als zip, damit du es dir ansehen kannst..
link_beispiel.zip

edit:
http://www.tutorials.de/css/374915-gra…e-anpassen.html
und an dieser stelle bereue ich wieder überhaupt nur eine zeile geschrieben zu haben.
crossposting is sowas von unsozial
wieso machste so einen scheiss?
an sich müsste ich den kompletten thread hier löschen wegen grob unfairem und unsozialem verhalten.
was glaubst du, wieviele leute sich die mühe machen dir zu helfen?
echt, mir fehlen einfach die worte dein verhalten ist eigentlich grund für jeden potentiellen helfer zu sagen: nö! ich behalte mein wissen für mich und werd kein byte an code verfassen

sejuma

Es ist nur ein ID erforderlich:

Code

<div id="navi">
<img src="tag_left.png" alt="" border="0" width="15" height="25">
<a href="#" class="tag">hihihi</a>
<img src="tag_right.png" alt="" border="0" width="6" height="25">


... zweiter Link
...dritter Link


</div>

Alles anzeigen

Code

#navi a.tag {


          height:25px;
          line-height:25px;
          color:#996633;
          text-shadow:0px 1px #rgba(0,0,0,0.7);
          text-decoration:none;
          background: url(tag_middle.png);
          float: left;  }


 #navi img {float: left;}

Alles anzeigen

unknownsoldier

Also ich finde die Lösungen hier alle reichlich kompliziert.

Schneide dein Tab-Bild einfach wie folgt zurecht:
=========) [tab_right.png // mach es mhm... 350px breit oder so, je nachdem was die maximale breite sein soll]
(= [tab_left.png]

Danach bauste es wie folgt auf:

HTML

<a class="tab_link"><span>Dein Text</span></a>

Im CSS-Code legst du dann fest:

HTML

a.tab_link {
  background: url(tab_right.png) no-repeat 100% 0;
  ....
}


a.tab_link span {
   background: url(tab_left.png) no-repeat;
   // evtl. noch nen display:block;
   padding: 0 5px // seitenabstand kannst du beliebig wählen
}

Alles anzeigen

so mehr brauch man eigentlich nicht, evtl. Anpassungen für den Internet Explorer aber das müsstest du gucken.

Ist leider ungetestet, da ich gerade im Urlaub bin, aber spontan würde ich sagen, das geht

Alternativen wären mit :before und :after Pseudoelementen (was allerdings im IE nicht funktionieren wird) und mit CSS3 über "multiple-backgrounds".

Optimal kannst du auch ein CSS-Sprite nutzen und mit background-position arbeiten

Anmerkung:
Wenn du die Tabs in einer Liste verwendest kannst du dir die "<span>"-Elemente sparen, da du dort das "<li>"-Element zur Verfügung hast.

Tags