Diskuze: responzivní design a z-index

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

Zjistit více...

Aktivity

Radim

Člen

Radim:15.12.2014 22:50

Ahoj všem. Prosím zdejší komunitu o radu. Jsem samouk a formou pokusu a omylu se snažím o malinké proniknutí do vědy programování. Mám trošku problém, se kterým si nevím rady. Ve wordpressu upravuji šablonu a chci dát obrázek jako z-index přes určitý objekt. podařilo se mi, jenže při optimalizaci pro mobilní telefony na rozlišení 1280x720 mi obrázek, který je umístěn při rozlišení 2560x1440 správně, skočí na pozici do textu. Jak docílit toho, aby obrázek v určitém rozlišení např. 1280x720 a nižším zcela zmizel a na webu se nezobrazoval?
Teď je kód následující:

.logo
{
background:url(images/constr.png) 0 0 no-repeat;
width:485px;
height:281px;
position:fixed;
margin: 240px 0 0 930px;
padding: 0 0 0 0;
z-index:999999;}

Díky za tip.

Odpovědět

15.12.2014 22:50

Pavel Mareš

Tvůrce

Pavel Mareš:16.12.2014 6:39

K tomu se používá "speciální" kód v css. Zkus si o tom něco najít, jistě ti to pak pomůže.

@media (max-width: 1280px) {
   .logo {
      display: none;
      visiblity: hidden;
      z-index: -9999999999999;
   }

Nahoru Odpovědět

16.12.2014 6:39

Však ono půjde ...

Radim

Člen

Radim:16.12.2014 7:43

Aha, děkuji. Večer vyzkouším a dám vědět. Vkládá se v css někam do hlavičky, nebo ke kódu viz. výše, nebo je to jedno?

Nahoru Odpovědět

16.12.2014 7:43

Neaktivní uživatel

Člen

Neaktivní uživatel:16.12.2014 8:01

V css je nějaká hlavička? Že o tom nevím.

Nahoru Odpovědět

16.12.2014 8:01

Neaktivní uživatelský účet

Pavel Mareš

Tvůrce

Pavel Mareš:16.12.2014 18:05

Pokud jsi to ještě nenašel někde, tak to prostě vlož na konec, začátek, prostředek souboru. Prostě je to jen další část CSS. A css většinou hlavičky nemá - pokud nepoužíváš nějaký framework ale to zase není už moc css.

Nahoru Odpovědět

16.12.2014 18:05

Však ono půjde ...

Radim

Člen

Radim:16.12.2014 21:49

Pavle, díky za fundovanou odpově´d - zkoušel jsem dát do css, ale nefunguje. Kód je nyní:

.logo
{
background:url(images/constr.png) 0 0 no-repeat;
width:485px;
height:420px;
position:fixed;
margin: 240px 0 0 930px;
padding: 0 0 0 0;
z-index:999999;}
}

@media (max-width: 720px) {
.logo {
display: none;
visiblity: hidden;
z-index: -9999999999999;
}

obrázek skáče do textu až do 695px, potom zmizí. 869px-695px je obrázek v textu. Dělám něco špatně?

Editováno 16.12.2014 21:50

Nahoru Odpovědět

16.12.2014 21:49

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:17.12.2014 8:10

Protože to musí být

@media all and (max-width: 720px) {

Pavel Mareš - Zajímalo by mě, proč by měl použít display, visibility i z-index najednou? Máš k tomu nějaký důvod?

Nahoru Odpovědět

17.12.2014 8:10

Neaktivní uživatelský účet

Radim

Člen

Radim:17.12.2014 8:47

ať tak či tak, obrázek se zobrazujepořád v textu viz.příloha. Je to ten bagr, který by měl při 720px zmizet

Editováno 17.12.2014 8:49

Nahoru Odpovědět

17.12.2014 8:47

Radim

Člen

Radim:17.12.2014 8:51

A takhle to má být v klasické verzi

Nahoru Odpovědět

17.12.2014 8:51

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:17.12.2014 9:23

A styluješ správný prvek? Nemá třídu logo jen ta značka vlevo nahoře? Ideální by bylo, kdybys nám poslal adresu, kde to běží (a pokud to není nahrané nikde, tak to někam nahrát).

Nahoru Odpovědět

17.12.2014 9:23

Neaktivní uživatelský účet

berry309

Tvůrce

berry309:17.12.2014 12:46

@media (max-width: 720px) {
....
}

By mělo normálně fungovat. Pokud ne, je chyba ještě jinde. Případně pokud to skáče a někde to už přeteče do textu, ale pak to zmizí tak upravit to max-width

Nahoru Odpovědět

17.12.2014 12:46

Radim

Člen

Radim:17.12.2014 15:24

No, trošku se bojím, že dělám chybu já, protože nevím, jak správně ve wordpressu udělat objekt jako z-index a tak jsem využil kód na logo a dal místo něj bagr :-) . Nikdy jsem to nepotřeboval, ale teď dělám stránky, kde by to tak mělo být a marně se s tím trápím. Ideální by bylo, kdybych věděl kam přesně mám vložit kód pro objekty, které chci poziciovat jako z-index. Nevím, jestli se vkládá něco i do html, ale index.html ve wordpressu není. Jinak stránky zatím dělám na doméně www.lacik.9e.cz . Ta značka vlevo nahoře je prvek slideru.

Editováno 17.12.2014 15:25

Nahoru Odpovědět

17.12.2014 15:24

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 12 zpráv z 12.