Ergebnis 1 bis 8 von 8

Thema: Grafisches Element an Textlänge anpassen

  1. #1
    Unregistriert
    Gast

    Standard 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Grafisches Element an Textlänge anpassen

    öö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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Grafisches Element an Textlänge anpassen

    @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;}
    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.

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Grafisches Element an Textlänge anpassen

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Unregistriert
    Gast

    Standard AW: Grafisches Element an Textlänge anpassen

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

  6. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Grafisches Element an Textlänge anpassen

    ok dann sorry, dachte das wäre so direkt klar.
    aber als kleine entschädigung hier die version in code
    HTML-Code:
    <!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>
    hier nochmal das ganze als zip, damit du es dir ansehen kannst..
    link_beispiel.zip


    edit:
    http://www.tutorials.de/css/374915-g...-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
    Geändert von synaptic (17.04.2011 um 17:38 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Grafisches Element an Textlänge anpassen

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

  8. #8
    Fortgeschrittene/r Avatar von unknownsoldier
    Registriert seit
    16.06.2010
    Ort
    "Dreamland"
    Alter
    26
    Beiträge
    174
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Grafisches Element an Textlänge anpassen

    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-Code:
    <a class="tab_link"><span>Dein Text</span></a>
    Im CSS-Code legst du dann fest:
    HTML-Code:
    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
    }
    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.
    Geändert von unknownsoldier (20.04.2011 um 23:49 Uhr)

Ähnliche Themen

  1. Was nutzt mir das Element Div?
    Von bodenseejenny im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 24.09.2009, 10:18
  2. Problem: h2 = inline-Element
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 14.03.2009, 12:56
  3. <CODE> Element in Editorleiste
    Von Unregistriert im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 12.12.2008, 23:53
  4. Vertikales grafisches pulldownmenü
    Von Razorblade13 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 14.06.2008, 20:15
  5. grafisches Problem mit meiner Homepage
    Von jabbah im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 29.05.2006, 14:15

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •