Denksportaufgabe... variable Linie unten

[Elya]

Hallo,

ich sitze den Nachmittag hier an einer Anforderung, die ich dem Kunden noch nicht ausreden konnte, die ich aber auch nicht gescheit umgesetzt bekomme:

<img src="http://www.visuelya.de/selfpics/beispiel.gif" border="0" alt="">

Diese Art Buttons sollen später dynamisch beschriftet werden. Zur Zeit steht die Grafik rechts als Hintergrundbild im a-Element, daneben mit padding der Linktext. Das Problem ist die Linie, die genau links an den Text anschließen soll und damit also eine variable Länge hat. Der Button steht in einer Tabellenzelle:

<td><a href="http://www.example.com">mehr Info</a></td>

Ich habe über border-bottom, Hintergrundbilder und border für ein umschließendes oder enthaltenes Element (span), sogar 1px-Gifs nachgedacht, komme aber zu keinem brauchbaren Ergebnis. Dem a-Element eine feste Breite und eine Hintergrundfarbe zu geben und mit ihm etwas darunterliegendes "abzudecken" zerhaut mir wieder das Konzept der variablen Länge.

Auf keinen Fall möchte ich jeden Link mit der Hand anpacken müssen, um ihn zu erzeugen. Das einzige, was ich zur Zeit überhaupt sehe, sind graphische Buttons, auch nicht wirklich variabel (die Variante serverseitig erzeugter Bilder mal außen vor gelassen, irgend jemand muß das ganze ja auch bezahlen).

Habt Ihr einen Denkanstoß für mich? Wie immer wäre ich zu tiefstem Dank verpflichtet ;-)

Gruß aus Köln-Ehrenfeld,

Elya

[schwarze Piste]

Tachchen!

Wenn ich dein Problem richtig verstanden habe, könntest du die Linie
als Hintergundgrafik einfügen, angefangen an dem runden Ding mit dem
Pfeil und die variable Beschriftung muss dann nur einen deckenden weißen
Hintergund haben.

Gruß

Die schwarze Piste

[Elya]

Hallo schwarze Piste,

Linie als Hintergundgrafik einfügen, angefangen an dem runden Ding > mit dem Pfeil und die variable Beschriftung muss dann nur einen > deckenden weißen Hintergund haben.

Das klappt! der einzige Wermutstropen ist, daß das Bild nun nicht mehr Bestandteil des Links und damit anklickbar ist - es ist aber nun mal ein Button... mal sehen, ob ich die Idee noch weiterentwickeln kann. Vielen Dank.

Gruß aus Köln-Ehrenfeld,

Elya

[nag]

Hallo,

jetzt hab ich es auch verstanden ;)

wie wäre es damit
http://www.stud.uni-giessen.de/~su6690/selfhtml/grafiklink.html

mfg NAG

[Elya]

Hallo nag,

http://www.stud.uni-giessen.de/~su6690/selfhtml/grafiklink.html

genau so habe ich es jetzt gelöst. Typischer Fall von Freitag-Nachmittags-Denkblockade.

Danke Euch allen!

Gruß aus Köln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

so ganz verstehe ich Dein Problem ja vielleicht noch nicht, aber kannst Du nicht die Grafik (ohne Strich) rechtsbündig als Hintergrundbild für TD nehmen, das A mit margin-right auf Abstand halten und den Strich mit border-bottom erzeugen?

freundliche Grüße
Ingo

[Elya]

Hallo Ingo ,

so ganz verstehe ich Dein Problem ja vielleicht noch nicht, aber kannst Du nicht die Grafik (ohne Strich) rechtsbündig als Hintergrundbild für TD nehmen, das A mit margin-right auf Abstand halten und den Strich mit border-bottom erzeugen?

border-bottom steht dann aber unterhalb des kompletten Elements inkl. Text, und die Graphik rechts ist nicht mehr Bestandteil des Links und damit nicht anklickbar (vielleicht verschmerzbar, aber schade)

Ich probiere gerade mit der Idee von Schwarze Piste rum, klingt vielversprechend, ich hatte das auch überlegt aber nicht zuende gedacht.

Gruß aus Köln-Ehrenfeld,

Elya

[nag]

Hallo,

bevor ich mir den Kopf zerbreche ;)

ist es so gemeint?

<img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/grafiklink.gif" border="0" alt="">

mfg NAG

[Elya]

Hallo nag,

ist es so gemeint?

<img src="http://www.stud.uni-giessen.de/~su6690/selfhtml/grafiklink.gif" border="0" alt="">

und ich dachte, ich hätte hier inzwischen gelernt, mich verständlich auszudrücken... ;-)

nein, so:

<img src="http://www.visuelya.de/selfpics/beispiel.gif" border="0" alt="">

<img src="http://www.visuelya.de/selfpics/beispiel2.gif" border="0" alt="">

Gruß aus Köln-Ehrenfeld,

Elya