ugrás a tartalomhoz

z-index vs table, 2 kép egymásra rakva

kuronyab · 2007. Ápr. 17. (K), 07.56
Sziasztok!

(Számomra) Érdekes problémával találkoztam, és 2 napja nem sikerült megoldanom:
Táblázat celláiba (és egyébként is) szeretnék egy képet rakni, majd ráhelyezni egy kvázi keretet, így keretbe foglalni az első képet. (megcsinálnám flash-ben, de kell a javascript a cellára, stb stb, uh html-be kellene megoldanom).
A probléma az, hogy mindkét kép magasságát/szélességét fenntartja a cella, tehát dupla széles vagy magas marad, a felén teljesen üres, attól függően hogy a második elem top vagy left tulajdonságával húzom az első képre.
<table>
<tr>
<td STYLE="border: 1px solid #000000; width: 180px; height: 200px;">
<img src="a.jpg" width="169" height="200" STYLE=" ">
<img src="polaroidmid.gif" width="169" height="200" STYLE="position:relative; left:0px; top:-200px; z-index:1;">
</td>
</tr>
</table>


Semmiylen CSS-el sem sikerült megoldani.

A segítséget előre is nagyon köszönöm!
 
1

nálam így megy

HSLaszlo · 2007. Ápr. 17. (K), 10.20
<table>
<tr>
<td STYLE="border: 1px solid #000000; width: 180px; height: 200px;">
<img src="a.jpg" width="169" height="200" STYLE="position:absolute; left:0px; top:20px; z-index:1;">
<img src="b.gif" width="169" height="200" STYLE="position:relative; left:0px; top:20px; z-index:2;">
</td>
</tr>
</table>

mindkét képet pozicionálni kell, és legalább az egyik absolute legyen.a pozíciót a láthatóság miatt írtam át magamnál, a z-index-el variálhatod, melyik legyen felül.
2

majdnem, de azért...

kuronyab · 2007. Ápr. 17. (K), 10.47
Értem, így rendben is van, de én pl dinamikusan akarom ezt a két képet használni, legalábbis a másodikat, hogy elfedje az elsőt. Ilyenkor persze nem szerencsés az absolute pozíció használata.

Pl egy 3x3as táblázatban (de elvonatkoztathatunk a táblázattól is) nemcsak nehézkes, de nem is szép megoldás szerintem, ha a fél oldal absolute-al van pozicionálva. Vagy tévedek és így szokják?

Pl adott egy hasáb szöveg, és bele tennék egy képet (vagyis kettőt, hogy keretet kapjon a kép). Persze a szöveg dinamikus, stb.

A táblázatból nem lehet eltüntetni a felesleges felét, ami csak üresen áll? Valamiért összeadja a két elem méretét és abból nem enged, overflow sem segít, semmi.

Köszi
3

RE

HSLaszlo · 2007. Ápr. 17. (K), 14.44
Így kevés az info, csak sejtésem van arról, mit szeretnél. Konkrétan kellene látni a feladatot, és úgy talán lenne ötletem, vagy a többieknek. Nem teljesen világos, hogy most akkor az "elfedő" képet, ami rátakar a hátsóra, azt akarod dinamikusan változtatni? Ha az egyik réteget kell csak változtatni, akkor egyszerűbb a helyzet, szerintem. Ha fontos a pozicionálás, és szükséges, akkor nem mondanám rá, hogy nem szép megoldás, a css play oldalon elég sok példa van rá.
4

mellékelem

kuronyab · 2007. Ápr. 17. (K), 18.54
Csak az egyikkel.
Tehát, amint látszik a két linken, van egy változó kép, ami alul van, oda mindig más kép menne, akár táblában, akár szabad szöveg közepén.
És lenne egy másik, ami keretet ad az alsónak, ezt szeretném fölé pozicionáni. Ez megy is, csak a html meghagyja a másik képnek az elméletben kiselölt területet üresnek.

Pozicionálni értelemszerüen csak a második képet szeretném, az elsőnek ne legyen fix a helye... Ezért lehetne csak relative a pozicionálás.

Köszi

elso
masodik
5

tippek

HSLaszlo · 2007. Ápr. 18. (Sze), 08.48
Igazából csak tippjeim vannak, amelyek körüljárják a problémát; szerintem a pozicionálás csak úgy oldható meg, ahogy eddig is sikerült.
1. Megfordítottam a dolgot, a keret lett a háttér, és elé van beillesztve a kép, méretezve, igazítva:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>keret</title>
<style type="text/css">
<!--
 * {
padding: 0;
margin: 0;
}
.container{
border: 1px solid #000000;
width: 169px;
height: 200px;
margin: 10px;
}
.keret{
height: 200px;
z-index: 2;
background: ButtonHighlight url(polaroidmid.gif) no-repeat;
}
.keret img{
position: relative;
top: 19px;
left: 22px;
z-index: 1;
background-color: transparent;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="keret"><img src="a.jpg" width="121" height="128" />
</div>
</div>

</body>
</html>

itt természetesen tudod a képeket dinamikusan cserélgetni, de a keret nem "képkivgást" csinál, hanem a megadott méretre bepréseljük a képet.

2.Beilleszted a képet háttérként, és a cellába, vagy div-be a keret van képként fixen elhelyezve:
<div class="keret" style="background: #ffffff url(a.jpg) top;">
<img src="polaroidmid.gif" width="169" height="200" />
</div>

a html kódban a background-ot tudod dinamikusan változtatni.

3. Javascript, ha más megoldás nincs, erre még nem volt időm, és nem is szeretem alkalmazni, csak ha nincs más lehetőség.

Hát ennyi ötletem volt hirtelen, kíváncsi vagyok a végeredményre, illetve hogy milyen megoldást választasz.
6

danke

kuronyab · 2007. Ápr. 19. (Cs), 16.27
Köszi, a hátteres megoldásra gondoltam már csak az adott feladattól nem tudtam elvonatkozni, így a táblázat cellájának hátterét állítottam be, a div-es megoldás még jobb, bárhova be tudom tenni.

Köszönöm, végülis jó így, a hátteret úgyis lehet rendezni, eltolni ugyanúgy mint egy képet, teljesen megfelel.

Mondjuk bosszantó a z-index-es gixer, de lehet hogy én akartam másra használni mint amire való.



Köszönöm!