ugrás a tartalomhoz

Negatív margin esetén a bennelévő elem kilóg

lamase · 2012. Aug. 31. (P), 07.53
Sziasztok, a problémát itt lehet megtekinteni: http://jsfiddle.net/c9Btv/2/

Az #a minuszba kitolom, viszont a benne lévő #b elem kinyújtja hiába overflow hidden, így az mellette lévő elemre rálóg. Ez akkor érdekes ha egy siteon van egy fix baloldali kinyitható sáv, és csukott állapotban kilóg a konténer elem. A tartalma nem látszik az overflow:hidden miatt, viszont a "hely" ott marad neki, így nem kattinthatóak a mellette lévő dolgok.

Mivel lehetne ezt orvosolni? Köszönöm!
 
1

Mi a probléma?

Poetro · 2012. Aug. 31. (P), 10.04
Elárulnád pontosan mi a probléma? Mert én nem tudom reprodukálni az általad leírt működést. Tudnál adni bővebb információt? Amit én látok Chrome illetve Fx alatt:
  • Van 3 doboz.
  • 2 négyzet egy piros és egy rózsaszín egymás alatt.
  • Egy kék a jobb oldalon.
  • Ha a kék bármelyik pixelére viszem az egeret, akkor a ciánra változik.
2

Igazad van, nem próbáltam ki

lamase · 2012. Aug. 31. (P), 14.44
Igazad van, nem próbáltam ki ezt a verziót.

Van egy bonyolultabb portálrendszer, ott ütköztem az alábbi hibába, amit előzővel ellentétben részletesen kifejtek.

Van egy height:100, position:fixed, overflow:hidden tulajdonsággal rendelkező elemem az oldal bal szélén, amibe van egy 800pxeles div. Ez alapból 800pixelel kivan tolva a képernyőből negatív marginnal, így a látogató amíg egy adott gombot nem bök meg nem látja. Ez eddig rendben is van.

Sajnos az oldalon a viewport bal oldalától 800pixelig nem lehet kattintani, mert mintha kilógna a szülő elemből ez a 800pixeles div. Nem látszik, mert valahogy eltűnik, viszont a firebugal tisztán látható, hogy kitakarja az oldal bal szélét és így az ott található funkciók működésképtelenek.

Jelenleg úgy oldottam meg, hogy csukott állapotban kap egy closed értéket így display:none-al simán elrejtettem és nincs is további gond.

A baj, hogy ebben a 800 pixeles divben jó pár js dolgozik, amik méreteket és egyéb paramétereket kérnek le. Mivel ez jelenleg display:none-ra van állítva a js nem látja el a feladatát. Erre is találtam megoldást, kinyitáskor a jseket ismét lefuttatom.

Az oldal funkcionál, de úgy érzem ez a megoldás elég fapados és szebben is meglehetne oldani.
3

visibility

Hidvégi Gábor · 2012. Aug. 31. (P), 14.53
visibility: hidden;-nél megmaradnak a méretek, és lehet számolni velük, sokszor érdemes így elrejteni dolgokat.
4

Sajnos az csak látszólag

lamase · 2012. Aug. 31. (P), 15.42
Sajnos az csak látszólag rejti el a dolgokat, viszont a böngésző fenntartja azt a helyet az adott elemnek, ami ugyan azt eredményezi mintha el se rejtettem volna. :/
5

Told ki abszolút

tgr · 2012. Aug. 31. (P), 22.50
Told ki abszolút pozicionálással. A Firebug egyébként a negatív margókat is pozitívnak mutatja, nem feltétlenül bíznék meg benne.
6

Köszönöm, ez lett a jó

lamase · 2012. Szep. 1. (Szo), 13.14
Köszönöm, ez lett a jó megoldás.