NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Mezi 10:00 až cca 10:30 proběhne odstávka sítě z důvodu aktualizace. Web bude po celou dobu nedostupný.

Diskuze: responzivní design a z-index

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

Aktivity
Avatar
Radim
Člen
Avatar
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:ur­l(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
Avatar
Pavel Mareš
Tvůrce
Avatar
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 ...
Avatar
Radim
Člen
Avatar
Odpovídá na Pavel Mareš
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
Avatar
Neaktivní uživatel
Člen
Avatar
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
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na Radim
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 ...
Avatar
Radim
Člen
Avatar
Odpovídá na Pavel Mareš
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:ur­l(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
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Radim
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
Avatar
Radim
Člen
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
Radim
Člen
Avatar
Radim:17.12.2014 8:51

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

 
Nahoru Odpovědět
17.12.2014 8:51
Avatar
Neaktivní uživatel
Tvůrce
Avatar
Odpovídá na Radim
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
Avatar
berry309
Tvůrce
Avatar
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
Avatar
Radim
Člen
Avatar
Odpovídá na Neaktivní uživatel
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.