Diskuze: Překrývání obrázku v šabloně

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Lucyk

Člen

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

Vojtěch

Člen

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

Aleš Lulák

Člen

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 8.8.2015 0:47

Akceptované řešení
+20 Zkušeností
+2,50 Kč

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

Lucyk

Člen

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

Lucyk

Člen

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

Aleš Lulák

Člen

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

smiesek

Člen

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

Lucyk

Člen

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

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

Diskuze: Překrývání obrázku v šabloně