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
albertpatera
Tvůrce
Avatar
albertpatera:4.5.2015 21:47

Ahoj,

mám dotaz...nešla by udělat speciální html stránka pro mobilní zařízení ? (pro rozlišení 800px x 400px)
protože když dám

@media (max-width: 800px) {
  #hlavni  {
  background-image: url("images/btn.png");
  }



@media (max-width: 800px) {
  #hlavni a {
  background-image: url("images/btn_blank.png");
  }

a v HTML mám :

<div id="hlavni">



            <a href="#menu">Více informací</a>
       </div>

Kod nějak nefunguje :-(
Chci, aby odkaz měl obrázek se šipkou dolu (pro mobilní zařízení), ale kdybych to udělal, že bych do tagu <a>, vložil tag <img>, tak zase ztratím ten odkaz Více informací, který tam je pro normální počítače. Nemá někdo nějaký návrh, jak to udělat? díky

Editováno
 
Odpovědět
4.5.2015 21:47
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na albertpatera
Jan Lupčík:4.5.2015 21:51

Proč tam máš 2× max-width? :)

Dej to odkazu třeba obrázek a text a na mobilu zakryj text a na počítači ho odkryj a zakryj šipku. ;)

display: none; /* zakrytí */
display: inline; /* zobrazení */
Editováno
Nahoru Odpovědět
4.5.2015 21:51
TruckersMP vývojář
Avatar
albertpatera
Tvůrce
Avatar
Odpovídá na Jan Lupčík
albertpatera:4.5.2015 22:10

nefunguje.....ale stejně mi nevezme @media screen divi, pritoze když dám :

@media (max-width: 800px) {
   #hlavni a {
   font-size:25px;
   }

, tak se mi to v mobilu vůbec nezmění

 
Nahoru Odpovědět
4.5.2015 22:10
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na albertpatera
Tomáš Maňhal:4.5.2015 22:15

Viewport máš v hlavičce definovaný?

 
Nahoru Odpovědět
4.5.2015 22:15
Avatar
TomasGlawaty
Člen
Avatar
TomasGlawaty:4.5.2015 22:20

podle syntaxe, používáš SASS?
a máš ten @media blok "zahnízděný" v bloku #hlavni ?

#hlavni{
   // kod pro hlavní
   @media (max-width: 800px){
      // breakpoint pro #hlavni
   }
   a{
     // kod pro #hlavni a
     @media (max-width: 800px){
      // breakpoint pro #hlavni a
      }
   }
}

takhle by to podle mě mohlo být...

Editováno
 
Nahoru Odpovědět
4.5.2015 22:20
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na albertpatera
Honza Bittner:4.5.2015 22:22

Ujisti se, že se tvé @media podmínky nepřekrývají a že máš v hlavičce HTML nastaven viewport - viz http://www.itnetwork.cz/…zivni-design.

Určitě můžeš udělat stránku pro mobily a pc zvlášť, ... ale ... nedoporučuji. Zaprvé to musíš odchytávat na serveru a podle toho dodávat určitou šablonu. Budeš muset udržovat 2 stránky. Stránka nebude responzivní -> nemůžeš na PC zmenšit tak, aby se ti správně zobrazila...

Btw. ujisti se také, že máš správně závorky ->

@media (max-width: 800px) {
  #hlavni  {
    ... kód ...
  }
}
Editováno
Nahoru Odpovědět
4.5.2015 22:22
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na albertpatera
TomasGlawaty:4.5.2015 22:36

Aha SASS asi nepoužíváš, jsem už asi přepracovaný :D

musíš se ujistit, že selektory, které jsou zapsané v media bloku jsou zapsané úplně stejně i "normálním" stylu.
Jinak na tohle stačí jenom jeden media blok.

@media (max-width: 800px) {
   #hlavni  {
      // kód
   }
   #hlavni a{
     // kód
   }
}

v tvojí "ukázce" kódu chybí ukončovací závorky media bloků :)

 
Nahoru Odpovědět
4.5.2015 22:36
Avatar
albertpatera
Tvůrce
Avatar
Odpovídá na Honza Bittner
albertpatera:4.5.2015 22:51

Bohužel jsem chybu nenašel

Pro jistotu posílám celé CSS pro mobily:

/* CSS Document */

@media (max-width: 800px) {
  body {
  background: url('images/background_mobile.png') repeat-x;
  }

@media (width: 400px) {
  h1 {
  font-size:-100px;
  margin-top:150px;
  text-shadow: 3px 3px 3px #aaaaaa;
  }

@media (max-width: 800px) {
  h1 {
  font-size:-500px;
  margin-top:100px;
  text-shadow: 3px 3px 3px #aaaaaa;
  }

div {
    font-size:26%;

}


@media (max-width: 400px) {
  #hlavni  {
  width:50px;
  }



@media (max-width: 800px) {
  #hlavni a {
  width:50px;
  }

@media (max-width: 800px) {
  img {
  display:inline;
  }

@media (max-width: 800px) {
  #hlavni a {
             font-size:25%;
  }
@media (max-width: 800px) {
   a {
    display: none;
   }

@media screen and (max-width: 800px) {
  .galerie a img {
    width:1000px;
  }
}

a HTML

<!DOCTYPE html>
<html lang="cs-cz">
  <head>
  <meta charset="UTF-8">
  <meta name="author" content="Albert Patera">
  <link rel="stylesheet" href="style.css" type="text/css">
  <link rel="stylesheet" href="mobile.css" type="text/css">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Albert Patera</title>
  </head>
  <body>
       <h1>Albert Patera</h1>











            <div class="galerie">
            <a href="#menu"><img src="http://bertuvweb.8u.cz/images/btn.png">Více informací</a>
            </div>
       <div id="menu">
          <ul>
            <li><a href="#omne"  title="O mně">O mně</a></li>
            <li><a href="#skills"  title="Co umím">Dovednosti</a></li>
            <li><a href="#price"  title="Ceník služeb">Ceník</a></li>
            <li><a href="#contact" title="Kontakt">kontakt</a></li>
           </ul>
       </div>

       <div id="container">
         <div id="omne">
          <h2>O mně</h2>
          <p>Lorem ipsum dolor sit amet consectetuer id et amet nibh Vestibulum. Dolor id et enim id eleifend dolor vitae feugiat et tellus. Metus Maecenas libero Sed Quisque pretium Aliquam leo velit consectetuer vel. Donec suscipit ac hendrerit senectus sem Vestibulum pretium id rutrum mus. Et orci laoreet justo netus eu nunc urna augue convallis vitae. Pharetra vel Curabitur ut massa.</p>

           </div>
       </div>
































       <div id="home">
        <p>gjhghgggjhgjgjhghg</p>
       </div>
  </body>
</html>

fakt nevim, kde je chyba

 
Nahoru Odpovědět
4.5.2015 22:51
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na albertpatera
Tomáš Maňhal:4.5.2015 23:21

Nemáš uzavřené závorky

 
Nahoru Odpovědět
4.5.2015 23:21
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:4.5.2015 23:25

Nemáš ukončené závorky... Btw. v čem děláš? By tě to mělo upozornit. :`

Také to "všechno" můžeš spojit pod jedno @media, tedy např.

@media (max-width: 800px) {
  #hlavni a {
    width:50px;
  }

  img {
    display:inline;
  }

  #hlavni a {
    font-size:25%;
  }

  a {
    display: none;
  }
} /* <-- konec @media */

Udělej to všechno tímto způsobem a pak dej vědět co a jak. Nejlépe nahraj kód na nějakou webovku, kde se to dá projet online.

@media (width: 400px)

A toto ti nic tuším neudělá - to bys musel být přesně na 400px. Využívej max-* a min-*.

Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
4.5.2015 23:25
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
albertpatera
Tvůrce
Avatar
Odpovídá na Honza Bittner
albertpatera:5.5.2015 0:08

webovka je : http://bertuvweb.8u.cz/

a jinak to nic nedělá :-(

 
Nahoru Odpovědět
5.5.2015 0:08
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na albertpatera
Honza Bittner:5.5.2015 0:15

Bože...

Udělej si prostě sandbox, kam si dáš 2 divy, které si vyzkoušíš s @media a naučíš se to na nich...

Také si spoj ty 2 .css soubory, ať v tom nemáš zmatek. Spoj si také konečně všechny stejné @media.

Nahoru Odpovědět
5.5.2015 0:15
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na albertpatera
Honza Bittner:5.5.2015 0:18

Btw. ve Chromu dej CTRL + SHIFT + I (otevře se ti DevTools) -> klikni na ikonku mobilu a nahoře se ti zobrazí takové lišty s označením, jak ti vychází jednotlivé @media "zalomení".

Nahoru Odpovědět
5.5.2015 0:18
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na albertpatera
TomasGlawaty:5.5.2015 7:02

Četl jsi vůbec co jsme ti psali? chybí ti ukončovací závorky u media bloků.
Déle máš nesmyslně mnoho stejných media pravidel.
Jak ti radí Honza, spoj to normálně do jednoho souboru, a stejné media taky.

tady máš "ukázku", z toho to snad pochopíš:
http://jsfiddle.net/4k0d65up/

Editováno
 
Nahoru Odpovědět
5.5.2015 7:02
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 14 zpráv z 14.