Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Wysokość content zgodnie z zawartością

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Wysokość content zgodnie z zawartością

Post 21.04.2017, 09:18:33

Witam,

Nie wiem jak zrobić aby wysokość .content była regulowana treścią ? Bardzo byłbym wdzięczny za pomoc.

Pozdrawiam
Michał


Kod: Zaznacz cały
#container input {
   height: 2.5em;
   visibility: hidden;
}

#container label {
   background: #9ebcbd;
   border-radius: 6px 6px 0 0;
   cursor: pointer;
   display: block;
   float: left;
   font-size: 20px;
   color: #fff;
   font-weight: bold;
   height: 40px;
   line-height: 40px;
   margin-right: .15em;
   padding: 0 1.5em;
   text-align: center;
   border-left: 1px solid #fff;
   border-right: 1px solid #fff;
   border-top: 1px solid #fff;
}

#container input:hover + label {
   background: #40a5f4; 
   font-size: 20px;
   color: #fff;
   font-weight: bold;
}

#container input:checked + label {
   background: #fff;
   font-size: 20px;
   color: #40a5f4;
   font-weight: bold;
   position: relative;
   z-index: 6;
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-top: 1px solid #ccc;
}

#content {
   overflow: auto;
   background: #fff;
   border-radius: 0 .25em .25em .25em;
   min-height: 23em;
   position: relative;
   width: 100%;
   -webkit-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
   box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.25);
   border-left: 1px solid #ccc;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   z-index: 5;
}

#Opis p{
   margin-bottom: 1em;
  text-align: justify;
}
#Opis ul {
   margin-left: 2em;
}

#content div {
   opacity: 0;
   padding: 1.5em;
   position: absolute;
   z-index: -100;
}

#pdescr_s1 p {
  margin-bottom: 0.5em;
  text-align: justify;
}

#pdescr_s2 p {
  margin-bottom: 0.5em;
  text-align: justify;
}


#container input#tab-1:checked ~ #content #iaiOpis,
#container input#tab-2:checked ~ #content #pdescr_s1,
#container input#tab-3:checked ~ #content #pdescr_s2 {
    opacity: 1;
    z-index: 100;
}


input.visible {
  visibility: visible !important;
}


Kod: Zaznacz cały
<div id="container">
      
       <input id="tab-1" type="radio" name="tab-group" checked="checked" />
    <label for="tab-1"><span>Opis</span></label>
      
       <input id="tab-2" type="radio" name="tab-group" />
       <label for="tab-2">Skład</label>
      
       <input id="tab-3" type="radio" name="tab-group" />
       <label for="tab-3">Przygotowanie</label>
      
       <div id="content">
          <div id="Opis">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula euismod nulla, a vehicula ipsum malesuada ac. Nulla fringilla purus vel justo fermentum, vel suscipit lectus aliquam. Suspendisse rutrum, felis luctus luctus maximus, ipsum purus elementum tortor, sit amet semper enim justo ac felis. Suspendisse quis vestibulum purus, id tincidunt leo. Suspendisse consectetur sagittis elit ut laoreet. Quisque facilisis quis arcu sit amet molestie. Pellentesque sit amet est sed leo posuere hendrerit et quis dui. Vivamus at lorem in risus euismod congue. Quisque ut dui felis. Quisque rhoncus arcu sed ante lobortis gravida. Phasellus hendrerit erat ac diam consectetur, a volutpat odio gravida.</p>
            </div>
         
            <div id="pdescr_s1" class="projector_longdescription"><!-- Skład -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula euismod nulla, a vehicula ipsum malesuada ac. Nulla fringilla purus vel justo fermentum, vel suscipit lectus aliquam. Suspendisse rutrum, felis luctus luctus maximus, ipsum purus elementum tortor, sit amet semper enim justo ac felis. Suspendisse quis vestibulum purus, id tincidunt leo. Suspendisse consectetur sagittis elit ut laoreet. Quisque facilisis quis arcu sit amet molestie. Pellentesque sit amet est sed leo posuere hendrerit et quis dui. Vivamus at lorem in risus euismod congue. Quisque ut dui felis. Quisque rhoncus arcu sed ante lobortis gravida. Phasellus hendrerit erat ac diam consectetur, a volutpat odio gravida.</p>
         </div>
         
             <div id="pdescr_s2" class="projector_longdescription"><!-- Przygotowanie -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula euismod nulla, a vehicula ipsum malesuada ac. Nulla fringilla purus vel justo fermentum, vel suscipit lectus aliquam. Suspendisse rutrum, felis luctus luctus maximus, ipsum purus elementum tortor, sit amet semper enim justo ac felis. Suspendisse quis vestibulum purus, id tincidunt leo. Suspendisse consectetur sagittis elit ut laoreet. Quisque facilisis quis arcu sit amet molestie. Pellentesque sit amet est sed leo posuere hendrerit et quis dui. Vivamus at lorem in risus euismod congue. Quisque ut dui felis. Quisque rhoncus arcu sed ante lobortis gravida. Phasellus hendrerit erat ac diam consectetur, a volutpat odio gravida.</p>
         </div>
         </div>
         </div>
mixw
Posty: 2
Dołączył(a): 20.04.2017

Re: Wysokość content zgodnie z zawartością

Post 21.04.2017, 09:42:26

Usuń position: absolute z #content div i ewentualnie usuń/zmniejsz min-height: 23em; dla #content.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19400
Dołączył(a): 14.04.2002

Re: Wysokość content zgodnie z zawartością

Post 21.04.2017, 13:40:29

Witam. Ja bym zrobił to tak:
Kod: Zaznacz cały
#content {
       width: 100%;
       z-index: 5;
    }
#content div {
       opacity: 0;
       padding: 1.5em;
       position: absolute;
       z-index: -100;
       -webkit-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.75);
       box-shadow: 1px 1px 7px 0px rgba(0,0,0,0.25);
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       border-bottom: 1px solid #ccc;
        border-radius: 0 .25em .25em .25em;
    }
pablop76
Posty: 21
Dołączył(a): 13.04.2016


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 5 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 49617 zarejestrowanych użytkowników.
Najnowszy użytkownik: MathiasM


Nasi użytkownicy napisali:

  • 933782 wiadomości
  • w 245874 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)