Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
Lucyk
Člen
Avatar
Lucyk:7.8.2015 17:01

Ahoj,
na internetu jsem si stáhla jednu free šablonu, kterou jsem chtěla použít pro svůj projekt, neboť se mi hned na první pohled zamlouvala. Narazila jsem však na problém, se kterým si nevím rady a možná by mi někdo dokázal poradit, v jaké části kódu hledat možnost nápravy.

Jedná se o zobrazení obrázku v tabulce a jeho následné částečné překrývání.

Tabulka je generována na základě sql dotazu a u každého řádku je ikonka fotoaparátu a po ukázání myší na tuto ikonku se objeví obrázek, který se mi ztrácí, pokud je tabulka široká.

Horní obrázek je aktuální stav a spodní část obrázku je zobrazení o které se snažím, ale bez úspěchu.

Zkoušela jsem použití z-index, ale žádný efekt jsem nezaznamenala.

Šablona je dělána pomocí css a vypadá to na 3 rámy.

Byl by někdo ochoten se mi případně po poskytnutí zdrojového kódu podívat?

Případně jak by to šlo jinak vyřešit?

Děkuji

 
Odpovědět
7.8.2015 17:01
Avatar
Vojtěch
Člen
Avatar
Vojtěch:7.8.2015 22:24

Aby fungoval z-index, musí se nastavit u prvků (třeba jako ten obrázek, nebo ten postranní panel) v CSS vlastnost position na absolute, relative nebo fixed. Bez toho z-index nebude správně fungovat.

http://www.jakpsatweb.cz/…osition.html

 
Nahoru Odpovědět
7.8.2015 22:24
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Lucyk
Aleš Lulák:8.8.2015 0:47

Ahoj,

mně to spíš připadá, že prostřední obsah (celý sloupec Contens) má nastaveno overflow: hidden, což právě přesně takhle ořeže obsah, který se do něj už nevejde.

Jestli je tam vážně nastaven overflow, stačí ho pravděpodobně jen vymazat z pravidla a nebo změnit na overflow: visible, což umožní zobrazování, třeba obrázku právě, i mimo.

Editováno
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
8.8.2015 0:47
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Lucyk
Člen
Avatar
Odpovídá na Vojtěch
Lucyk:8.8.2015 0:52

V CSS mám pro rozbrazování obrázku nastaveny následující hodnoty:

a .pozicovany {
  position: absolute;
  visibility: hidden;
}

a:hover .pozicovany {
  visibility: visible;
}

Zkoušela jsem do tohoto kodu připsat z-index: 2 anebo z-index: -5, jak do horní, tak i spodní části kódu, avšak změnu jsem nezaznamenala.

 
Nahoru Odpovědět
8.8.2015 0:52
Avatar
Lucyk
Člen
Avatar
Odpovídá na Aleš Lulák
Lucyk:8.8.2015 1:47

Ano, tyto hodnoty jsem tam našla a zkusila přepsat, ale změnu jsem nezaznamenala.

Html stránka má následující odkazy do CSS:

        <!-- BEGIN :: MAIN COL -->
        <div id="page_maincol">

        <div id="page_rightcol2">
                <div class="borderbox">
                <div class="rightcol_box2">
                <div id="latest2">
                        <h2><span>Contens</span></h2>
                        <div class="wrapper2">
ZDE TABULKA
                        </div>
                </div>
                </div>
                </div>
        </div>
        </div>

        <!-- //END :: MAIN COL -->

A v CSS souboru mám k nim následující kódy:

#page_maincol {
        margin-left : 14px;
        width : 662px;
        float : left;
}

#page_rightcol2 {
        width : 662px;
        float : left;
}

.borderbox {
        clear : both;
        float : none;
        margin-top : 13px;
        border : #A5A4A4 1px solid;
}

.rightcol_box2 {
        width : 660px;
        background-color : #fff;
//      overflow : hidden;
        overflow : visible;
                display : block;
                clear : both;
}

.rightcol_box2 h2 {
                        padding : 7px 0px;
        width : 660px;
        height : 11px;
                color : #fff;
                font-size : 11px;
                line-height : 11px;
                font-weight : bold;
}

.rightcol_box2 h2 span {
        left : 13px;
        display : block;
        position : relative;
}

#latest2 h2 {
        background-color : #075B9B;
        border-bottom : #075B9B 1px solid;
}

#latest2 .wrapper2 {
        position : relative;
        margin : 0px 9px;
        width : 641px;
//      overflow : hidden;
        overflow : visible;
}

Původně je tam nastavený overflow: hidden, já tam zkoušela dát overflow:visible, ale nic se nezměnilo.

 
Nahoru Odpovědět
8.8.2015 1:47
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Lucyk
Aleš Lulák:8.8.2015 8:12

Myslíš, že by bylo možné nám někam dát celou stránku, a nebo alespoň poslat odkaz na tu šablonu? Kód, který jsi teď uvedla, by měl normálně fungovat. Takže vypadá, že problém je ještě jinde a právě pro hledání ho, by se nám hodila celá stránka.

Nahoru Odpovědět
8.8.2015 8:12
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
smiesek
Člen
Avatar
Odpovídá na Lucyk
smiesek:8.8.2015 12:37

Lucyku zkus tu část kodu napasovat sem na živou ukázku: http://kod.djpw.cz/ nebo někam nahrej soubory, aby bylo v reálu vidět současnou podobu :-)

třeba jsou výše uvedené postupy a rady správné a blokuje to něco jiného ;-)

 
Nahoru Odpovědět
8.8.2015 12:37
Avatar
Lucyk
Člen
Avatar
Odpovídá na Aleš Lulák
Lucyk:8.8.2015 14:45

Tak jsem šla, že udělám pracovní verzi pro testování a dám ji sem pomocí odkazu od smiesek a tam se mi to začalo zobrazovat jak jsem potřebovala. Vrátila jsem se tedy ke své původní stránce, dala load a už to fungovalo. Hold asi v noci, když pracuju já, tak stránky se se mnou nebaví.

Dopadlo to tak, že místo hidden jsem dala visible a u pozicování obrázku jsem nastavila z-index.

smiesek: Děkuji za zajímavý odkaz, ukládám pro budoucí použití, už jsem na tuto stránku u pár lidí narazila, ale nikdy jsem zatím nepřišla na její význam :-?

Tímto je to vyřešeno a děkuji všem zúčastněným za pomoc ;-)

 
Nahoru Odpovědět
8.8.2015 14:45
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.