z-index vs table, 2 kép egymásra rakva
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.
Semmiylen CSS-el sem sikerült megoldani.
A segítséget előre is nagyon köszönöm!
■ (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>
<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!
nálam így megy
<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.
majdnem, de azért...
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
RE
mellékelem
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
tippek
1. Megfordítottam a dolgot, a keret lett a háttér, és elé van beillesztve a kép, méretezve, igazítva:
<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:
<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.
danke
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!