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;
}


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:

■

HTML, CSS, JavaScript, Ajax

csirip

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 :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.. :/

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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ó

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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 :(

A hozzászóláshoz regisztráció és belépés szükséges
új téma

.

domel · 2009. Már. 18. (Sze), 01.19

asszem én most lopikálok! :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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. :)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés