Link mit unterlegter Grafik (aus 3 Teilen)

[worker]

Hallo,

habe folgenden Code

<img align="left" src="../pics/gr_button_a.jpg" border="0" height="18px">
<div align="left" src="../pics/gr_button_b.jpg" border="0" height="18px" width="100px">TEST<img src="../pics/gr_button_c.jpg" border="0" height="18px"></div>

Ich denke was ich erreichen möchte ist soweit klar (ein button aus 3 Teilen, der einen normalen Text(-Link) beinhaltet.)
Der Button besteht aus 3 Teilen, damit ich das mittlere Teil dehnen kann, je nach dem, wie lang der Text ist.

Zum Problem ....
Wenn ich das (und andere unzählige Variationen) im FF (hab nur den Browser; Linux OS) aufrufe, dann macht mir FF immer einen Brake nach dem Text und der Hintere Teil des Buttons erschein genau unter dem Text.

Teil 1 und 2 des Buttons passen gut zusammen (inkl Text) - nur wird halt der 3. Teil des Buttons unter den oberen zwei dargestellt.

Habe es auch mit <div style"...."> versucht, doch das Ergebnis bleibt das Gleiche.

Weis jemand Rat ?
Thx.
Worker

 

[threadi]

Ein Button? D.h. du legst um diesen Code herum noch einen Link? Wenn ja wäre es wohl besser das ganze so in der Richtung aufzubauen:

<a href="linkziel.html"><span class="links">&nbsp;</span>Test<span class="rechts">&nbsp;</span></a>

Dann per CSS die Klassen links und rechts zu Blockelementen machen (display: block;), eine feste Höhe und Breite in der Größe der Grafiken einstellen und floaten damit sie links ode rechts vom Text stehen. Die Grafiken fügst Du dann nur als Hintergrundbilder in die spans ein - fertig.

Falls Du das nicht mit einem Button meintest hab ichs falsch verstanden :idea:

 

[worker]

Hi threadi,

Ein Button? D.h. du legst um diesen Code herum noch einen Link?

Nein.
Sorry, da hab ich mich falsch ausgedrückt.

Der "Text" zwischen den Images soll eigentlich den Link hier repräsentieren (den Code hab ich mir gespart).

Ich möchte einfach erreichen, dass ich quasi einen "dehnbaren" Button habe:

button_a.jpg = kurzes abgerundetes Teil, dass an
button_b.jpg = nahtlos anknüpft und auf diesen Teil ich einen (Text-)Link legen kann.
button_c.jpg = schließt den kompletten Button mit einer Rundung ab (bzw. steht für das Ende des Buttons).

Und das ganze Spielchen deshalb, weil ich button_b.jpg je nach Länge des Text-Links "dehnen" kann, so dass es immer passt.

Hoffe jetzt ist's etwas klarer ;-)

Gruß
W.
(PS: Das ganze wird dann ein auf- und zuklappbares Menü)

 

[threadi]

Da wäre mein Beispiel oben ebenfalls die Lösung. Du kannst natürlich auch statt eines Links ein <li> drumm legen und nur um den Text selbst den Link.

 

[worker]

Hi,

ok das mit dem <li> werd ich noch testen, aber kannst Du mir mal zum Verständnis sagen, warum das letzte .jpg - Bildchen unter die anderen zwei platziert wird ? Da dürfte doch kein Umbruch stattfinden, oder übersehe ich da was ?

Der Browser parst ja Textumbrüche im Quellcode auch eben als "keine", solang enichts anderes angegeben *grübel*

Thx.
W.

 

[threadi]

Du müsstest das letzte Bild wie auch das Erste floaten damit es auch neben dem Text steht. HTML alleine dient nicht zum Stylen.

 

[worker]

Hi threadi,

oh man(!!).
Ich bin ja ein Hirnochse...
Ja klar ... floaten :idea:.
Als ob du das nicht erwähnt hättest .

Danke Dir vielmals ;-).

Grüße
w.