Går det att lägga två bilder ovanpå varandra utan att båda tar upp plats i tabellen?

6 svar · 1 086 visningar · startad av Mattias Nordin 26 juli 2009

Mattias NordinMedlem sedan dec. 20051 056 inlägg

Frågan26 juli 2009 12:22#1

Går det att få dessa båda bilder att ligga ovanpå varandra utan att tabellen blir lika stor som båda bilderna tillsammans? Vet att ett sätt är att lägga pic2 som bakgrundsbild i tabellcellen men undrar om css kan göra samma sak.

<table><tr><td>
<img src="pic_ovanpå.gif" style="position:relative; top:-100; z-index:10;">
<img src="pic2.gif">
</td></tr></table>

:stud

MelittaMedlem sedan sep. 2003448 inlägg

26 juli 2009 13:35#2

ja om du använde position:absolute; så borde det ju gå

<table width="200" height="200" border="1">
  <tr>
    <td>
    <div style="width:200px;height:200px;overflow:hidden;position:relative">
    <img src="" alt="under" name="under" width="200" height="200" id="under" style="position:absolute;background-color: #990033; top:-80px; left:-80px;" />
    <img src="" alt="over" name="over" width="200" height="200" id="over" style="position:absolute;background-color: #000099; top:80px; left:80px;" /> 
    </div></td>
  </tr>
</table>

http://hjd.se/fso.asp

Mattias NordinMedlem sedan dec. 20051 056 inlägg

26 juli 2009 14:22#3

Får labba med det. Har för mig att position:absolute är relativt från det vänstra övre hörnet. Nu loopar jag ut en massa små tabeller som innehåller dessa bilder. Kanske kan bli en utmaning.

MelittaMedlem sedan sep. 2003448 inlägg

26 juli 2009 14:36#4

Njae, absolute är från närmsta relativa container tror jag, kolla http://www.hjd.se/fso.asp nu får du se, bara loopat ut det 100 ggr men det är samma kod..

Mattias NordinMedlem sedan dec. 20051 056 inlägg

26 juli 2009 17:20#5

Ser lovande ut. Tackar

Mattias NordinMedlem sedan dec. 20051 056 inlägg

12 aug. 2009 17:15#6

Kan du visa din kod är du bussig? För mig blir det inte rätt. Anger jag bara position absolute så blir det ungefär ok men när jag flyttar bilden med top:10px & left:10px så hamnar alla bilder i det övre vänstra hörnet av skärmen och inte övre vänstra hörnet av tabellcellen.

Har jag fel syntax?

 <table border="1" width="150" height="280" bgcolor="#1a1919" style="border:2px solid #89001f">
        <tr><td align="center" valign="top" height="100%">
        
		<img src="/_design/ico_new.png" style="position:absolute;left:10px;">
...

Mattias NordinMedlem sedan dec. 20051 056 inlägg

12 aug. 2009 17:19#7

Ahhh... granskade din kod och listade nog ut det. Detta fungerar:

<table border="1" width="150" height="280" bgcolor="#1a1919" style="border:2px solid #89001f">
        <tr><td align="center" valign="top" height="100%" [B][FONT="Arial Black"]style="position:relative;">[/FONT][/B]
        
		<img src="/_design/ico_new.png" style="position:absolute;left:10px;">
...

Nu lärde jag mig något nytt. Tackar :)