ugrás a tartalomhoz

z-index, overflow, position probléma

papppali · 2009. Már. 17. (K), 20.18
Sziasztok CSS Guruk!

Serettem volva egy olyan képnézegetőt készíteni, ami nem dob fel egy ablakot hanem hover állapotra csak felnagyítja a képet, de a következő problémába ütköztem: nézd meg itt.
Mint láthatjátok a képeket eltakarják az utánna következő képek, és a befoglaló doboz szélei is.
Hogy miért ezt a módszert választottam azon ne vitatkozzunk, a lényeg hogy lehet e egyáltalán megoldást találni a problémára js alkalmazása nélkül, vagy javascript hekket kell alkalmazzak.
Sajnos tudom hogy a problémát a keret overflow:hidden, és scroll -ja okozza de mivel a környezet megköveteli ezt kell alkalmazzam.
Mint már mondtam első körben szeretném tiszta css el megoldani a problémát!
Hiába állítgatom a z-indexet nem akarja a tutit.

Akinek van bármi ötlete várom.
css:

body {
    background:#FFFFFF none repeat scroll 0 0;
    color:#3E362F;
    font-family:verdana,Trebuchet MS,arial;
    font-size:11px;
    margin:0;
    padding:0;
    z-index: 0;
}
.content{
    margin: 50px auto;
    width: 366px;
    display: block;
    padding: 4px 0 0 4px;
    height: 394px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    border: 1px solid #000;
}
.content .picc{
    position: relative;
    float: left;
    margin: 0 4px 4px 0;
    padding: 0;
    width: 112px;
    height: 112px;
    z-index: 1; 
}
.content .picc a{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 4px solid #EAE7D2;
    margin: 0;
    padding: 2px;
    width: 100px;
    height: 100px;
    text-align: center;  
    z-index: 1; 
    background: #fff;
}
.content .picc a.active{
    border: 4px solid #FF5511;
}
.content .picc a img{
    width: 100px;
    height: 100px;
    border: 0 none;
    z-index: 1; 
}
.content .picc a:hover{
    display: block;
    position: absolute;
    top: -50px;
    left: -50px;
    border: 4px solid #708E0C;
    width: 200px;
    height: 200px;
    z-index: 10
}
.content .picc a:hover img{
    width: 200px;
    height: 200px;
}
html:
<div class="content">
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>

    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>

    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>

    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>

    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>

    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
    <div class="picc">
        <a href="javascript:void(0);"><img alt="" src="pic_medium.gif" /></a>
    </div>
</div>
‹ vertikalisan kozepre rendezes ill. egymas melle tenni RSH framework nem működik Google Chrome ban... ›
 ■
1

z-index

yaanno · 2009. Már. 17. (K), 21.22
Nekem úgy tűnik, hogy ha a .content .picc szabályról leveszed a z-indexet, akkor megjavul - legalábbis firefox alatt. Igen valószínűnek tartom, hogy az IE z-index problémái miatt nem igazán fog működni a dolog (floatok, positionok miatt). De ne legyen igazam :)
2

akkor még csak a probléma

rockybro · 2009. Már. 17. (K), 21.31
akkor még csak a probléma azon része oldódik meg, hogy a többi kép nem lóg az éppen aktív fölé... ettől még a képek fele nem látszik a befoglaló content div miatt... hát nehéz ezzel a z-indexszel bánni.. :/
3

ha a .picc pozícionálását

rockybro · 2009. Már. 17. (K), 22.30
ha a .picc pozícionálását absolute-ra állítod, akkor már szépen kiemelkedik a kép a befoglaló .content divből... viszont így meg csak az egyik kép látszik, mert szépen egymásra vannak pakolva... ha egyenként odébbtologatod a képeket, akkor már szépen kijön az aktív kép a keretből, és nem csúszik a többi kép alá sem... viszont ez elég sufnis megoldás..

egyébként a megoldás sztem tök egyszerű, csak nem sikerül rájönnöm. na mind1 majd később jót röhögök magamon :)

Szerk.: egyébként CSS-ben a vége felé az utolsó z-index után lemaradt a pontosvessző, itt ".content .picc a.active" pedig az active elé véletlen pontot raktál kettőspont helyett... de ez csak mellékes
4

absolute / z-index

Poetro · 2009. Már. 17. (K), 22.50
A linkről vedd le a position: absolute-ot, helyette legyen position relative, es a .pic-ről meg a z-index-et.

példa

ui: persze arra ne is számíts hogy IE6-7 alatt működni fog, már az overflow-t se tudja lekezelni.
8

ie

gex · 2009. Már. 18. (Sze), 00.11
jó lenne az az overflow, ha a picc osztályú divekről leszednéd a position: relative-ot. tudom, hogy az a megoldásod egyik kulcsa, de az hogy az ie nem kezeli az overflow-t nem teljesen igaz.
5

ilyesmi hatást szeretnél

rockybro · 2009. Már. 17. (K), 23.04
ilyesmi hatást szeretnél elérni: http://rockybro.extra.hu/cssproblema/? ennek a kódja így elég tré, de sztem vhogy így szeretnéd, hogy kinézzen.. vagy nem? IE-ben természetesen nem jó
6

ez sem jó

gex · 2009. Már. 18. (Sze), 00.07
a hatás az jó lenne, de a te megoldásod nem egy görgethető lista. ha görgethető lenne akkor rossz helyre kerülnének a hover állapotú elemek.
7

Ez még el is menne, tény hogy

papppali · 2009. Már. 18. (Sze), 00.10
Ez még el is menne, tény hogy nem szép, de kompromisszumot kell kötni, viszont a tartalmat természetesen php generálja, és nem véletlen tettem a scrollt a keretre, sokkal több kép lessz benne és túlnyúlna a kereten. Vagyis a position:absolute sajna nem megoldható. Na meg az a fránya IE6 :(
9

.

domel · 2009. Már. 18. (Sze), 01.19
asszem én most lopikálok! :)
10

nem lehetséges

gex · 2009. Már. 18. (Sze), 02.15
szenvedtem most vele egy-két órát, de ha a befoglaló elemnek adsz overflow tulajdonságot, akkor szerintem nem tudod kiemelni a benne lévő tartalmat a határain kívülre. ellenben ha nem feltétlenül ragaszkodsz ahhoz, hogy mindenhol négy irányba növekedjen a kép, akkor egy ilyesmi jó lehet. (ie6-ban a 8-as hozzászólásban leírtak miatt ez sem jó, ie7-ben nem néztem, winxp alatt ff, opera, safari, chrome ugyanolyan tökéletes)

szerk: Gábor múltkori blogbejegyzésének szellemében én azt mondom, hogy az ie6 és ie7 használók ellesznek enélkül a "feature" nélkül is, úgyhogy kiegészítettem a kódot egy conditional commenttel (megnéztem most ie7 alatt és ott sem jó, ezért nem csak a 6-osra érvényesek azok a css szabályok), így legalább nem rontja el a layoutot, viszont használható marad teljes mértékben. azoknak az a elemeknek a href tulajdonságaival azért remélem csinálsz majd valamit (például belinkeled a nagy képet), főleg ha már szemantikusabbra csináltam a html-t.

ettől függetlenül nekifuthatsz a js-nek is. :)
11

Nem rossz

papppali · 2009. Már. 18. (Sze), 09.47
Igen, én is szenvedtem vele, már előtte is és sajnos én is arra a következtetésre jutottam, hogy nem lehet megcsinálni, hekk nélkül.
A te megoldásod egész jó, még kicsit próbálkozok js el, de ha nem lessz szebb marad a te javaslatod.
A listaelem jó ötlet, tényleg okosabb megoldás DOM tekintetében, és annyira nem zavar a csak befelé nagyobbodó kép sem.
Ami inkább zavaró hogy IE7 is problémás, még meglátom mi lessz.
És természetesen lessz jelentőssége a href-nek is nem véletlenül választottam az <a> teget.
Köszi a megoldást, lehet hogy ez marad.
12

javascript

domel · 2009. Már. 18. (Sze), 11.30
Én nem értem, hogy miért kerülöd a javascriptet. Még ha a Flasht kerülnéd, azt megérteném, mert a flash alapból nincs a böngészőben, azt utólag kell telepíteni, és a technikailag analfabéta felhasználónál nem fog működni. A Javascripttel már más a helyzet, aki nem akar Javascriptet, azért mert csak, az igénytelen, és nem fogja különösen izgatni a kinagyodó képgalériád sem. Ha egy olyan böngészőben fogják nézni az oldalad, ahol le van tiltva a javascript, akkor hidd el nekem, hogy az ilyen embereknek jó az akármilyen igénytelenül összedobott weboldal is. Én a weboldalamról még az olyan embereket is kirugom, akik IE6-al merészelik megnézni.
CSS-ben ha valamelyik böngésző nem kompatibilis valamilyen utasításra, akkor nincs mit tenni. Lehet, hogy ezt a problémát valahogy kiszenvedik neked, de holnap belefutsz egy másik problémába, holnapután egy megint másikba
13

gratulálok

gex · 2009. Már. 18. (Sze), 11.42
aki nem akar Javascriptet [...] az igénytelen

az ilyen embereknek jó az akármilyen igénytelenül összedobott weboldal is

a weboldalamról még az olyan embereket is kirugom, akik IE6-al merészelik megnézni

ehhez nincs is nagyon mit hozzátenni. remélem te a webfejlesztést nem "merészeled" a szakmádnak nevezni.