diven belül középre igazítás kép fölé
Sziasztok!
A következő problémába futottam bele:
Adott egy div valahol az oldalon, fix szélességgel, benne egy változó méretű kép, középre igazítva. Van egy kis képem, amit a divben el kéne helyezni középre , a nagy kép fölé (mármint a z-tengelyen nézve fölé). Namost, ha a kisképnek position: relative-ot adok meg, az nem jó, mert h eltolom, akkor ott marad a helye, üresen. Ha position: absolute, akkor meg ugye az egész oldalhoz képest tudom eltolni. Van-e olyan megoldás, ahol a befoglaló divhez képest tudom absolute pozícionálni anélkül, hogy eltolná a nagyképet.
A nagykép, mint div-háttérkép esetemben nem megoldás.
Egy fura dolgot tapasztaltam, ha megadom, hogy "position: absolute", de nem adok meg top, és left értékeket, akkor jó, de ha megadom ezeket, akkor már a böngészőablakhoz képest tolja el...
Természetesen gugliztam eleget, mielőtt itt kérdeztem :)
Összedobtam egy lecsupaszított verziót szemléltetésképpen: link
Köszi előre is :)
■ A következő problémába futottam bele:
Adott egy div valahol az oldalon, fix szélességgel, benne egy változó méretű kép, középre igazítva. Van egy kis képem, amit a divben el kéne helyezni középre , a nagy kép fölé (mármint a z-tengelyen nézve fölé). Namost, ha a kisképnek position: relative-ot adok meg, az nem jó, mert h eltolom, akkor ott marad a helye, üresen. Ha position: absolute, akkor meg ugye az egész oldalhoz képest tudom eltolni. Van-e olyan megoldás, ahol a befoglaló divhez képest tudom absolute pozícionálni anélkül, hogy eltolná a nagyképet.
A nagykép, mint div-háttérkép esetemben nem megoldás.
Egy fura dolgot tapasztaltam, ha megadom, hogy "position: absolute", de nem adok meg top, és left értékeket, akkor jó, de ha megadom ezeket, akkor már a böngészőablakhoz képest tolja el...
Természetesen gugliztam eleget, mielőtt itt kérdeztem :)
Összedobtam egy lecsupaszított verziót szemléltetésképpen: link
Köszi előre is :)
div háttere?
Azt tudom tanácsolni, hogy a nagy kép, a div háttere legyen, a kis kép pedig egy div-en belüli tábla, középre igazított cellájában
pl így:
<div style="background: url(nagy_ize.jpg) no-repeat center">
<table width="100%" height="100%">
<tr>
<td style="text-align: center; vertical-align: middle"><img src="kis_ize.jpg" /></td>
</tr>
</table>
</div>
Én legalábbis így csinálnám és akkor nem kell position-nel bajlódni, ráadásul nem kell a z-index-et sem számolgatni!
üdv, Gábor
Sajnos a háttérképes megoldás
Befoglaló blokkhoz képest
Az absolute elemek a
Igen, így lenne logikus, de
relatív pozícionálás
/relative