Diskuze: Element sa nezmensi pri zmenseni okna prehliadaca

Aktivity

Neaktivní uživatel

Člen

Neaktivní uživatel:25.10.2021 18:41

Ahojte

Pri zmenseni okna prehliadaca mam rozhadzane okna a velkost elementu "aside" sa nezmensuje ako pri ostatnych elementoch.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style 2.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap');">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Old+Standard+TT:wght@700&display=swap');">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');">
      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
      <title>titulok</title>
   </head>
   <body>
       <div id="wrapper" class="group">
           <header class="menu">
               <nav>
                   <ul>
                       <li><a href="domov.html">Domov</a></li>
                       <li><a href="zahradne.html">Záhradné</a>
                        <ul>
                            <li><a href="okrasne.html">Okrasné</a></li>
                            <li><a href="uzitkove.html">Úžitkové</a>
                        </li>
                    </ul>
                </li>
                       <li><a href="izbove.html">Izbové</a></li>
                       <li><a href="blog.html">Blog</a></li>
                       <li><a href="o-nas.html">O nás</a></li>
                       <li><a href="kontakt.html">Kontakt</a></li>
               </ul>
            </nav>
           </header>
           <div id="main" class="group">
           <div class="main-header">
               <h1><i class="fas fa-seedling"></i> <br>  HAPPY GARDENERS</h1>
               <h2>Liquorice pudding carrot cake chupa chups icing sugar plum chocolate bar cake</h2>
            <div class="slider-box">
                <div id="slider">
                    <img src="images/slide1.jpg" alt="">
                    <img src="images/slide2.jpg" alt="">
                    <img src="images/slide3.jpg" alt="">
                    <img src="images/slide4.jpg" alt="">
                </div>
                <div class="indicators">
                    <span id="btn1" class="active"></span>
                    <span id="btn2"></span>
                    <span id="btn3"></span>
                    <span id="btn4"></span>
                </div>
            </div>
            <script>

                var slide = document.getElementById("slider");
                var btn1 = document.getElementById('btn1');
                var btn2 = document.getElementById('btn2');
                var btn3 = document.getElementById('btn3');
                var btn4 = document.getElementById('btn4');

                btn1.onclick = function () {
                    slide.style.transform = "translateX(0px)";
                    btn1.classList.add('active');
                    btn2.classList.remove('active');
                    btn3.classList.remove('active');
                    btn4.classList.remive('active');
                };
                btn2.onclick = function () {
                    slide.style.transform = "translateX(-100%)";
                    btn1.classList.remove('active');
                    btn2.classList.add('active');
                    btn3.classList.remove('active');
                    btn4.classList.remove('active');
                };
                btn3.onclick = function () {
                    slide.style.transform = "translateX(-200%)";
                    btn1.classList.remove('active');
                    btn2.classList.remove('active');
                    btn3.classList.add('active');
                    btn4.classList.remove('active');
                };
                btn4.onclick = function () {
                    slide.style.transform = "translateX(-300%)";
                    btn1.classList.remove('active');
                    btn2.classList.remove('active');
                    btn3.classList.remove('active');
                    btn4.classList.add('active');
                };

            </script>
            </div>
               <section class="left-sidebar">

               </section>
               <aside class="right-sidebar">

                   <a href="#"><strong><h3>Blog</h3></strong></a>
                   <ul>
                       <li><a href="#"><strong>Muffin caramels cotton candy jelly-o powder.</strong>
                        <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                            <time datetime="2014-10-20 19:00">04, 20, 2014</time></p></a></li>
                   </ul>
                   <hr width=80% size="1"color="gray">
                   <ul>
                       <li><a href="#"><strong>Candy sweet sweet jelly-o muffin wafer tootsie roll. Shortbread gummies chupa chups candy toffee danish.</strong>
                        <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                            <time datetime="2014-10-20 19:00">04, 20, 2014</time></p></a></li>
                  </ul>
                  <hr width=80% size="1"color="gray">
                  <ul>
                       <li><a href="#"><strong>Jujubes biscuit bear claw sesame snaps pudding sugar plum cupcake.</strong>
                        <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                            <time datetime="2014-10-20 19:00">04, 20, 2014</time></p></a></li>
                  </ul>
                  <hr width=80% size="1"color="gray">
                  <ul>
                       <li><a href="#"><strong>Dragée dessert chocolate marzipan toffee pastry.</strong>
                        <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                            <time datetime="2014-10-20 19:00">04, 20, 2014</time></p></a></li>
                  </ul>
                  <hr width=80% size="1"color="gray">
                  <ul>
                    <li><a href="#"><strong>Chocolate brownie croissant icing icing cake jelly.</strong>
                        <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                            <time datetime="2014-10-20 19:00">04, 20, 2014</time></p></a></li>
                  </ul>
                  <hr width=80% size="1"color="gray">
                  <ul>
                    <li><a href="#"><strong>Muffin caramels cotton candy jelly-o powder.</strong></a></li>
                  </ul>
                  <hr width=80% size="1"color="gray">
                  <ul>
                        <li><a href="#"><strong>Bonbon halvah chupa chups topping jelly candy canes marzipan.</strong>
                            <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                                <time datetime="2014-10-20 19:00">04, 20, 2014</time></p></a></li>
                  </ul>
                  <hr width=80% size="1"color="gray">
                  <ul>
                        <li><a href="#"><strong>hocolate bar icing apple pie jelly croissant bear claw sweet sweet topping.</strong>
                        <p class="meta-data">napísal <a href="#" class="author">Alžbeta</a>
                            <time datetime="2014-10-20 19:00">04, 20, 2014</time></p>
                        </a></li>
                  </ul>

               </aside>
               <footer>sekcia dole</footer>
           </div>
       </div>
    </body>
</html>

html{
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}



body {
    margin-left: 20%;
    margin-right: 20%;
    background: #D1EBF0;
}

.menu{
    text-align: center;

}
.menu ul{
    padding: 0;
    padding: 10px 25px 10px 25px;
    background: cornsilk;
}



.menu a{
    text-decoration: none;
    color: black;
    font-size: 20px;
    margin: 0px 50px 0 50px;
    font-family: 'Old Standard TT', serif;

}

nav ul li{
    position: relative;
    list-style: none;
    display: inline-block;
}
nav ul li a{
    display: block;
    color: white;
    text-decoration: none;
    line-height: 60px;
}
nav ul li a:hover,
nav ul li a.active{
  color: grey;
}
nav ul ul{
    position: absolute;
    top: 40px;
    display: none;
}
nav ul li:hover > ul{
    display: block;
}
nav ul ul li{
    width: 150px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul ul li{
    position: relative;
    top: -60px;
    left: 150px;
}

.fa-seedling{
    margin-top: 20px;
}
h1{
    font-family: 'Old Standard TT', serif;
    text-align: center;
    font-size: 55px;
    margin-bottom: 0px;
    background: cornsilk;
    margin-top: 0;
}

h2{
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    background: cornsilk;
    padding-bottom: 45px;
    padding-top: 0;

}

.slider-box {
    width     : 70%;
    max-height: 90vh;
    position  : relative;
    overflow  : hidden;
    margin    : 30px auto;
    float: left;
    clear: both;
    margin-top: 25px;
}

#slider {
    width     : 100%;
    display   : inline-flex;
    transition: 0.7s;

}
#slider img {
    width: 100%;
    border-radius: 2%;
}
.indicators {
    position : absolute;
    left     : 50%;
    bottom   : 20px;
    transform: translateX(-50%);
}
.indicators span {
    display      : inline-block;
    width        : 15px;
    height       : 15px;
    border-radius: 50%;
    background   : rgba(255, 255, 255, 0.5);
    cursor       : pointer;
}

.active {
    background: #ffff !important;
}

#wrapper header, #wrapper section,
#wrapper aside, #wrapper footer{
    margin: 0 0 25px;
}
#wrapper aside{
    float: right;
    position: absolute;
    top: 370px;
    right: 382px;
    margin-left: 20px;
    background-color: cornsilk;
    border-radius: 2%;
}
aside {
    width: 320px;
    height: 900px;
}
aside ul{
    list-style: none;
    padding-left: 30px;
    padding-right: 30px;
}
aside li{
    margin: 0;
}

aside a{
    text-decoration: none;
    color: black;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 15px;
    font-weight: 300;
}
h3{
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    color: black;
    text-align: center;
    padding-top: 25px;
    margin-bottom: 25px;
}
hr{
    color: black;
}
 #wrapper section{
     float: left;
     width: 800.09px;
     height: 300px;
     border-radius: 3%;
 }

 #wrapper footer{

    clear: both;
}

.group:before,
.group:after {
     content:” “;
     display: table;
}
.group:after{
clear: both;
}
.group{
*zoom:1;
}

Vopred dik za odpoved.

Zkusil jsem: ...

Chci docílit: Zmensovanie vsetkych elementov.

Odpovědět

25.10.2021 18:41

Neaktivní uživatelský účet

Peter Mlich

Člen

Peter Mlich:26.10.2021 8:04

https://jsfiddle.net/6q8u7jt3/
Aside ma definovanou width-height v PX, ostatni pouzivaji %. Na tom fiddle je zmensene okno prohlizece v tom nahledu. Nevim, jak by se to melo zmensovat, neni tam definovane zadne media, ktere se obvykle pouziva na opravu sirky, viz bootstrap css, treba?

https://validator.w3.org/nu/#…
html validator hlasi nekolik problemu, ale ty s tim asi nesouvisi.

https://jigsaw.w3.org/…or/validator
css validator tam ma 2 varovani na hacky, asi. Coz asi take neni problem.

Zajimave je, ze, kdyz jsem pridal k aside border, tak je uplne ignorovany na to fiddle.net. Coz vypada na nejaky problem v css. Doporucuji si udelat kopii souboru a zacit uplne prazdnym, do ktereho pridavas, dokud se neobjevi ten problem.

aside {
    width: 320px;
    height: 900px;
border: 1px solid #f00 !important;
}

Nahoru Odpovědět

26.10.2021 8:04

Peter Mlich

Člen

Peter Mlich:26.10.2021 8:17

Zajimave jsou ty chyby, co pise fiddle. Kdyz se podivas vpravo na css, a najedes mysi na zlute puntiky pred radky kodu, tak tam pise problem s aside #wrapper aside. Asi to mas ve spatnem poradi a on to ignoruje. Ze to musis napsat pred tu sestavu #wrapper aside. To by vysvetlovalo i ten muj pokus s rameckem.

V okamziku, kdyz jsem prepsal

/*aside {*/
#wrapper aside {
    width: 320px;
    height: 900px;
border: 1px solid #f00 !important;
}

Tak se tam objevili ty zpravicky s cervenym rameckem. Takze mas css spatne Id ma prednost pred class a proste mas spatne priority class a id.
Ale je zvlastni, ze to Firefox ignoruje. Spravne by mel doplnit vlastnosti, ktere neprebiji ten zapis z #wrapper.

Nahoru Odpovědět

26.10.2021 8:17

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

Zjistit více...

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