Wypływające okno na stronie WWW

Question

Witam wszystkich czytających!

Chciałem wykonać szablon pewnej strony: Link do strony . W zamyśle miało być tak, że czerwony obszar zamyka się w przestrzeni pomiędzy obszarami czarnym, zielonym a niebieskim. Dodatkowo tekst miał płynnie pojawiać się i znikać pod czarnym lub niebieskim obszarem w zależności od kierunku przeglądania strony (podobnie jak napisy w filmach - "wypływają" z dołu i "wpływają" u góry. A wyszło jak wyszło. Dodatkowo nie rozumiem dlaczego niebieski obszar jest zawsze na wierzchu, a czarny jest częściowo zakryty przez czerwony. Jak można to wszystko poprawić? Podejrzewam, że gdzieś w CSS'ie...?
Pozdrawiam!

 

Answer 1

Dla div#content nadaj height np 500px i oveflow:scroll

Comments

TAK!!! To jest to!!! Pięknie dziękuję i życzę dobrej kawusi/herbaty!!!

Pozdrawiam!

 

REASUMUJĄC:

- w stylizacji stopki: linia position: fixed - pozostała bez zmian;

- w stylizacji contentu: zamieniono height: auto na height: 500px oraz overflow: scroll.

Zadziałało!

---

Na zdrowie. Jako ciekawostka, fajnie na początku nauki od razu liznąć flexa i/lub grida, aktualnie w takim modelu robi się HTML. ;)

Answer 2

Dodam, że zmiana szerokości okienek na niewiele mi się zdała...

proponuje "przesiąść" się np. na grid-a  

 

przykład  [ on-line ]

<div class="container">
  <div id="logo" class="presentation">
    <h1>Nagłówek strony próbnej</h1>
  </div>
  <div id="menu" class="presentation">
    <ul>
      <li>Opcja 1</li>
      <li>Opcja 2</li>
      <li>Opcja 3</li>
      <li>Opcja 4</li>
      <li>Opcja 5</li>
      <li>Opcja 6</li>
      <li>Opcja 7</li>
    </ul>
  </div>

  <div id="content" class="presentation">
    <h1>CONTENT</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula orci in pretium ornare. Vivamus semper leo eget leo tincidunt mattis. Sed vehicula scelerisque lacus nec finibus. Donec at metus tellus. Ut convallis in purus quis dictum. Curabitur egestas ex sit amet accumsan faucibus. Morbi odio nunc, hendrerit ut risus et, tempus pharetra mauris.</p>
    <p>Nullam blandit molestie lorem id tempus. Aenean vehicula sagittis lorem in maximus. Donec sagittis tincidunt mollis. Suspendisse eu dignissim libero. Duis blandit diam vitae sagittis gravida. Sed nisi est, placerat eget nibh a, luctus dictum ligula. Maecenas id dolor ultrices, efficitur nulla ac, pellentesque dui. Phasellus vitae congue quam. Vivamus convallis, arcu rutrum mollis molestie, ex orci placerat velit, eget rutrum elit tellus ac enim. Donec nec convallis metus. In elit arcu, eleifend non iaculis ac, aliquam at turpis. Aliquam vel eros tincidunt, eleifend odio consectetur, commodo elit. Integer maximus commodo lectus a malesuada.</p>
    <p>Sed rhoncus felis vitae faucibus tempus. Pellentesque sit amet erat at nunc auctor euismod. Curabitur ac lorem risus. Praesent vestibulum, dui eu rhoncus pellentesque, nulla velit tincidunt est, quis luctus ante diam non felis. Fusce sollicitudin at nisi in aliquet. Vestibulum iaculis finibus elit, sed ullamcorper libero sodales id. Praesent finibus semper erat a viverra. In hendrerit nisl non turpis rhoncus, sit amet vulputate ante hendrerit. Nullam erat ex, dictum nec posuere eu, accumsan a mauris.</p>
    <p>Donec pharetra, nisi a pharetra ullamcorper, lacus eros hendrerit augue, nec gravida ipsum mi sed felis. Sed dignissim odio eu augue accumsan, faucibus tincidunt ex fringilla. Cras semper aliquam metus, id gravida lectus. Pellentesque malesuada ex lobortis, volutpat purus eget, gravida enim. Pellentesque non elit libero. Maecenas eget metus in urna sollicitudin aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Suspendisse rutrum ligula eu nunc maximus, et ornare neque vulputate. Proin scelerisque vel nulla at ultrices. Cras risus ex, vulputate quis faucibus vel, vulputate rhoncus ligula. Phasellus condimentum velit non diam commodo, quis venenatis massa malesuada. Cras scelerisque libero a tristique consequat. Suspendisse eu tellus in orci tristique maximus sed et tellus. Donec volutpat lacus sit amet dignissim bibendum. Vivamus ut diam volutpat, aliquet ex eget, porttitor nunc. Cras id suscipit nisl. Suspendisse blandit augue vel leo pharetra, id maximus sapien accumsan.</p>
  </div>

  <div id="footer" class="presentation">
    <p>Moja strona testowa! ©  Wszelkie prawa zastreżone <br> Zapraszam do kontaktu: <a href="mailto:strona.probna@stronaprobna.pl">strona.probna@stronaprobna.pl</a></p>
  </div>
</div>

* {
  box-sizing: border-box;
}
html,
body { 
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: 'Playfair Display', serif;
  background-image: url(https://picsum.photos/1500/1300/?random=1);
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container {
  display: grid;
  grid-template-columns: 0.5fr 2fr;
  grid-template-rows: 100px 1fr 80px; /* logo  menu-content  footer */
  gap: 0.25em; /* Dla prezentacji - może być: 0 */
  grid-template-areas:
    "logo logo"
    "menu content"
    "footer footer";

  width: 100vw;
  height: 100vh;
  padding: 0.25em; /* Dla prezentacji - może być: 0 */
}
#logo, #menu, #content, #footer {
  opacity: 0.8;
  text-align: center;
}
#logo { 
  grid-area: logo; 
  background-color: #ffcc66;
}
#menu { 
  grid-area: menu;
  background-color: #ffcc66;
  padding-top: 2em;
}
#menu ul { 
  list-style: none;
  margin: 0;
  padding: 0;
  font: 400 1.1em/1.4 system-ui;  
}
#menu li {
  transition: background 0.5s;
}
#menu li:hover {
  background-color: #ffb31a;
}
#content { 
  grid-area: content;
  background-color: #ffcc00;
  background-image: linear-gradient(45deg, #ffcc00, #ffff00, #333300);
  overflow-y: auto;
  font: 1.3em/1.1 system-ui;
  text-align: justify;
  padding: 2em;
}

#content::-webkit-scrollbar {
  width: 0.5em;
}
#content::-webkit-scrollbar-track {
  border: 0.2em solid transparent;
  background-color: #ffcc66;
  border-radius: 0.5em;
}
#content::-webkit-scrollbar-thumb {
  width: 0.4em;
  background-color: rgba(0,0,0,0.8);
  border-radius: 0.5em;
}

#footer { 
  grid-area: footer;
  background-color: #ffcc66;
  font: 700 1em/1.1 system-ui;
}


/* Dla prezentacji */
.container .presentation {
  position: relative;
  box-shadow: 0px 0px 4px 2px rgba(10,10,10,0.9);
  border-radius: 0.5em;
  transition: all 1s;
}

.container .presentation:before {
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  content: attr(id);
  font: 900 1em/1 system-ui;
  color: red;
}
.container .presentation:hover {
  animation: pulsate 1s ease-in-out infinite;
}

@keyframes pulsate {
  from {
    transform: scale(1);   
  }
  50%, 60% {
    transform: scale(0.99);
    box-shadow: none;
  }
  to {
    transform: scale(1);   
  }
}

 

Answer 3

Jak robisz na float, to napisz dodatkowego div ze stylem, clear:both. Chodzi o niebieski obszar footer.

Comments

W pliku style.css, w linii 61 (stylizacja stopki) jest komenda clear: both. Poza tym, to rozlewa się okno w środku a nie stopka. Bo bez komendy clear:both powinna rozlać się stopka. Ale dziękuje za podpowiedź:)

---

footer{
  position:fixed;
}

Skasuj tę linię.

---

Kiedy to zrobię, to stopka ucieka mi na sam dół, pod czerwony obszar. Przetestowane na dysku komputera, bez wrzucania na serwer. A ja chciałbym, aby wszystkie cztery okna były widoczne zawsze, zaś w czerwonym tekst był przewijany.

---

OK, dodaj zatem.

#red_square{
  overflow-y:scroll;
}

lub

#red_square{
  overflow-y:auto;
}

Answer 4

Udało mi się popracować nieco nad rozkładem okienek i teraz wygląda to nieco optymistyczniej. Przeszkadza mi jednak ten pasek u dołu obszaru opisanego jako CONTENT. Ten pasek nic nie przesuwa, jest tam zbędny. Kiedy ustawię opacity na 1.0, to go nie widać. Ale kiedy chciało by się zwiększyć przeźroczystość, to zaczyna taki "wystawać" i psuć widok... Jak można się go pozbyć?

Dodam, że zmiana szerokości okienek na niewiele mi się zdała...

Link do obejrzenia