Autor Zpráva
responsive
Profil *
Příjemný večer,
chtěl bych poprosit někoho kdo tomu rozumí o něco lépe než já, jestli by mi dokázal vysvětlit jak funguje responzivní web, případně mě odkázal na dobrý článek. Četl jsem jich fakt hodně a druhý týden se snažím. Jak jsem si tak hrál, tak se mi třeba podařilo, že mi načetl pouze jednu možnost z podmínek, žádná a snad všechny možnosti jak to neudělat :D Moje skripty byly funkční pouze v případě, že jsem nastavoval podmínku pro pouze jeden prvek. Existuje něco co bych měl vědět něco jako množství prvků, které můžou být maximálně ovlivňovány? Nebo počet prvků v podmínce? Nebo způsob jak mají být podmínky řazeny za sebou? Jsem fakt docela zoufalý, věřím, že to bude jen hloupost...
Děkuji za pomoc
Bubák
Profil
Koukni na Responsivní design webu

Pokud neodhalíš příčinu problému, tak dej odkaz na živou ukázku. Pokud zatím nemáš vlastní web, vytvoř ukázku třebas na Živá ukázka
responsive
Profil *
Moje první úvaha byla sestavit jedny styly pro mobil a jiné pro PC. Takže jsem vytvořil 2 samostatně fungující varianty, ale pohromadě neběží. Šel jsem proto dál a vybíral z nich zvlášť prvky. Přiložený skript už nefunguje, ale před přidáním stylů pro logo a loga mi menu fungovalo a měnilo se podle zmenšování okna.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
        <style>
//_____________menu nad 1000
@media only screen and (max-width: 1000px)
 {
        .menu
        {
        position:absolute;
        top:30%;
        width:100%;
        background-color:LavenderBlush;
        }
        .menu ul
        {
        position:relative;
        left:20%;
        list-style:none;
        font-size:25px;
        }
        .menu li
        {
        width: 60%;
        margin-top:3px;
        margin-bottom:3px;
        color:chocolate;
        background-color:LavenderBlush;
        }
        .menu li a
        {
        text-decoration:none;
        color:chocolate;
        text-align:center;
        
        }
        .menu li a:active
        {
        color:brown;
        }
  }
//___________menu pod 1000
@media only screen and (min-width: 1000px)
 {
        .menu 
        {
        width: 70%;
        position:absolute;
        top:35%;
        left:30%;
        }
        .menu ul{margin: 0px; padding: 0px;}
        .menu li {float:left;list-style-type:none;}
        .menu li a { display:block; font-family: Segoe UI; height:35px; width:173px; line-height: 35px; text-align:center; text-decoration: none; color: SaddleBrown; background: white; transition: color .4s, box-shadow .4s; box-shadow:inset 0px 0 0 0 chocolate;}
        .menu li a:hover {box-shadow: inset 0 -5px 0 0 SaddleBrown; color: #660000; background: LavenderBlush;}
        .menu li ul {display: none;}
        .menu li:hover ul { display:block; position:absolute;}
        .menu li:hover ul li { display:block; float: none; height:35px; width: 173px; border-top: 1px solid black;}
        .menu li:hover ul li a {background: white; color: black; }
        .menu li:hover ul li a:hover {background: LavenderBlush; color: #660000;}
 }


//________logo pod 1000
@media only screen and (max-width: 1000px)
 {
        .logo
        {
        position:absolute;
        top:0%;
        left:0%;
        width: 100%;
        height: 20%;
        }
 }


//___________________logo nad 1000px

@media only screen and (min-width: 1000px)
 {
  .logo
  {
  position:absolute;
  top:0%;
  left:0%;
  width: 67%;
  height: 40%;
  margin-left: auto;
  margin-right: auto;
  margin-top:0px;
  }
 }  
        
   
        </style>
<!--logo-->         
<a href="index.html"><img src="files/logo.jpg" class="logo"></a>        
        
        
        
        
        
<!--menu-->        
      <div id="menu" class="menu">
    <ul>
      <li><a>Schody</a>
        <ul>
          <li><a href="schodyprime.html">Přímé</a></li>
          <li><a href="schodylomene.html">Lomené</a></li>
          <li><a href="namiru.html">Na míru</a></li>        
        </ul>
      </li>
      <li><a href="">Venkovní nábytek</a>
       <ul>
          <li><a href="stoly.html">Venkovní stolky</a></li>
          <li><a href="lavice.html">Venkovní lavice</a></li>       
        </ul>
      </li>                       
          <li><a href="postele.html">Postele</a></li> 
          <li><a href="zakazka.html">Výroba na zakázku</a>
          <li><a href="kontakt.html">Kontakt a objednávka</a>
    </ul>     
  </div>

  </body>
</html>



Hmm tak už mi to došlo... Omlouvám se, že jsem rušil... v css nenfunguje tahle poznámka // Děkuji
Tomáš123
Profil
responsive:
Niečo podobné sa tu riešilo nedávno. Treba myslieť na to, že CSS uznáva iba jediný typ komentárov: /* komentár */.

Nevhodne tiež postupuješ pri obaľovaní všetkých štýlov do nejakej, šírkou zobrazovacej plochy podmienenej, deklarácie. Prehliadače bez podpory media queries potom zobrazia web úplne bez CSS. Podobný účinok má načítavanie externých štýlopisov s hodnotou atribútu media obsahujúcou nejakú nepoznanú vlastnosť:
<link rel="stylesheet" media="screen and (max-width: 400px)" href="style.css">

Osvedčeným postupom je umiestniť responzívne deklarácie na koniec* CSS súboru (respektíve do neskôr načítavaného súboru v hlavičke HTML dokumentu):
div { /* Pre všetky prehliadače */
    width: 100px;
    height: 100px;
    background: red;
}
@media screen and (max-width: 1000px) {
    div {
        background: blue;
    }
}

* Na koniec súboru preto, lebo neskôr uvedená deklarácia má väčšiu prioritu: Kaskádování » Pozdější vyhrává.


Nasledujúcim ťa nechcem popliesť. Nie je to podstatné pre schopnosť vytvoriť responzívny web.
Podľa rýchleho prieskumu, ktorý som teraz spravil (iba v IE) mi vychádza, že samotná @media deklarácia obaľujúca pravidlá neprekáža. Problém sa vynorí až pri použití vlastností min-* alebo max-*. Je to pravda?
div { /* Pre všetky prehliadače */
    width: 100px;
    height: 100px;
    background: red;
}
@media screen { /* Pre všetky prehliadače */
    div {
        background: blue;
    }
}

/* Vďaka priorite neskôr uvedeného zápisu bude div modrý */
Bubák
Profil
//_____________menu nad 1000 není korektní zápis CSS komentáře
/*_____________menu nad 1000*/ takto má vypadat zápis CSS komentáře

/* _____________menu nad 1000 */ pro přehlednost se přidává mezera

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: