заголовок div мерцает и иногда случайно меняет размер при нажатии на ссылки - PullRequest
Новая
       41

заголовок div мерцает и иногда случайно меняет размер при нажатии на ссылки

0 голосов
/ 11 сентября 2018

Я просто работал над своим веб-сайтом (и думал, что все готово) и проверил, работают ли ссылки в моем разделе заголовка, когда я заметил изменение размеров заголовка div на долю секунды при нажатии на ссылку. Это случается только иногда, хотя. Другая проблема заключается в том, что я не могу нажимать на ссылки, пока не появится анимация постепенного появления ...

Ссылки ведут на htmls, которые выглядят точно так же, только содержание в основных изменениях.

Если бы кто-нибудь мог мне помочь, это было бы здорово! Заранее спасибо! Вот код для сайта:

https://jsfiddle.net/Kaschmir/ayo7n5dj/

@import url('https://fonts.googleapis.com/css?family=Astloch|Berkshire+Swash|Cherry+Swash|Merienda+One|Oleo+Script|Tulpen+One');
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

html,
body {
  margin: 0;
  height: 100%;
}

header {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-top: 30px;
  width: 10em;
  position: fixed;
  left: 2em;
  padding: 1em;
  border: 1px solid rgba(102, 140, 255, 0.8);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-family: 'Astloch', cursive;
  font-size: 1.4vw;
  color: rgba(102, 140, 255, 1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-align: right;
}

#info {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-top: 30px;
  width: 18em;
  position: fixed;
  left: 15em;
  padding: 1em;
  border: 1px solid rgba(102, 140, 255, 0.8);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-family: 'Astloch', cursive;
  font-size: 1.4vw;
  color: rgba(102, 140, 255, 1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-align: justify;
}

#about {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin-top: 30px;
  width: 26em;
  position: fixed;
  left: 15em;
  padding: 1em;
  border: 1px solid rgba(102, 140, 255, 0.8);
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-family: 'Astloch', cursive;
  font-size: 1.4vw;
  color: rgba(102, 140, 255, 1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-align: justify;
}

#rightside {
  float: right;
}

main {
  animation: fadeIn 2s linear;
  overflow: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

a:hover {
  text-decoration: underline;
}

.wrapper {
  float: right;
  width: 46%;
  padding: 30px 2em 2em 2em;
}

.wrappermisc {
  float: right;
  width: 70%;
  padding: 30px 0px 0px 0px;
  font-size: 0px;
}

img.big {
  width: 100%;
  padding-bottom: 2em;
  float: right;
}

img.small {
  width: 50%;
  padding-bottom: 2em;
  float: right;
}

img.miscfirst {
  width: 30%;
  padding: 20px 0px 0px 30px;
}

img.misc {
  width: 30%;
}

hr {
  border: 0;
  height: 0;
  border-top: 0px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(102, 140, 255, 1);
  display: block;
  margin-right: 30px;
}

.caption {
  display: block;
  padding: 20px 0px 20px 30px;
  font-family: 'Astloch', cursive;
  font-size: 1.4vw;
  color: rgba(102, 140, 255, 1);
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  text-align: justify;
}

a#hyper {
  color: lightblue;
}
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="portfolio.">
  <title> help </title>
  <link rel="stylesheet" href="portfolio_style.css">
</head>

<body>
  <header>
    <a href="1.html">link1</a><br>
    <br> title 1: <br>
    <a href="2.html">link2</a> <br>
    <a href="3.html">link3</a> <br>
    <a href="4.html">link4</a> <br>
    <a href="5.html">link5</a> <br>
    <a href="6.html">link6</a> <br>
    <br> title 2: <br>
    <a href="7.html">link7</a> <br>
    <a href="8.html">link8</a> <br>
    <br>
    <a href="9.html">link9</a> <br>
  </header>


  <main>

    <div class="wrapper">
      <img class="big" src="https://www.w3schools.com/w3images/fjords.jpg">
      <img class="big" src="https://www.w3schools.com/w3images/fjords.jpg">
      <img class="small" src="https://www.w3schools.com/w3images/fjords.jpg">
    </div>

    <div id="info">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>

  </main>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...