Diskuze: Slider - problém s textem

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

Aktivity

Jiří Nováček

Člen

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é!

Jiří Nováček

Člen

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é!

martin1pokorny

Člen

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í
+2,50 Kč

Nahoru Odpovědět

8.7.2020 17:59

Jiří Nováček

Člen

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é!

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

Nejčastěji vyhledáváné

Diskuze: Slider - problém s textem