NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Postranní lišta, jak se jí zbavit?

Aktivity
Avatar
Kamil
Člen
Avatar
Kamil:19.9.2021 21:01

Ahoj,

jak prosim dokáži eliminovat tu dolní lištu postranní? Nerad bych jí na webu měl.

HTML kod.

<section class="wrapper">
           <header>
               <p>Pokus s.r.o</p>

               <nav>
                   <ul>
                     <li><a href="#">Úvod</a></li>
                     <li><a href="#">Katalog</a></li>
                     <li><a href="#">Služby</a></li>
                     <li><a href="#">Akce</a></li>
                     <li><a href="#">Kontakt</a></li>
                   </ul>
               </nav>

           </header>


          <section class="slide-show">
              <figure>
                  <section class="slide">
                       <img src="img/kuchyne.jpg">
                  </section>

                  <section class="slide">
                       <img src="img/schody.jpg">
                  </section>

                  <section class="slide">
                       <img src="img/schody2.jpg">
                  </section>

                  <section class="slide">
                        <img src="img/metro.jpg">
                  </section>

                  <section class="slide">
                       <img src="img/dalsi.jpg">
                  </section>
           </figure>

          </section>



     </section>

CSS kod

/* prokaždý prvek stránky použij toto defaultni nastavení */
*{padding:0px;margin:0px;}
/* Obal celého webu */
.wrapper{
    width:1366px;
    height:900px;
}
header{
    width:100%; /* 100% = 1366px */
    height:90px;
    border-bottom:1px solid black;

}
header p{
    position:absolute;top:3%;left:15%;
    font-family: 'Bonheur Royale';
    font-size:40px;
}
header nav {
    position:absolute;top:5%;left:55%;
}
header li{
    display:inline;
}
header a{
    padding-left:18px;
    padding-right:18px;
    font-family: 'Noticia Text', serif;
    background:#383838;
    color:white;
    text-decoration:none;
}
.slide-show{
    width:100%;
    height:60%;
    overflow:hidden;

}
.slide-show figure section{
    float:left;
    width:20%;
}
.slide-show figure img{
    width: 100%;
    height:400px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    float:left;
    object-fit: cover;
}
.slide-show figure{
    position:relative;
    width:500%;
    margin:0;
    animation:animate 100s infinite;
}


@keyframes animate {
    0%{left:0%;}
    10%{left:0%;}
    12%{left:-100%;}
    22%{left:-100%;}
    24%{left:-200%;}
    34%{left:-200%;}
    36%{left:-300%;}
    46%{left:-300%;}
    48%{left:-400%;}
    58%{left:-400%;}
    60%{left:-300%;}
    70%{left:-300%;}
    72%{left:-200%;}
    82%{left:-200%;}
    84%{left:-100%;}
    94%{left:-100%;}
    96%{left:0%;}
}
/*@keyframes slide {
    25%{
        background-image:url("../img/kuchyne.jpg");

    }
    50%{
        background-image:url("../img/schody.jpg");

    }
}
*/
 
Odpovědět
19.9.2021 21:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.9.2021 10:16 
css: overflow https://www.jakpsatweb.cz/css/overflow.html
css-img: width:100%;
css-div: width:auto;

Zkus se priste zeptat v tematu HTML a CSS (https://www.itnetwork.cz/…programovani)

 
Nahoru Odpovědět
20.9.2021 10:16
Avatar
Kamil
Člen
Avatar
Kamil:20.9.2021 14:01

dobře, takže jak by si to prosim upravil?

 
Nahoru Odpovědět
20.9.2021 14:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.9.2021 15:06

Nastavil prvku, ktery zobrazuje listu, overflow:hidden nebo overflow-x:hidden? Na tom jakpsatwebu to neni jasne?
https://www.jakpsatweb.cz/…verflow.html

"Zobrazit tento příklad na vlastnost overflow." to te dostane sem a tam je to videt
https://www.jakpsatweb.cz/…erflow2.html

Pouze jedna lišta, ne obě
V určitých případech se dají zobrazit jenom některé lišty:
Pouze horizontální lišta: overflow-x: auto; https://www.jakpsatweb.cz/…rflow-x.html
Pouze vertikální lišta: overflow-y: auto; https://www.jakpsatweb.cz/…rflow-y.html

Kdybych delal ja, tak to udelam tak, aby ta stranka nepretekala v x ani y.
Zkus si tam zapnout, border:1px solid #f00, a zkus menit barvy pro kazdy prvek. Abys zjistil, co konkretne preteka.

.wrapper{
    width:1366px; /* ta nastavujes 1366 px sirku toho vseho a sirku okna mas mensi */
    height:900px;
}
/* pak ti 100% width nastavi take na 1366 a vytece ti z okna, zobrazi scrolovani */
/* dej tam 366px a uvidis, ze se zadny scroll nezobrazi */
Editováno 20.9.2021 15:07
 
Nahoru Odpovědět
20.9.2021 15:06
Avatar
Kamil
Člen
Avatar
Odpovídá na Peter Mlich
Kamil:20.9.2021 19:46

Udělá to ta vlasnost

height:900px;

Což, ale moc nechápu.

 
Nahoru Odpovědět
20.9.2021 19:46
Avatar
Kamil
Člen
Avatar
Kamil:20.9.2021 19:53

Pokusil jsem si obarvit všechny sekce a stejně to nedokáži odvodit, který prvek mi přeteká.

 
Nahoru Odpovědět
20.9.2021 19:53
Avatar
Kamil
Člen
Avatar
Kamil:20.9.2021 21:12

x

Editováno 20.9.2021 21:14
 
Nahoru Odpovědět
20.9.2021 21:12
Avatar
Kamil
Člen
Avatar
Kamil:20.9.2021 21:17

Nechápu to. Monitor mám 1366x657. Holý HTML a css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>

</body>
</html>
*{
    padding:0px;
    margin:0px;
}
body{
    width:1360px;
    height:657px;
}

A stejne tam tu lištu mám...

Editováno 20.9.2021 21:20
 
Nahoru Odpovědět
20.9.2021 21:17
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:21.9.2021 7:22

No, ale, prohlizec nepocita sirku obsahu podle rozliseni okna. On do toho zapocitava okraje prohlizece i scrollbar. Takze se dava proste mensi,
Navic, body ma tusim margin nebo padding asi 6px. Ale, ten jsi nuloval.

Podbarveni je ok, ale to neresi uplne okraje objektu. 2px border dela mezi objekty mezery. A pokud jim das ruznou barvu, tak vidis, co jde mimo okraj, ktery je ve kterem.

*{
    padding:0px;
    margin:0px;
border:2px solid #f00;
}

U tveho pretekani byz mel videt levy okraj, ale uz ne uzavreny pravy.

+------------+---------
|obrazek     |
+------------+
+-----------------------

Cili, jeden z tech html elementu vytekl mimo okraj okna.
Ale, take nemusis videt nic, kdyz tam pridas marginy, padingy. Ktere muzou tvorit takovy pruhledny okraj. Ale, ty tam nemas, v tom druhem pokusu, tos tam odstranoval.

Editováno 21.9.2021 7:23
 
Nahoru Odpovědět
21.9.2021 7:22
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:21.9.2021 14:27

https://getbootstrap.com/…layout/grid/
Bootstrap treba pocita na strance 12 sloupcovy lauot a sirku jeste upravuje. Zapocitava tez upravy pixelu pro ruzne prohlizece.

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Cili, kdybych to delal ja, tak vyuziji css bootstrap pro vytvoreni layoutu. Pomoci css classu je pak mozne nastavit ruzne chovani pro zarizeni s ruznou sirkou. A prvky uvnitr roztahnout do 100% sirky toho sloupce.

 
Nahoru Odpovědět
21.9.2021 14:27
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 10 zpráv z 10.