Diskuze: responzivní design a z-index

HTML a CSS HTML a CSS responzivní design a z-index American English version English version

Avatar
Radim
Člen
Avatar
Radim:

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š
Redaktor
Avatar
Pavel Mareš:

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  +2 16.12.2014 6:39
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Radim
Člen
Avatar
Odpovídá na Pavel Mareš
Radim:

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
Lukáš Tesař:

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

 
Nahoru Odpovědět  -1 16.12.2014 8:01
Avatar
Pavel Mareš
Redaktor
Avatar
Odpovídá na Radim
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Radim
Člen
Avatar
Odpovídá na Pavel Mareš
Radim:

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
Jiří Gracík
Redaktor
Avatar
Odpovídá na Radim
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
Radim
Člen
Avatar
Odpovídá na Jiří Gracík
Radim:

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:

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

 
Nahoru Odpovědět 17.12.2014 8:51
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Radim
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
berry309
Redaktor
Avatar
berry309:
@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
HTML a CSS kodér - www.josefberan.eu
Avatar
Radim
Člen
Avatar
Odpovídá na Jiří Gracík
Radim:

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.