Diskuze: Responzivní webdesign

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

Zjistit více...

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

Aktivity

tbartolen

Člen

tbartolen:7.11.2014 18:26

Ahoj, bohužel jsem si uzavřel téma dolejš, takže nejprve trošku zrekapituluju o co jde:
Tvořím si responzivní web, na radu z minulého vlákna, pomocí media queries. Našel jsem si k tomu tento návod :
https://www.youtube.com/watch?…
Podle kterého víceméně přetvářím svoje stránku tak, aby fungovali všude. Ale dostal jsem se do trošku ošemetné situace při předělávání mého meníčka do podoby, jakou tam má on. Respektive mi to moc nejde dát dohromady pod ty classy, které on má pojmenované .mainHeader nav, .mainheader img ...atd.
Pro úplnost moje současné CSS:

body {
      background: url('images/keltipozadi.png')#0099ff;
      font: 87.5% Verdana; /*mělo by se rovnat 14px ze zakladu 100%*/
      line-height: 1.5;
      text-align: left;
      min-width:  960px;
           }
           a:link, a:visited { /*všechny hypertextaky do barvicky*/
               color:#CF5C3F;
                }
               a:hover, a:active { /*nastaveni barvy hoveru a pisma v hoveru*/
               background-color:#CF5C3F;
               color: #fff;
               }
.body {
    margin: 0auto;
    width: 70%; /*posunuje mi obrazek na 70% ale i text, uvidim co dal*/
    clear: both;

           }
     .mainHeader img{
         height: auto;
         /*tady měl margin 2%, smazal jsem, libi se mi vice*/
         clear: both;
     }

     .mainHeader nav {    /*přesunuto zespoda, stylování zakl. navigace, toho nejhrubšího formatu a picovinek*/
         background-color: #666; /* barvu pak zmenit, ted to aspon vidim */
         /*nebudu nechavat, zkouška abych to viděl, spolu s background a width mi definuje sedou zonu na strance ...(height)*/
         /*sem dava border radius, ale ja tuhle kokotinku nechci, takže zahoz, otazka jestli to bude potřeba dát kvuli mozile a webkitu na hodnoty 0*/
         margin: 0 auto;
         width: 960px;
         text-align: center;
}
    .mainHeader ul {} /*tohle mi nefunguje, ale ta sekce co tam dělá on, je u mě v nav ul pár řádku dolejš.*/

    .mainContent { /*starašlivej bordel, pak to budu asi přesunovat dolu*/
        line-height: 25px;
         /*pokud by se to vše překrývalo*/

    }
    .content {
        width: 70%;
        float:left;
    }

    .topcontent {
        background-color: #fff;
        padding: 3% 5%;
        margin-top: 2%; /*nastaveni odrazky zezhora*/
    }
    .bottomcontent {
        background-color: #fff;
        padding: 3% 5%;
        margin-top: 2%;
    }

    .top-sidebar {
        width:21%;
        float:left;
        background-color: #fff;
        margin-left: 3%; /*mezera mezi maincontent a sidebarem*/
        margin-bottom: 2%;
        margin-top: 2%;
        padding: 2% 3%;
    }
    .post-info { /*pod velkym nadpisem*/
        font-style: italic;
        color:#999;
        font-size: 85%
    }
    .middle-sidebar {
        width:21%;
        float:left;
        background-color: #fff;
        margin-left: 3%;
        margin-bottom: 2%;
        margin-top: 2%;
        padding: 2% 3%;
    }
    .bottom-sidebar {
        width:21%;
        float:left;
        background-color: #fff;
        margin-left: 3%;
        margin-bottom: 2%;
        margin-top: 2%;
        padding: 2% 3%;
    }

    .mainfooter { /*stylovani celeho bloku*/
        height: 40px;
        width:100%;
        float: left;
        background-color: #666;
        margin-top: 2%;
        margin-bottom: 2%;
    }
    .mainfooter p { /*stylovani textu*/
        width: 92%;
        margin: 10px;
        color: #fff;


    }

    @media only screen and (min-width: 150x) and (max-width: 600px)
    {

    }

/* dalsi navigaci mam resenou dole, nebudu to dál psát podle něj, akorát bych si to celý */

.centrovac {
          text-align: center;
                    }

/* zacatek menu urceni rolovani */
.druhaUroven, .tretiUroven{
         display: none;
 }
 .prvniUroven{
  display: inline-block;
 }
/* urceni ze prvni druha a treti uroven bude v blokach*/
 .prvniUroven li:hover > .druhaUroven,  .druhaUroven li:hover > .tretiUroven  {
  display: block;
 }

 nav ul {
   background: #1C4E71;
  padding: 0px 0px 0px 0px;
  list-style-type: none;
  position: relative;
  display: block;
  margin: 0px;
 } /*jak vypada menu v ul, mela by to byt prvni uroven*/


 li {
  float: none;
   } /*abych to mel v radku, plati i pro prvni uroven left */
.prvniUroven > li {
  float: left;
  }

 li:hover {
  background: #14a1e5;
  } /*barva hoveru*/


.prvniUroven li a {  /*stylovani prvni urovne*/
  display: block;
  padding: 0px 18px;
  color: #fff;
  text-decoration: none;
  margin: 0px 0px 0px 0px;
  float: none;
  line-height: 35px;
  padding: 0 18px;
  border-right: 1px solid #6E9DBE;
  }

 .druhaUroven {  /*stylovani druhe urovne*/

  background:  #1C4E71;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 35px;
  }

  .druhaUroven li { /*styl druhe urovne li*/
   border-top: 1px solid #6b727c;
   border-bottom: 1px solid #575f6a;
   position: relative;
  }

  .druhaUroven li a { /*styl druhe urovne li a, nevim proc to musi byt desetkrat a vse ruzne*/
    padding: 0px 18px;
    color:#fff;

  }

  .tretiUroven { /*styl treti urovne*/
  position: absolute;
  left: 100%;
  top:0;
  }

A moje současné HTML:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <link rel="stylesheet" href="keltistyl.css" type="text/css"/>
      <title> SK Kelti 2008</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
 <body class="body">
    <header class="mainHeader">
        <!--možná budu vracet centrovač podle toho jak dopadne mainheader-->
        <p class="centrovac">
      <img src="images/kelti.jpg" alt="keltinahore"/>
        </p>

        <nav>

        <ul class="prvniUroven">
                <li><a href="index.php?stranka=uvod">Úvod</a></li>
                <li><a href="index.php?stranka=muzi">Muži</a>
                        <ul class="druhaUroven">
                                <li><a href="#">Soupiska</a></li>
                                <li><a href="#">Novinky</a></li>
                                <li><a href="#">Zápasy</a></li>
                                <li><a href="#">Rozpis</a></li>
                                <li><a href="#">B tým</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>

               </ul>
                <li><a href="index.php?stranka=mladez">Mládež</a>
                        <ul class="druhaUroven">
                                <li><a href="#">Minipřípravka</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                                <li><a href="#">Přípravka</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                               <li><a href="#">Mladší Dorost</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                                <li><a href="#">Starší Dorost</a>
                                        <ul class="tretiUroven">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
                 <li><a href="index.php?stranka=zeny">Ženy</a>
                        <ul class="druhaUroven">
                                <li><a href="#">Soupiska</a></li>
                                <li><a href="#">Novinky</a></li>
                                <li><a href="#">Zápasy</a></li>
                                <li><a href="#">Rozpis</a></li>
                        </ul>
                </li>

                <li><a href="index.php?stranka=keltishop">Keltí shop</a></li>
                <li><a href="index.php?stranka=nizborskyhokejbal">Nižborský hokejbal</a></li>
                <li><a href="index.php?stranka=fotogalerie">Fotogalerie</a></li>
                <li><a href="index.php?stranka=kontakt">Kontakt</a></li>
                <li><a href="index.php?stranka=sponzori">Sponzoři</a></li>
        </ul>

 </nav>

 </header>

     <div class="mainContent"> <!-- Div pro hlavni obsah na strance, proto dalsi divi, asi pak budou ovlivnovat sidebar ?-->
         <div class="content">
             <article class="topcontent">  <!--nastaveni hlavnich novinek na strance-->
                 <header>
                     <h2><a href="#" title="First post">First post </a></h2>

             <footer>
                 <p class="post-info">This post is written by Tomas</p>
             </footer>
             <content>
                 <p>O uplynulém víkendu čekal na naši minipřípravku poslední ze série podzimních turnajů regionálního přeboru.
                 <p>Los byl tentokrát k našim nejmenším opravdu neúprosný, když je v konkurenci dalších deseti týmů přiřadil do „skupiny smrti“
                     ve společnosti vítěze posledního turnaje z Hostivaře, třetího celku Kert Parku Praha a domácího SK Rebel, který chtěl po</p>
                 <p>řadě „bramborových umístění“ konečně proniknout na pomyslné stupně vítězů. Na minulém turnaji stříbrní Keltíci se ale i</p>
                 <p>s touto výzvou vypořádali náramně a potvrdili, že na podzim jim pozice na stupních vítězů opravdu sluší.</p>
             </content>
             </article>

            <article class="bottomcontent">  <!--nastaveni hlavnich novinek na strance-->
                 <header>
                     <h2><a href="#" title="Second post">Second post </a></h2>

             <footer>
                 <p class="post-info">This post is written by Tomas</p>
             </footer>
             <content>
                 <p>O uplynulém víkendu čekal na naši minipřípravku poslední ze série podzimních turnajů regionálního přeboru.
                 <p>Los byl tentokrát k našim nejmenším opravdu neúprosný, když je v konkurenci dalších deseti týmů přiřadil do „skupiny smrti“
                     ve společnosti vítěze posledního turnaje z Hostivaře, třetího celku Kert Parku Praha a domácího SK Rebel, který chtěl po</p>
                 <p>řadě „bramborových umístění“ konečně proniknout na pomyslné stupně vítězů. Na minulém turnaji stříbrní Keltíci se ale i</p>
                 <p>s touto výzvou vypořádali náramně a potvrdili, že na podzim jim pozice na stupních vítězů opravdu sluší.</p>
             </content>
             </article>
         </div>
     </div> <!--konec hlavniho obsahu a jeho divu, pouze tady mi bude fungovat div main content-->

     <aside class="top-sidebar"> <!--nastaveni sidebaru, top stred a bottom, nic tezkeho, vidis to blbe-->
         <article>
             <h2>Top sidebar</h2>
             <p> uplynulém víkendu čekal na naši minipřípravku poslední ze série podzimních turnajů regionálního přeboru. </p>
         </article>
     </aside>
      <aside class="middle-sidebar">
         <article>
             <h2>Middle sidebar</h2>
             <p> uplynulém víkendu čekal na naši minipřípravku poslední ze série podzimních turnajů regionálního přeboru. </p>
         </article>
     </aside>
      <aside class="bottom-sidebar">
         <article>
             <h2>bottom sidebar</h2>
             <p> uplynulém víkendu čekal na naši minipřípravku poslední ze série podzimních turnajů regionálního přeboru. </p>
         </article>
     </aside>

     <footer class="mainfooter"> <!--footer div a kokotinky-->
         <p> Copyright &copy; <a href="#" title="Tomas"> neumim.com</a></p>
     </footer>





     <!-- zatim bych nechal cele byt!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
     <article class="pravastrana" >
         <Header>
             <h1>Hlavní novinky</h1>
             <section>
                 <?php /* pauzička !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                 if (isset($_GET['stranka']))
                    $stranka = $_GET['stranka'];
                    else
                    $stranka = 'uvod';
                 if (preg_match('/^[a-z0-9]+$/', $stranka))
                {
                    $vlozeno = include('podstranky/' . $stranka . '.php');
                 if (!$vlozeno)
                    echo('Podstránka nenalezena');
                        }
                else
                 echo('Neplatný parametr.');
                 ?>
             </section>
         </Header>
          <p> cndfsfjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj </p>
      </article>

    <article class="levastrana">

    </article>

     <footer>
     Vytvořil Tomáš Bartolen
     </footer>
</body>

Problém je v tom , že pokud zadám do CSS:

@media only screen and (min-width: 150x) and (max-width: 600px)
    {.body {
    margin: 0auto;
    width: 70%; /*posunuje mi obrazek na 70% ale i text, uvidim co dal*/
    clear: both;

    }

Tak se mi to celé rozhodí, a já tuším, že to je tím, že mám rozházené ty jednotlivé urovně menu mimo mainHeader ...jenže to nemohu dostat dohromady...nebyl by někdo, kdo by mi s tim trošku poradil...minimálně postup jak to zadávat postupně jednotlivé urovně...

Poznámek si nevšímejte, jsem začátečník, a jinak bych se v tom neorientoval..

Děkuji :-)

Odpovědět

7.11.2014 18:26

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:7.11.2014 23:18

Takže po 4 hodinkách zkoušení, mi už media query nerozhazuje navigaci, ale responsivita nefunguje...kod je pořád stejný..:-/

Nahoru Odpovědět

7.11.2014 23:18

Navštiv www.fb.com/skkelticz

Honza Bittner

Tvůrce

Honza Bittner:7.11.2014 23:49

Obecně se lépe s responzivními weby pracuje formou "mobile first", což již několik týdnů zkouším, avšak je sice možná trochu složitější na přemýšlení, ale vše ve výsledku funguje lépe.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

7.11.2014 23:49

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

tbartolen

Člen

tbartolen:8.11.2014 10:25

Já budu muset začít od začátku a udělat nejdříve fungující jednoduché menu responsivně, a pak budu postupovat k tomu rolovacímu...jednoduše to nemužu rozchodit za žadnou cenu :-/

Nahoru Odpovědět

8.11.2014 10:25

Navštiv www.fb.com/skkelticz

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

Nejčastěji vyhledáváné

Diskuze: Responzivní webdesign