Medzera pri použití "height: 100vh"

Sekcia: Programovanie 15.09 | 15:40
Avatar Michal Gregorík Mint Mate 17.2  Používateľ

Zdravím. Budem síce za idiota, ale sám si už neviem poradiť. Pokúšam sa vytvoriť stránku. Kontajner má nastevné

height: 100vh;
, ale napriek tomu je medzi ním a dcérskym elementom prázdny prisetor- priložím obrázok. Zaujímavé je, že stránka nepresahuje za obrazovku. Skúšal som aj zväčšiť jednotlivé dcérske elementy, ale bez výsledku. Cieľom je mať vyplnenú celú obrazovku bez prázdnych medzier. Prikladám 2 css súbory a html súbor + snímku stránky.

HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
    • RE: Medzera pri použití "height: 100vh" 15.09 | 16:10
      Avatar Dušan_Kreheľ   Používateľ

      1) Aka jednotka je vh?

      2) Pouzivaj tento styl:

      body {
      	margin: 0px;
      	padding: 0px;
      	/* body okrem  pozadie (farbu/obrazok) uz nenastavuj
      	 * nie 100% vsetky prehladavace chapu body ako 100% div
      	 */
      }
      
      .main {
      	/* 
      	 * tu nastavuj ohranicenie a vsetko ine
      	 * 
      	 * nazov neni podstatny, napr. vhod je este page,
      	 * v nej bude cely obsah na zobrazenie
      	 */
      }
      



      3) V Opere 12.16 a Iceweasel/Firefox 45.3.0 mi ziadnu taku medzeru nerobi.

      • RE: Medzera pri použití "height: 100vh" 15.09 | 16:16
        Avatar Dušan_Kreheľ   Používateľ

        Ak by si s tym furt nevedel rady. Klikni na tu medzeru, klikni pravym a zvol „Inspect Element“. Pozri sa na CSS prvok tohto elementu, zapinat/vypnut, skusat nastavovat CSS v prehladavaci. Pripadne nadriadenych este.

        • RE: Medzera pri použití "height: 100vh" 15.09 | 16:26
          Avatar Michal Gregorík Mint Mate 17.2  Používateľ

          To som skúšal (okrem zmeny štýlov v tomto režime). V tej medzere je iba element div triedy kontajner, jeho prvý potomok je posunutý o čosi nižšie ako je horná hranica kontajnera, ale zaberá jeho celú šírku.

          Skúšal som kontajneru zadať

          padding-bottom: -5%;
          
          (viem, totálna blbosť) a medzera sa presunula na spodok obrazovky.

          HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
      • RE: Medzera pri použití "height: 100vh" 15.09 | 16:21
        Avatar Michal Gregorík Mint Mate 17.2  Používateľ

        Ďakujem za odpoveď.

        1) K vh jednotke.

        2) Doteraz som to tak robil. Ale vadilo mi, že stránka sa nikdy presne nezmestila na vykresľovaciu plochu prehliadača- buď bola menšia alebo väčšia a muselo sa scrollovať. Preto som začal robiť pokusy s týmto spôsobom a do určitej miery to aj funguje.

        HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
        • RE: Medzera pri použití "height: 100vh" 15.09 | 16:58
          Avatar Dušan_Kreheľ   Používateľ

          1) ok, nove som sa naucil

          2) Skus moje (nedokoncene).

          Odporucam Ti este nastudovat pre prisposobavaniu obrazovky(pouzi, kde je vhod).

          • RE: Medzera pri použití "height: 100vh" 15.09 | 17:25
            Avatar Michal Gregorík Mint Mate 17.2  Používateľ

            Prispôsobovanie zatiaľ neriešim, musím najskôr pochopiť základy.

            2) Ďakujem Ti za príklad. Budem na ňom asi robiť experimenty. Ale najskôr si nájdem nejakú knihu o CSS a naštudujem si ju a precvičím sa na príkladoch.

            Práve som zistil, že tá chyba je tam väčšia a mám to celé domýlené. Pokiaľ prídem na chybu, asi iba opravím moje staré stránky.

            HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
            • RE: Medzera pri použití "height: 100vh" 15.09 | 20:02
              Avatar Dušan_Kreheľ   Používateľ

              Ak online, tak odporucam: www.jakpsatweb.cz ... potom neskor si prejdi www.w3schools.com/. Alebo kombinuj.

              Ked to podla potreby budes vediet, pozri frontend kniznicu bootstrap (ak nemas rad JS, tak si vyhod z nej JS)

              K prilohe: Toto si vo Firefoxe videl?

              • RE: Medzera pri použití "height: 100vh" 15.09 | 21:07
                Avatar Michal Gregorík Mint Mate 17.2  Používateľ

                Ďakujem Ti za návrhy. w3schools som už používal, ale len pre konkrétne situácie.

                Už som dostal odporúčanie, aby som sa venoval bootstrapu, ale nemám predstavu, čo to vlastne je a ani ma to nejako neláka.

                K prílohe: Nie nevidel. Keby som to chcel využiť na svojom notebooku, asi by vybuchol.

                HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
                • RE: Medzera pri použití "height: 100vh" 15.09 | 23:11
                  Avatar Dušan_Kreheľ   Používateľ

                  Skus tento program pingendo.com alebo najdi si podobne. Toto som pouzival. Nasiel som i nieco lepsie, ale teraz uz neviem co. Skus hladat ine programy.

                  To je ako, ked porovnas asambler a C. Resp. C (musis sa starat o pamat) a PHP(az tak sa az tak detalne nestaras o pamet).

                  To nie je pravda. Aktualne som na 900Mhz PC a 500MB RAM. A dalo to. ... Ale na internzitevne pouzivanie to nestaci na mojom pc.

                  Na w3schools je to formou tutorial, ale skor technicky ako teoreticky. Ten jak psat web je super pre zaciatocnikov.

                  A uc sa hlavne HTML5 uz teraz. Ne primarne 4.

                  • RE: Medzera pri použití "height: 100vh" 16.09 | 09:06
                    Avatar Michal Gregorík Mint Mate 17.2  Používateľ

                    Ďakujem, vyskúšam.

                    HTML4 som nikdy nepoužíval. Skôr som používal XHTML. V poslednej dobe sa aj snažím používať HTML5.

                    HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
                    • RE: Medzera pri použití "height: 100vh" 16.09 | 09:56
                      Avatar Michal Gregorík Mint Mate 17.2  Používateľ

                      Tak, bootstrapu sa radšej vyhnem, pretože: má dosť nevýhod - obzvlášť tie komentáre sú zaujímavé.

                      HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
    • RE: Medzera pri použití "height: 100vh" 15.09 | 17:49
      Avatar Juraj Manjaro - OpenBox  Používateľ

      Ak som to správne pochopil tak ti vadí medzera, ktorá vzniká na začiatku.

      Môj tip je že je zle nastavený margin loga a textu.

      pre logo_text máš nastavený margin 5% zo všetkych strán

      rovnako samotný nadpis H1 má tiež nastavený (by default ?) margin

      mohlo by to vyzerať nejako takto

      .logo_text {
        margin: 0% 5% 5% 5%;
      }
      .logo_text h1 {
        margin-top: 0px;
      }
      
      • RE: Medzera pri použití "height: 100vh" 15.09 | 17:59
        Avatar Michal Gregorík Mint Mate 17.2  Používateľ

        Vďaka, čiastočne to pomohlo. Ale ono je to asi celé domrvené. Zrejme mi niektoré dcérske elementy presahujú rodičov. Medzera je teraz naspodku.

        HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD
        • RE: Medzera pri použití "height: 100vh" 15.09 | 18:03
          Avatar Michal Gregorík Mint Mate 17.2  Používateľ

          Tak nie, ide to. Dcérske elementy nevyužívali celú výšku, ktorú mali k dispozícii ale zmena proporcií fungovala až po aplikovaní tvojho návrhu. Veľká vďaka!

          HP Compaq nx8220, Intel Pentium M 1,73GHz, 2GB RAM, 40GB HDD