我的网站错误的响应式视图

时间：2017-02-16 10:44:34

标签： html css responsive

我的响应式网站遇到了问题。

我的.bottom部分在响应式视图中很奇怪＆＃34;跳跃＆＃34;来回。

这就是我的意思。图1和现在的图片2.值得一提的是，唯一更改的是窗口的宽度。

图片1

Picture1

图2

picture 2

在下面，您可以找到该页面的代码，包括HTML和CSS

＆＃13;
＆＃13; 
@font-face {
  font-family: 'MontserratFont';
  src: local('☺'), src: url('../fonts/Montserrat-Regular.ttf') format('truetype'), src: url('fonts/Montserrat-Regular.otf') format('opentype'), src: url('/fonts/Montserrat-Regular.woff') format('woff'), src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype');
  src: url('/fonts/Montserrat-Regular.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'RalewayFont';
  src: local('☺'), src: url('../fonts/Raleway-Regular.ttf') format('truetype'), src: url('fonts/Raleway-Regular.otf') format('opentype'), src: url('/fonts/Raleway-Regular.eot') format('embedded-opentype'), src: url('fonts/Raleway-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: Helvetica, Arial;
  padding: 0;
  margin: 0;
}

div.top {
  width: 100%;
}

div.menu_box {
  display: none;
}

div.banner {
  width: 100%;
  background: #000000;
  height: 200px;
}

img.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  z-index: 100;
  line-height: 80%;
  height: 80%;
}

ul.topnav {
  font-family: 'Montserrat';
  font-weight: 150;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
  position: fixed;
  top: 0px;
  z-index: 1;
  width: 100%;
}

ul.topnav li {
  float: left
}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
}

ul.topnav li a:hover {
  background-color: gray;
}

ul.topnav li.icon {
  display: none;
}

div.mid {
  width: 70%;
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

img.image {
  -webkit-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18);
  box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.18);
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  float: left;
}

.header {
  font-weight: 400;
  font-family: 'MontserratFont' color:#2E16B1;
}

div.map {
  float: right;
  position: absolute;
  top: 30%;
  padding: 10px;
  right: 0px;
}

hr {
  border: 0;
  height: 1px;
  color: #000000;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

div.content_text {
  margin: 0 5px 0 5px;
  padding-right: 5px;
}

p.main_text {
  font-family: 'MontserratFont';
  color: #2E16B1;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  font-weight: 400;
  font-size: larger;
  font-variant: small-caps;
}

h4 {
  font-family: 'MontserratFont';
  font-weight: 600;
  font-size: larger;
}

p.text {
  position: relative;
  font-family: 'RalewayFont';
  text-align: justify;
  float: left;
  padding-bottom: 10px;
  font-weight: 100;
  text-indent: 50px;
}

.bottom {
  position: absolute;
  top: 2200px;
  width: 95.3%;
  background-color: black;
  padding: 30px;
  color: white;
  text-align: center;
  font-family: 'RalewayFont';
  word-spacing: 40px;
  font-weight: 100;
}

ul.bottom_list li {
  display: inline-block;
  bottom: 30px;
}

ul.bottom_list li a {
  display: inline-block;
  bottom: 30px;
  border-right: solid;
  border-color: gray;
}

a.bottom_list_item {
  color: white;
  text-decoration: none;
}

a.bottom_list_item:last-child {
  border-right: none;
}

@media all and (max-width: 767px) {
  div.all {
    float: left;
    width: 100%;
    min-height: 350px;
    background: #ffffff;
  }
  div.banner {
    display: none;
  }
  ul.topnav {
    position: relative
  }
  div.slider {
    display: none;
  }
  audio {
    display: none;
  }
  div.mid {
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
  }
  .bottom {
    position: absolute;
    top: 2200px;
  }
}
＆＃13; 
<body>
  <div id="all" class="all">
    <!-- TOP-->
    <!-- TOP-->
    <!-- TOP-->
    <!-- TOP-->
    <div id="top" class="top">
      <!--BANNER-->
      <!--BANNER-->
      <!--BANNER-->
      <!--BANNER-->
      <div id="banner" class="banner">

        <img class="logo" id="logo" src="../images/logo.png">
        <div id="menu_box" class="menu_box">

        </div>
      </div>

      <!--NAV-->
      <!--NAV-->
      <!--NAV-->
      <!--NAV-->
      <nav>
        <ul class="topnav" id="myTopnav">
          <li>
            <a class="menu" href="../index.html">AJ</a>
          </li>
          <li>
            <a class="menu" href="ja.html">O mnie</a>
          </li>
          <li>
            <a class="menu" href="#">Co robię?</a>
          </li>
          <li>
            <a class="menu" href="kontakt.html">Kontakt</a>
          </li>

        </ul>
      </nav>
    </div>

    <!--MIDDLE-->
    <!--MIDDLE-->
    <!--MIDDLE-->
    <!--MIDDLE-->
    <div id="mid" class="mid">

      <p class="main_text" style="font-size: 30px;">
        &nbsp;&nbsp; Czym się zajmuję?
      </p>
      <hr>
      <h4> Tworzeniem i produkcją muzyki</h4>
      <div class="soundcloud_feed" style="margin-left:150px;">
        <iframe width="80%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/264003796&amp;color=2e16b1&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>
      </div>
      <p class="text" style="padding-bottom: 0px;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, ante et imperdiet vehicula, leo ligula congue tortor, id tincidunt mi odio at neque. Quisque ut suscipit libero, at aliquet nibh. Suspendisse potenti. Aliquam facilisis, justo at
        viverra blandit, lectus mauris lobortis diam, eget malesuada massa lorem egestas erat. Quisque tempus imperdiet posuere. Pellentesque sagittis vehicula orci ut cursus. Suspendisse elementum convallis mi, at tempor ex posuere ac. Cras a nibh porta,
        finibus est vitae, pharetra dolor. Etiam sed leo tortor. Maecenas fermentum posuere lacus ut accumsan. Integer nisl odio, lacinia sit amet tellus et, euismod interdum urna. Etiam vehicula ante diam, quis rhoncus turpis convallis elementum. Curabitur
        malesuada gravida lobortis. Praesent lorem velit, vulputate non est vel, faucibus dignissim quam. Maecenas leo purus, lacinia dictum nisl in, sodales interdum massa. Donec luctus dolor nec ante molestie, vitae imperdiet ipsum sagittis. Integer
        tempus nulla et lorem accumsan mattis. Nullam lobortis eleifend venenatis. Sed vel velit neque. Nullam placerat magna ut mauris laoreet commodo. Suspendisse ac ante libero. Etiam eu faucibus magna. Phasellus eget sagittis tellus. Sed scelerisque
        ultricies libero, at pharetra nulla hendrerit eu.
      </p>
      <hr>

      <h4> Fotografowaniem i edycją zdjęć</h4>

      <a style="margin-left:47.5%;display: inline-block; border: 0; text-decoration: none;" href="http://vsco.co/thenathurat?utm_source=user_grid&utm_medium=user_website&utm_campaign=link_to_grid"><img style="width: 48px; height: 48px; margin: 0px;" src="http://assets.vsco.co/assets/images/assets/Logo_black_48.png" alt="VSCO Logo" /></a>
      <br>
      <br>
      <p class="text" style="padding-bottom: 5px;">

        Nam venenatis ligula sit amet orci dictum, non vestibulum nisi bibendum. Nam scelerisque dolor neque, id faucibus leo mattis quis. Pellentesque pretium accumsan cursus. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis
        in faucibus. Fusce non condimentum dui, eu laoreet tellus. Nam eget ultrices massa, ut rhoncus sapien. Aliquam eget est vel eros commodo imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet quam sit amet felis rutrum
        euismod. Vestibulum venenatis tincidunt neque id auctor. Cras sed quam tristique quam ultrices mattis vitae eu libero. Maecenas vitae justo quis nisl rutrum laoreet rutrum vitae nulla. Nunc hendrerit sed dui vel varius. Cras aliquet volutpat tincidunt.
        Integer venenatis eleifend risus, ut venenatis dolor accumsan ut. Nulla imperdiet tempus ultricies. Donec porta felis et malesuada eleifend. Nunc commodo ex et consequat tincidunt. Aenean eu lacus ut libero malesuada auctor vel eu mi. Praesent
        fringilla libero vel lorem ornare mattis. Nulla id purus metus. Vivamus ornare sodales ante ac suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>
      <br>
      <p class="text" style="padding-top: 0px;">
        Donec fringilla turpis non urna sollicitudin laoreet. Morbi ac ornare libero. Etiam rutrum condimentum pretium. Duis aliquam ipsum id metus vestibulum scelerisque. Aenean ac elementum felis. Curabitur ultricies porta ultricies. Cras maximus dolor tristique,
        tristique nulla ac, placerat tortor. Suspendisse ultrices erat ultrices iaculis commodo. Duis maximus ipsum in turpis lacinia pretium. Pellentesque eleifend maximus tellus, a porta nibh venenatis nec. Nam viverra, mauris vitae feugiat auctor,
        ex magna egestas odio, a dictum est lacus ut nibh. Vestibulum pellentesque tortor nibh, in ornare justo consequat in. Vestibulum ornare nec nibh a vulputate. Nullam lorem sapien, eleifend ut fermentum a, eleifend ut enim. Pellentesque et malesuada
        lacus, nec condimentum mauris. Suspendisse sed velit turpis. Donec id dapibus erat. Maecenas convallis velit tincidunt nisi consectetur, non bibendum felis tincidunt. Cras pretium erat a dictum ornare. Curabitur nec velit non nibh suscipit hendrerit.
        Donec sit amet dictum nisl, et facilisis velit. Cras mauris ipsum, fermentum quis massa sit amet, condimentum luctus massa. Nam lacinia, nulla tincidunt ullamcorper tincidunt, mi nibh posuere eros, in egestas mi mi eget diam. Cras non lectus pharetra,
        ullamcorper erat ac, mattis lacus. Donec auctor, elit ac tempus blandit, nibh urna cursus erat, in congue tellus neque in justo. Fusce in gravida ligula. Nunc ullamcorper porta arcu ut viverra. Maecenas vitae odio convallis, convallis urna nec,
        pharetra mauris. Sed ut facilisis augue. Nullam tincidunt posuere mauris, nec dapibus urna mattis vitae. Curabitur lacinia nisl vel elit varius rhoncus et non quam. Sed malesuada tortor sed neque molestie porta. Vivamus vehicula nibh vitae posuere
        rutrum. Ut eu condimentum nunc, in laoreet ipsum. Donec at augue quis ipsum maximus malesuada. Sed eleifend varius lectus quis rhoncus. Curabitur dapibus eros sit amet nisi blandit tempus. Aliquam erat volutpat. Praesent commodo ipsum non nibh
        dignissim, et pretium nisi varius.
      </p>
      <h4>Montażem filmów</h4>

      <div class="vimeo" style="position:relative; margin-left: 12.5%; ">
        <iframe src="https://player.vimeo.com/video/71013726?color=ffffff&byline=0&portrait=0" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
      <br>
      <p class="text" style="padding-bottom: 5px;">

        Nam venenatis ligula sit amet orci dictum, non vestibulum nisi bibendum. Nam scelerisque dolor neque, id faucibus leo mattis quis. Pellentesque pretium accumsan cursus. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis
        in faucibus. Fusce non condimentum dui, eu laoreet tellus. Nam eget ultrices massa, ut rhoncus sapien. Aliquam eget est vel eros commodo imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet quam sit amet felis rutrum
        euismod. Vestibulum venenatis tincidunt neque id auctor. Cras sed quam tristique quam ultrices mattis vitae eu libero. Maecenas vitae justo quis nisl rutrum laoreet rutrum vitae nulla. Nunc hendrerit sed dui vel varius. Cras aliquet volutpat tincidunt.
        Integer venenatis eleifend risus, ut venenatis dolor accumsan ut. Nulla imperdiet tempus ultricies. Donec porta felis et malesuada eleifend. Nunc commodo ex et consequat tincidunt. Aenean eu lacus ut libero malesuada auctor vel eu mi. Praesent
        fringilla libero vel lorem ornare mattis. Nulla id purus metus. Vivamus ornare sodales ante ac suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
      </p>
      <br>
    </div>

    <div id="bottom" class="bottom" style="position:absolute;top:2200px;">

      <footer class="bottom_footer" id="bottom_footer">

        <ul class="bottom_list">
          <li style="word-spacing:1px; font-weight:400; font-family:'MontserratFont';">
            My social media accounts
          </li>
          <br>
          <br>
          <li>
            <a class="bottom_list_item" href="https://twitter.com/AJWRSW">Twitter</a>
          </li>
          <li>
            <a class="bottom_list_item" href="">FB</a>
          </li>
          <li>
            <a class="bottom_list_item" href="http://vsco.co/thenathurat/">VSCO</a>
          </li>

        </ul>

      </footer>
    </div>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

此外，边框不会显示在底部列表中。我正试图修复它。

有什么想法吗？

修改

另一件事。当我在position:absolute`ul.bottom_list＆＃39;中将position:relative更改为.bottom时是1200px高。

2 个答案:

答案 0 :(得分：1)

  1. .vimeo - 在属性样式中删除=＆＃39; margin-left ...
  2. iframe - 使用vimeo视频，{width：100％;}
  3. .bottom {box-sizing：border-box;}

答案 1 :(得分：0)

你做错了很多事。

我可以问你为什么从顶部定位.bottom？如果你从bottom: 0

那样从底部定位它会更好

因为.bottom是绝对的，所以应该有相对父，但我没有看到任何父元素被定义为相对。 

.all {
    position: relative;
}

使用此代码。并且由于绝对元素不会采用布局，请尝试使用.all的填充，以便它将推送.bottom并且不会与内容重叠。

此外，还有一些您使用浮动的元素，因此您需要在父级中使用类似overflow: hidden;的内容来获得正确的布局。我尝试在.all上使用它看起来不错。试试看。

相关问题
最新问题