2016-04-18 3 views
-1

はスクロールダウンすることはできません、サイトはときに動作するようには思えないだけで、スクリーンショット

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek); 
 

 
body 
 
{ 
 
    
 
} 
 

 

 
.topbar 
 
{ 
 
\t position: fixed; 
 
\t top: 0px; 
 
\t width: 100%; 
 
    right: 0px; 
 
\t background-color: tomato; 
 
\t text-align: right; 
 
\t height: 50px; 
 
\t z-index: 100; 
 
} 
 

 
.texti 
 
{ 
 
\t margin-right: 15px; 
 
} 
 

 
.linkur 
 
{ 
 
\t border: 1px solid black; 
 
\t padding: 8.5px; 
 
\t margin-right: 10px; 
 
\t text-decoration: none; 
 
\t border-color: transparent; 
 
\t font-size: 1.3em; 
 
\t color: darkred; 
 
} 
 
.linkur:hover 
 
{ 
 
\t background-color: lightblue; 
 
} 
 

 
label 
 
{ 
 
\t position: fixed; 
 
\t top: -2000px; 
 
} 
 

 
.mynd 
 
{ 
 
\t position: fixed; 
 
\t top: -50px; 
 
\t left:20px; 
 
} 
 

 
.navigation 
 
{ 
 
\t height: 96%; 
 
\t width: 20%; 
 
\t background-color: tomato; 
 
} 
 

 
.logo 
 
{ 
 
\t position: fixed; 
 
\t top: -100px; 
 
} 
 

 
.hlid 
 
{ 
 
    position: fixed; 
 
    left: -2000px; 
 
    width: 700px; 
 
    height: 90%; 
 
    z-index: 100; 
 
} 
 

 
.main 
 
{ 
 
    position: fixed; 
 
    top: 20%; 
 
\t background-color: white; 
 
\t left: 20%; 
 
\t right: 20%; 
 
\t height: 3000px; 
 
\t width: 60%; 
 
} 
 

 

 
.leikjatexti 
 
{ 
 
    border: 1px solid black; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    margin-bottom: 10px; 
 
} 
 

 
.text2 
 
{ 
 
\t text-decoration: none; 
 
\t color: darkred; 
 
} 
 
@media screen and (max-width: 48em){ 
 

 

 
\t .topbar 
 
\t { 
 
\t \t text-align: left; 
 
\t } 
 

 
\t .linkur 
 
\t { 
 
\t \t position: fixed; 
 
\t \t top: -100px; 
 
\t } 
 
\t 
 
input { 
 
    display: none; 
 
} 
 
label, 
 
label { 
 
\t position: fixed; 
 
\t top: -27px; 
 
\t left: 5px; 
 
    color: #0087cc; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 18px; 
 
    transition: all .15s ease; 
 
    font-size: 30px; 
 
    z-index: 100; 
 
} 
 
label:hover { 
 
    color: #ff7b29; 
 
} 
 

 
input:checked ~ .hlid { 
 
    position: fixed; 
 
    left: -50px; 
 
    height: 100%; 
 
    transition: all .15s ease; 
 
} 
 
li 
 
{ 
 
\t list-style-type: none; 
 
} 
 

 
.hlidlinkur 
 
{ 
 
\t margin-bottom: 20px; 
 
\t margin-top: 20px; 
 
\t margin-left: 10px; 
 
} 
 

 
.hlidlinkura 
 
{ 
 
\t border: 1px solid black; 
 
\t padding: 7px; 
 
\t text-align: center; 
 
\t border-color: transparent; 
 
\t text-decoration: none; 
 
\t color: darkred; 
 
\t font-size: 1.1em; 
 
\t font-family: "Sans serif"; 
 
} 
 

 
.hlidlinkura:hover 
 
{ 
 
\t background-color: lightblue; 
 
} 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <meta charset="utf-8"> 
 
\t <title>Main site</title> 
 
\t <link rel="stylesheet" href="Gru_main.css" type="text/css" charset="utf-8" /> 
 
</head> 
 
<body> 
 
<nav class="topbar"> 
 
    <img class="mynd" src="project.png"> 
 
    <ul class="texti"> 
 
    <a href="" class="linkur">Games</a> 
 
    <a href="" class="linkur">Profile</a> 
 
    <a href="" class="linkur">My Cart</a> 
 
    </ul> 
 
</nav> 
 

 

 
<input type="checkbox" id="toggle"> 
 
<label for="toggle"><p>&#9776</p></label> 
 
     <nav class="hlid"> 
 
     <ul class="navigation"> 
 
      <li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a><li> 
 
      <li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li> 
 
      <li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li> 
 
     </ul> 
 
     </nav> 
 

 
<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
 
<label for="nav-trigger"></label> 
 

 

 
<div class="main"> 
 

 
<a class="text2" href="Gru_login.html"> 
 
    <div class="leikjatexti"> 
 
    <img href="" class="mynd2" src="portal2.jpg" alt="portal" height="170" width="120"> 
 
    <h1>Portal 2</h1> 
 
    <p> 
 
    Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann, 
 
    í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir. 
 
    </p> 
 
    </div> 
 
</a> 
 

 
<a class="text2" href="Gru_login.html"> 
 
    <div class="leikjatexti"> 
 
    <img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120"> 
 
    <h1>The Walking Dead</h1> 
 
    <p> 
 
    viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn 
 
    til að velja rétt og fá rétta endann. 
 

 
    </p> 
 
    </div> 
 
</a> 
 

 
<a class="text2" href="Gru_login.html"> 
 
    <div class="leikjatexti"> 
 
    <img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120"> 
 
    <h1>The Walking Dead</h1> 
 
    <p> 
 
    viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn 
 
    til að velja rétt og fá rétta endann. 
 

 
    </p> 
 
    </div> 
 
</a> 
 

 
<a class="text2" href="Gru_login.html"> 
 
    <div class="leikjatexti"> 
 
    <img href="" class="mynd2" src="walking.jpg" alt="portal" height="170" width="120"> 
 
    <h1>The Walking Dead</h1> 
 
    <p> 
 
    viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn 
 
    til að velja rétt og fá rétta endann. 
 

 
    </p> 
 
    </div> 
 
</a> 
 
</div> 
 
</body>

強いテキスト

私はこのコードの助けを必要としているように思えます私はスクロールしようとすると、私はウェブサイト上の高さを入れようとしたが、サイトはちょうど同じ場所に静かにそれを下にスクロールしなかった、コードのいくつかの単語は、アイスランドのBTWです。

答えて

0

ウェブサイトをスクロールできるようにするには、あなたのメインディビジョンを相対に変更する必要があります。固定適用:

.main { 
 
    position: relative; 
 
}

+0

をスクロールすることができます –

0

あなたのすべてのコンテンツは、ポジションを持っているようです。

w3.orgから - 「位置が固定された要素はビューポートに対して固定されています。文書がスクロールされても、その位置は変わりません。」

これは、スクロールしたくない要素(メニューなど)でのみ使用してください。

0

これはmain divにposition: fixed;を入れているためです。固定されているとは、ビューの上部に留まることを意味します。

position: relativeから

変更して、その後、あなたはそれが相対的にpostirionを変更するために働いたありがとう

関連する問題