Využij akce až 30 % zdarma při nákupu e-learningu. Více informací. Zároveň je tento týden sleva až 80 % na e-learning týkající se C# .NET
Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
discount week 30 halloween
Avatar
Jiří Nováček:8.7.2020 15:16

Ahoj
Potřeboval bych poradit.
Mám silder v html a css. Vše funguje jak má jen text v jednotlivých slidech je zaseklý na jednom řádku (viz.problém). A já bych potřeboval, aby se rovnoměrně rozprostřel po celém slidu(viz.příklad rozprostření).

Všem předem děkuji za pomoc :) !

Zkusil jsem: Zkoušel jsem různě měnit styly, ale marně, proto se obracím na Vás.

Chci docílit: Potřebuji text rovnoměrně rozprostřít po slidu, aby nebyl pouze na jednom řádku.

Zdrojový kód :
HTML

<!-- Slider -->
      <div id="slider">
        <input type="radio" name="slider" id="slide1" checked>
        <input type="radio" name="slider" id="slide2">
        <input type="radio" name="slider" id="slide3">
        <input type="radio" name="slider" id="slide4">
        <div id="slides">
           <div id="overflow">
              <div class="inner">
                 <div class="slide slide_1">
                    <div class="slide-content">
                       <p>"Nenech, aby tvé životní návyky ničily tvé tělo. Zvol návyky takové, které naopak umožní tvému tělu prosperovat a využít jeho vlastní potenciál"</p>
                    </div>
                 </div>
                 <div class="slide slide_2">
                    <div class="slide-content">
                       <p>Content for Slide 2</p>
                    </div>
                 </div>
                 <div class="slide slide_3">
                    <div class="slide-content">
                       <p>Content for Slide 3</p>
                    </div>
                 </div>
                 <div class="slide slide_4">
                    <div class="slide-content">
                       <p>Content for Slide 4</p>
                    </div>
                 </div>
              </div>
           </div>
        </div>
        <div id="controls">
           <label for="slide1"></label>
           <label for="slide2"></label>
           <label for="slide3"></label>
           <label for="slide4"></label>
        </div>
        <div id="bullets">
           <label for="slide1"></label>
           <label for="slide2"></label>
           <label for="slide3"></label>
           <label for="slide4"></label>
        </div>
     </div>

CSS

// Slider
#slider {
   margin: 150px;
   width: 700px;
   max-width: 100%;
   text-align: center;
}
#slider input[type=radio] {
   display: none;
}
#slider label {
   cursor:pointer;
   text-decoration: none;
}
#slides {
   padding: 10px;
   position: relative;
   z-index: 1;
}
#overflow {
   width: 100%;
   overflow: hidden;
}
#slide1:checked ~ #slides .inner {
   margin-left: 0;
}
#slide2:checked ~ #slides .inner {
   margin-left: -100%;
}
#slide3:checked ~ #slides .inner {
   margin-left: -200%;
}
#slide4:checked ~ #slides .inner {
   margin-left: -300%;
}
#slides .inner {
   transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
   width: 400%;
   line-height: 0;
   height: 300px;
}
#slides .slide {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   color: #000;
   background: #fff 0% 0% no-repeat padding-box;
   opacity: 0.7;
   backdrop-filter: blur(30px);
   -webkit-backdrop-filter: blur(30px);
}


#controls {
   margin: -180px 0 0 0;
   width: 100%;
   height: 50px;
   z-index: 3;
   position: relative;
}
#controls label {
   transition: opacity 0.2s ease-out;
   display: none;
   width: 50px;
   height: 50px;
   opacity: .4;
}
#controls label:hover {
   opacity: 1;
}
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(4),
#slide4:checked ~ #controls label:nth-child(1) {
   background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
   float:right;
   margin: 0 -50px 0 0;
   display: block;
}
#slide1:checked ~ #controls label:nth-last-child(1),
#slide2:checked ~ #controls label:nth-last-child(4),
#slide3:checked ~ #controls label:nth-last-child(3),
#slide4:checked ~ #controls label:nth-last-child(2) {
   background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
   float:left;
   margin: 0 0 0 -50px;
   display: block;
}
#bullets {
   margin: 150px 0 0;
   text-align: center;
}
#bullets label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:100%;
   background: #ccc;
   margin: 0 10px;
}
#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4) {
   background: #444;
}
@media screen and (max-width: 900px) {
   #slide1:checked ~ #controls label:nth-child(2),
   #slide2:checked ~ #controls label:nth-child(3),
   #slide3:checked ~ #controls label:nth-child(4),
   #slide4:checked ~ #controls label:nth-child(1),
   #slide1:checked ~ #controls label:nth-last-child(2),
   #slide2:checked ~ #controls label:nth-last-child(3),
   #slide3:checked ~ #controls label:nth-last-child(4),
   #slide4:checked ~ #controls label:nth-last-child(1) {
      margin: 0;
   }
   #slides {
      max-width: calc(100% - 140px);
      margin: 0 auto;
   }
}
Odpovědět
8.7.2020 15:16
Nic není nemožné!
Avatar
Jiří Nováček:8.7.2020 15:25

Doplnění : Samozřejmě jsem zkoušel

<br>

odsazení mezi textem, ale text to zalamuje na stejný řádek.

Nahoru Odpovědět
8.7.2020 15:25
Nic není nemožné!
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Jiří Nováček
martin1pokorny:8.7.2020 17:59

Ahoj,
nulová výška řádku je problém.

#slides .inner {
    line-height: 0;
}
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět
8.7.2020 17:59
Avatar
Odpovídá na martin1pokorny
Jiří Nováček:8.7.2020 18:23

Děkuji máte pravdu. Už to funguje.

Nahoru Odpovědět
8.7.2020 18:23
Nic není nemožné!
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.