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

Strona na całe okno przeglądarki.

Zaczynasz dopiero swoją przygodę z HTML'em? A może mimo swojego doświadczenia natknąłeś się na jakiś problem? Tutaj na pewno znajdziesz pomoc.

Strona na całe okno przeglądarki.

Post 19.06.2017, 11:20:19

Witam, tworzę stronę na całą powierzchnię okna przeglądarki. Wszystko fajnie tylko aktualnie strona ta przewija się w dół jak każda inna a ja chcę żeby jedynie poszczególne sekcje się przewijały. Wiem, jak to osiągnąć tylko pojawia się kolejny problem. Aktualnie stosuję "display: table-cell" i wszystko działa dobrze ale jak już wspominałem nie mogę osiągnąć efektu aby przewijały się wybrane sekcje strony. W wersji z "position: absolute" nachodzą na siebie divy znajdujące się wewnątrz szablonu strony i przesuwają się w dół. Nie wiem jak to lepiej wytłumaczyć więc wstawię mój aktualny kod oraz grafikę.

Obrazek

Kod HTML
Kod: Zaznacz cały
<html>

   <head>
      <title>Strona</title>
      <meta charset="UTF-8">
      <meta name="description" content=".">
      <meta name="keywords" content=".">
      <meta name="author" content=".">
      <link rel="stylesheet" type="text/css" href="configs/config-main.css">
   </head>
   
   <body>
      <div id="top">
         <div id="menu">
            <iframe name="menu" src="menu.html" frameborder="0" scrolling="no" class="menu-frame"></iframe>
         </div>
         <div id="profiles-active"></div>
      </div>
   
      <div id="middle">
         <div id="content">
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_4.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_7.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_5.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_3.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_7.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_7.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_7.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_7.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_7.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_1.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_6.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_5.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_6.png);"></div>
            </div>
            <div id="content-champion" style="background-image: url(graphics/champions/.png);">
               <div id="content-champion-mastery" style="background-image: url(graphics/mastery/mastery_6.png);"></div>
            </div>
         </div>
      </div>

      <div id="right">
         <div id="profiles">
         <div id="profiles-button">
            <div id="profiles-button-image" style="background-image: url(graphics/profile/.jpg);"></div>
            <div id="profiles-button-name">Nazwa1</div>
         </div>
         <div id="profiles-button">
            <div id="profiles-button-image" style="background-image: url(graphics/profile/.jpg);"></div>
            <div id="profiles-button-name">Nazwa2</div>
         </div>
         </div>
      </div>
   </body>
   
</html>



Kod CSS
Kod: Zaznacz cały
::-webkit-scrollbar
{
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track
{
  background: #05111B;
}

::-webkit-scrollbar-thumb
{
  background: #785A28;
  border-radius: 7px;
}

body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   background-color: #05111B;
   background-image: url(graphics/backgrounds/background.jpg);
   background-size: cover;
}

::selection {
   color: #FFFFFF;
   background: #EF3C79;
}

::-moz-selection {
   color: #FFFFFF;
   background: #EF3C79;
}

#menu {
   width: 100%;
   min-width: 793px;
   height: 78px;
   padding-right: 29px;
   border-top: 2px solid #785A28;
   border-bottom: 1px solid #1E282D;
   box-sizing: border-box;
   float: left;
}

.menu-frame {
   width: 100%;
   min-width: 793px;
   height: 100%;
   min-height: 78px;
   float: left;
}

#top {
   width: 100%;
   height: 1%;
}

#middle {
   width: 99%;
   height: 99%;
   display: table-cell;
}

#right {
   width: 1%;
   height: 100%;
   display: table-cell;
}

#profiles {
   width: 222px;
   height: 100%;
   margin: 0px 0px 0px 3px;
   padding: 5px 0px 0px 0px;
   border-left: 1px solid #1E282D;
   background-color: #010912;
   box-sizing: border-box;
   float: right;
}

#content {
   width: 818px;
   min-height: 10px;
   margin: 0px auto 0px auto;
   padding: 20px 0px 0px 15px;
   box-sizing: border-box;
}

/* Profile Layout */

#profiles-button {
   width: 100%;
   height: 48px;
   box-sizing: border-box;
   float: left;
   cursor: pointer;
}

#profiles-button:hover {
   background-color: #192026;
}

#profiles-button-image {
   width: 32px;
   height: 32px;
   margin: 8px 0px 8px 10px;
   background-size: cover;
   border: 2px solid #785A28;
   border-radius: 50%;
   box-sizing: border-box;
   float: left;
}

#profiles-button-name {
   width: 140px;
   height: 32px;
   margin: 8px 0px 8px 10px;
   padding: 8px 3px 8px 3px;
   box-sizing: border-box;
   float: left;
   color: #A09B8C;
    font-size: 14px;
    font-family: Cambria;
   font-weight: bold;
    text-align: left;
    -webkit-user-select: none;
}

/* Content Layout */

#content-champion {
   width: 190px;
   height: 190px;
   margin: 0px 10px 20px 0px;
   background-size: cover;
   border: 1px solid #3C3C41;
   box-sizing: border-box;
   float: left;
}

#content-champion-mastery {
   width: 64px;
   height: 64px;
   margin: -25px 0px 0px 64px;
   background-color: ;
   background-size: cover;
   box-sizing: border-box;
   float: left;
}
Avatar użytkownikaGuciowski
Posty: 45
Dołączył(a): 19.04.2014

Powrót do Początkujący webmaster


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot], Google Adsense [Bot] i 38 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50698 zarejestrowanych użytkowników.
Najnowszy użytkownik: m1kie


Nasi użytkownicy napisali:

  • 936101 wiadomości
  • w 246729 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)