Textlänk ovanpå bild, i tabell

4 svar · 282 visningar · startad av Fia 2 maj 2007

FiaMedlem sedan apr. 20042 994 inlägg

Trådstart2 maj 2007 09:33#1

Jag har en tabellcell, med en bild i och ovanpå bilden vill jag lägga en textlänk. Just nu kör jag med position: relative och z-index: 1 på bilden, med länken som position: absolute och z-index: 2.

Men. När tabellen flyttar på sig, så följer förstås bilden med men inte länken, eftersom den är absolut. Och gör jag om bägge till relativa så vill länktexten lägga sig bredvid bilden istället för på den.

Hur löser jag det här med position och z-index? Jag är ingen stjärna på CSS.

Kör med html 4.01 transitional och en hel del tabeller, har tyvärr inte tid att lära mig xhtml just nu heller...

FiaMedlem sedan apr. 20042 994 inlägg

2 maj 2007 09:38#2

Hm, nu föreslog någon annan att jag sätter bilden som bakgrund i tabellcellen istället. Testar väl det då...

voigtann1Medlem sedan juni 20019 519 inlägg

2 maj 2007 09:38#3

kan du inte lägga bilden som en bakgrund och sen infoga texten?

<div class="minfinaBild">min text</div>

TroxyMedlem sedan mars 20041 505 inlägg

2 maj 2007 13:44#4

Släng dit en extra container som du positionerar relativt.
Sedan kan du positionera din länktext absolut inuti.

<table>
  <tr>
    <td>
      <div>
        <img src="bild.gif" alt="">
        <a href="#">Textlänken</a>
      </div>
    </td>
  </tr>
</table>

td div { position:relative; }
td div a { position:absolute; bottom:0; left:0; }

FiaMedlem sedan apr. 20042 994 inlägg

2 maj 2007 17:23#5

Tack för tipsen! Löste det med följande:

<td style="background: url('images/bakgrund.jpg') top left no-repeat;" valign="top" height="55">

och sen en får länktexten en class som innehåller:

... position:relative; top:12px; left:14px; z-index:2; width: 195 ...