[Помогите] Сайт ломается

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Cappy, 7 авг 2016.

  1. Cappy

    Cappy

    Регистрация:
    7 авг 2016
    Сообщения:
    1
    Симпатии:
    0
    Всем привет и заранее спасибо за помощь.
    Решил я сделать сайт.(Просто так, для себя) По ходу работы возникало много проблем, но пока не смог решить только 2:
    1. Если меняю размер окна браузера появляется ненужный скроллер на блоке #content.
    2. Если размер страниц (Page 1, Page 2...) разный, то внизу страниц, длина которых меньше максимальной, остается свободное пространство.

    Вот ссылка: http://h92177or.bget.ru
    И код:
    HTML
    Код:
    <!doctype html>
    <html lang="en"><head>
        <meta charset="utf-8">
        <title>Cappy</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
         <![endif]-->
           <link rel="stylesheet" href="css/main.css">
        <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
         <script language="javascript" type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
         <script language="javascript" type="text/javascript" src="scripts/jquery.scrollTo.min.js"></script>
          <script language="javascript" type="text/javascript" src="scripts/main.js"></script>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/roboto:n2:default.js" type="text/javascript"></script>
    </head>
    <body>
      <header class="firstScreen">
        <section class="header">
          <h1>cappy</h1>
        </section>
      </header>
    <div id="top_nav">   
            <a class="go_to" href="#1Page">
                <div class="nav_but">
                    1 Page
                </div>
            </a>
            <a class="go_to" href="#2Page">
                <div class="nav_but">
                    2 Page
                </div>
            </a>
            <a class="go_to" href="#3Page">
                <div class="nav_but">
                    3 Page
                </div>
            </a>
            <a class="go_to" href="#4Page">
                <div class="nav_but">
                    4 Page
                </div>
            </a>
           </div>
      <div id="content">
          <div id="mask">
            <div class="content" id="1Page">
                <h3 >1 Page</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content1.jpg" width="2160" height="1440"/>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content2.jpg" width="2160" height="1440"/>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
                <img class="img_cont" src="images/content3.jpg" width="2160" height="1440"/>
            </div>
            <div class="content" id="2Page">
                <h3>2 Page</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content1.jpg" width="2160" height="1440"/>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content2.jpg" width="2160" height="1440"/>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
                <img class="img_cont" src="images/content3.jpg" width="2160" height="1440"/>
            </div>
            <div class="content" id="3Page">
                <h3>3 Page</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content1.jpg" width="2160" height="1440"/>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content2.jpg" width="2160" height="1440"/>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
                <img class="img_cont" src="images/content3.jpg" width="2160" height="1440"/>
            </div>
            <div class="content" id="4Page">
                <h3>4 Page</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content1.jpg" width="2160" height="1440"/>
              <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <img class="img_cont" src="images/content2.jpg" width="2160" height="1440"/>
                <p>Ut sit amet velit eget ex scelerisque scelerisque. Curabitur laoreet commodo nulla, eu porttitor magna ultricies vel. Aenean in libero dictum, tristique elit vestibulum, porta sapien. Etiam a eros nec nisi varius porta. Morbi pulvinar nisl justo, vitae eleifend ligula hendrerit vitae. Cras ac convallis nibh. In et eros vitae metus elementum vehicula. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere sed mi fringilla pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at ex eget ex ultricies ullamcorper vulputate eu felis. Proin metus nulla, vehicula sit amet aliquam nec, feugiat in elit. </p>
                <img class="img_cont" src="images/content3.jpg" width="2160" height="1440"/>
                <img class="img_cont" src="images/content3.jpg" width="2160" height="1440"/>   
            </div>
          </div>
      </div>
    </body>
    </html>
    CSS
    Код:
    @import url(http://fonts.googleapis.com/css?family=Roboto:100,400&subset=latin,cyrillic);
    
    html, body, .container {
      height: 100%;
    }
    
    html, body, h1, p, a, div, section {
        padding: 0;
        margin: 0;
        font-size: 100%;
        font: inherit;
    }
    
    /* Основные стили */
    body {
      font: 18px/23px "Roboto", sans-serif;
      color: #ffffff;
      width: 100%;
      overflow-x: hidden;
    }
    
    h1 {
      color: #efecec;
      text-transform: uppercase;
      font-size: 40px;
      line-height: 50px;
      font-weight: 100;
      margin-top: 20px;
      -moz-user-select: -moz-none;
      -o-user-select: none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    
    .container {
      display: table;
      padding-top: 80px;
      width: 100%;
    }
    
    .header {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    
    #content {
      background: #fff;
      padding: 20px 0;
      white-space: nowrap;
      display: block;
      width: 100%;
      overflow-x: hidden;
      overflow-y: visible;
      position: absolute;
    }
    
    #mask {
        display: block;
    }
    
    .content {
        display: inline-table;
        width: 100%;
        color: black;
        white-space: pre-wrap;
        position: relative;
    }
    
    #content p {
        margin: 10px 2.5%;
        width: 95%;
        text-align: left;
        display: table;
        white-space: normal;
        color: #4B4B4B;
        size: 2rem;
        font-family: roboto;
        font-style: normal;
        font-weight: 400;   
    }
    
    h3 {
        margin: 10px 2.5%;
        width: 95%;
    }
    
    img {
        max-width: 95%;
        height: auto;
        margin: 10px 2.5%;
    }
    /*фиксированное плавающее меню*/
    #top_nav {
        bottom: 0;
        position: fixed;
        z-index: 1000;
        width: 100%;
        height: 50px;
        background-color: #000000;
        color: #ffffff;
        display: table;
        opacity: 0.5;
    }
    
    .nav_but {
        margin-left: 1%;
        display: block;
        height: 100%;
        width: 100%;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
        -webkit-border-image: -webkit-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
        -moz-border-image: -moz-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
        -o-border-image: -o-linear-gradient(white, rgba(0, 0, 0, 0)) 1 100%;
        border-image: linear-gradient(to bottom, white, rgba(0, 0, 0, 0)) 1 100%;
        border-collapse: collapse;
        border-left: hidden;
        font-family: roboto;
        font-style: normal;
        font-weight: 100;
        -moz-user-select: -moz-none;
          -o-user-select: none;
         -khtml-user-select: none;
         -webkit-user-select: none;
        user-select: none;
    }
    
    .go_to {
        height: 100%;
        display: table-cell;
    }
    
    A:link {
        text-decoration: none;
        color: #ffffff;
    }
    
    A:visited {
        color: #ffffff;
    }
    
    A:hover {
        color: aqua;
    }
    
    /*Header - Background*/
    .firstScreen {
        height: 100%;
        width: 100%;   
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-image: url(../images/background.jpg);
        background-attachment: fixed;
        background-size: cover;
        padding-top: 80px;
        display: table;
         vertical-align: middle;
          text-align: center;   
    }
    
    @media only screen and (max-width: 2159px) {
        .firstScreen {
            background-image: url(../images/background-2160.jpg);
        }
    }
    
    @media only screen and (max-width: 1079px) {
        .firstScreen {
            background-image: url(../images/background-1080.jpg);
        }
    }
    
    @media only screen and (max-width: 767px) {
        .firstScreen {
            background-image: url(../images/background-768.jpg);
        }
    }
    JS
    Код:
    /*Floating menu*/
    $(function(){
           var h_nav = $('#top_nav').outerHeight();
           var top;
           
           $(window).scroll(function(){
               top = $(this).scrollTop();
               if(($('.firstScreen').outerHeight()-top) <= h_nav){
                   $('#top_nav').css('top','0');
               }
               else if(top < $('.firstScreen').outerHeight() && top > 0){
                   $('#top_nav').css({'bottom' : top, 'top':''});
               }
               else if(top < h_nav){
                   $('#top_nav').css({'top':'','bottom':'0'});
               }
           });
       });         
    
    /*Smooth scrolling*/
    /*Horizontal*/
    $(document).ready(function() {
    
      $('a.go_to').click(function() {
    
        $('a.go_to').removeClass('selected');
        $(this).addClass('selected');
    
        current = $(this);
    
        $('#content').scrollTo($(this).attr('href'), 800);
    
        return false;
      });
    
      $(window).resize(function() {
        resizePanel();
      });
    
    });
    
    function resizePanel() {
    
      width = $(window).width();
      height = $(window).height();
    
      mask_width = width * $('.content').length;
    
      $('#debug').html(width + ' ' + height + ' ' + mask_width);
    
      $('#content, .content').css({
        width: width,
        height: height
      });
      $('#mask').css({
        width: mask_width,
        height: height
      });
      $('#content').scrollTo($('a.selected').attr('href'), 0);
    
    }
    
    /*Vertuval*/
    $(document).ready(function(){
        $('.go_to').click( function(){
           
        var scroll_el = $(this).attr('href');
       
            if ($(scroll_el).length != 0) {
            $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 800);
            }
            return false;
        });
    });
     
  2. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    53
    Симпатии:
    3
    Доброго #content {overflow-y: hidden;height: 100%;}
     
  3. 1Laren

    1Laren

    Регистрация:
    15 окт 2016
    Сообщения:
    1
    Симпатии:
    0
    не плохо было бы еще для кнопки добавить свойство box-sizing: border-box; и при маленьком разрешении окна уменьшить шрифт
     
  4. maxil

    maxil

    Регистрация:
    21 ноя 2016
    Сообщения:
    2
    Симпатии:
    0
    2. Если размер страниц (Page 1, Page 2...) разный, то внизу страниц, длина которых меньше максимальной, остается свободное пространство.
    Используй max-height: [сколько-то]px;