2017-11-23 15 views
0

したがって、水平スクロールを行い、垂直スクロールを無効にします。私はどうすればいいのですか?モバイルデバイスで水平スクロールしない

P.S.また、私はブラウザのサイズを変更するときにサイトのビューに問題があります。

私にアドバイスをして、何をすべきか教えてください。

(詳細をお持ちでない)

が水平方向にスクロールすることはできません:

enter image description here

を、垂直スクロールを使用しながら、この問題が発生した:

enter image description here

This is Site

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html { 
 
    width: 100%; 
 
\t height: 100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    margin:0px; 
 
    overflow: hidden; 
 
} 
 

 
.Header { 
 
    background-repeat: no-repeat; 
 
    background-position: top; 
 
    position: absolute; 
 
    vertical-align: top; 
 
    width:100%; 
 
    height:13.5%; 
 
    z-index: 2; 
 
} 
 

 
.News { 
 
    color: #6a70b3; 
 
    font-family: verdana, arial, helvetica, "sans-serif"; 
 
    font-size: 11.3333px; 
 
    line-height: 17px; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    margin-right: 40%; 
 
    padding-bottom: 2%; 
 
} 
 

 
section { /*Контент*/ 
 
    font-family: Arial; 
 
    color: #000000; 
 
    font-size: 12.8px; 
 
    vertical-align: middle; 
 
    text-align: left; 
 
    width:900px; 
 
    height:300px; 
 
    position:fixed; 
 
    left:20%; 
 
    top:110px; 
 
    padding-bottom: 90px; 
 
    flex: 1 0 auto; 
 
} 
 

 
section a:visited { 
 
    color:#003399; 
 
} 
 

 
section a:hover { 
 
    color: black; 
 
} 
 

 
aside { /*Sidebar*/ 
 
    padding: 5% 0.5%; 
 
    margin: 0% auto; 
 
    position: fixed; 
 
    left: 0; 
 
    width:15%; 
 
    background-image: url(../images/side.png); 
 
    background-repeat:repeat-y; 
 
    background-size: 75%; 
 
    height: 100%; 
 
    top: 10%; 
 
    z-index: 1; 
 
} 
 

 
aside li { /*Sidebar Список */ 
 
    font-family: Verdana, Arial , "sans-serif", helvetica; 
 
    font-size: 11px; 
 
    margin-bottom: 5%; 
 
    width: 70%; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    line-height: 15px; 
 
    z-index: 2; 
 
    
 
} 
 
/* Стиль верхней панели навигации */ 
 
.topnav { 
 
    margin:6.2%; 
 
    margin-left: 20%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 2.5%; 
 
    top: 0%; 
 
    position: fixed; 
 
    background-color: red; 
 
    text-align:center; 
 
    z-index: 2; 
 
    
 
} 
 

 
/* Стиль ссылок навигации */ 
 
.topnav a { 
 
    margin:0 auto; 
 
    display:inline; 
 
    margin-left:3px; 
 
    margin-top: 3px; 
 
    line-height: 7px; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    float:left; 
 
    font-family: verdana, "sans-serif", helvetica, arial; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
    z-index: 3; 
 
} 
 

 
/* Изменение цвета при наведении */ 
 
.topnav a:hover { 
 
    color: orange; 
 
} 
 

 
ul { 
 
    list-style-type: none; /* Убираем маркеры */ 
 
    text-decoration: none; /* Убираем подчёркивание */ 
 
    margin-left: 0; /* Отступ слева в браузере IE и Opera */ 
 
    padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */ 
 
} 
 

 
ul a{ 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color: darkblue; 
 
} 
 

 
ul a:hover{ 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color:orange; 
 
} 
 

 
#mainText { 
 
    text-align: center; 
 
} 
 

 
.border { 
 
    color:black; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 

 
footer { /*Подвал*/ 
 
    text-align: center; 
 
    margin-right:0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 0px; 
 
    color: white; 
 
    text-align: center; 
 
    min-height: 50px; 
 
    float: none; 
 
    position: fixed; 
 
} 
 

 
footer a{ 
 
    font-family: Arial; 
 
    font-size: 10.6667px; 
 
    line-height: 14px; 
 
    font-weight: 400; 
 
    position: absolute; 
 
    left: 5%; 
 
    top: 17%; 
 
    width: 100%; 
 
    color: white; 
 
    text-decoration: none; 
 
    color:#06C; 
 
    height: 50px; 
 
    float: none; 
 
} 
 

 
.footerline { 
 
    position: fixed; 
 
    bottom: 1px; 
 
    left: 0px; 
 
    float: none; 
 
} 
 

 

 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /*iPad*/ 
 
    body { 
 
     overflow: scroll; 
 
    } 
 
    aside { 
 
     min-width: 17%; 
 
     min-height: 100%; 
 
     top: 5%; 
 
    } 
 
    
 
    .topnav { 
 
     top: 0.5%; 
 
    } 
 
} 
 

 

 
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) { 
 
/*iPhone SE*/ 
 
    body { 
 
     overflow-x: auto; 
 
    } 
 
     aside { 
 
     min-width: 55%; 
 
     min-height: 100%; 
 
     top: 8%; 
 
    } 
 
    
 
    header { 
 
     
 
    } 
 
    .topnav { 
 
     top: 5.4%; 
 
     left: 40%; 
 
     height: 3.5%; 
 
    } 
 
    
 
    section { 
 
     top: 14%; 
 
     left: 61%; 
 
    } 
 
    
 
    footer a{ 
 
     left: 80%; 
 
    } 
 
} 
 

 
@media (min-width: 1650px) { /*fullHD*/ 
 
    aside { 
 
     width: 10%; 
 
     min-height: 100%; 
 
     top: 8%; 
 
    } 
 
    
 
    .topnav { 
 
     top: -2.3%; 
 
     height: 2%; 
 
    } 
 
    
 
    .News { 
 
    color: #6a70b3; 
 
    font-family: verdana, arial, helvetica, "sans-serif"; 
 
    font-size: 12.3333px; 
 
    line-height: 17px; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    margin-right: 50%; 
 
    padding-top: 2%; 
 
    padding-left: 14%; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html lang="ru"> 
 
    <head>  
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="css/index.css"> 
 
<title>Новости - Анонсы</title> 
 
    </head> 
 
<body> 
 
    <header> 
 
    <img src="images/headerfinal.png" class="Header" alt="Header"> 
 
    </header> 
 
    <nav> 
 
    <div class="topnav"> <!--Верхнее меню --> 
 
    <a href="news.html">Новости</a> 
 
    <a href="#top">О Суде</a> 
 
    <a href="#top">Решения КС РФ</a> 
 
    <a href="#top">Заседания КС РФ</a> 
 
    <a href="#top">Контакты</a> 
 
    </div> 
 
    </nav> 
 
    
 
    <section> <!-- Основной текст --> 
 
<div class="News"><h3>Новости - Анонсы</h3></div> 
 
<br> 
 
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p> 
 
<br> 
 
<p>(<a href="#top">подробнее...</a>)</p> 
 
<br> 
 
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p> 
 
<br> 
 
<p>(<a href="#top">подробнее...</a>)</p> 
 

 
<br> 
 
    <a href="#top">Посмотреть все новости</a> 
 
<br> 
 
    </section> 
 
    <aside> <!-- Меню слева --> 
 
<ul> 
 
<br> 
 
<br> 
 
<br> 
 
<li><a href="news.html">Новости</a></li> 
 
<li><a href="#top">О Суде</a></li> 
 
<li><a href="#top">Решения КС РФ</a></li> 
 
<li><a href="#top">Заседания КС РФ</a></li> 
 
<li><a href="#top">Контакты</a></li> 
 
</ul> 
 
<br> 
 
<img src="images/gerb.gif" alt="Герб РФ" align=center> 
 
    </aside> 
 
<br> 
 
<br> 
 
    <footer> 
 
     <hr style="border:1px; height:1px; width: 70%; margin-left: 270px; background-color:black"> 
 
    <img src="images/footer.PNG" class=footerline alt="Footer"> 
 
     <a href="index.html">©Конституционный Суд Российской Федерации, 2008-2017</a> 
 
    </footer> 
 
</body> 
 
</html>

答えて

0

あなたが本当にHTMLコードとCSSを台無しに思えます。あなたが働いているウェブサイトのレイアウト構造はあなたの心の中で明確にすべきです。私はブートストラップを学ぶことをお勧めします。これはあなたに多くの助けになります。

あなたはこのコードを使用することができます

nav{float: left;width: 75%;} 
 
.News { 
 
    color: #6a70b3; 
 
    font-family: verdana, arial, helvetica, "sans-serif"; 
 
    font-size: 11.3333px; 
 
    line-height: 17px; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    margin-right: 40%; 
 
    padding-bottom: 2%; 
 
} 
 

 
section { /*Контент*/ 
 
     font-family: Arial; 
 
    color: #000000; 
 
    font-size: 12.8px; 
 
    float: left; 
 
    width: 75%; 
 
} 
 

 
section a:visited { 
 
    color:#003399; 
 
} 
 

 
section a:hover { 
 
    color: black; 
 
} 
 

 
aside { /*Sidebar*/ 
 
    padding: 5% 0.5%; 
 
    margin: 0% auto; 
 
    width: 20%; 
 
    background-image: url(../images/side.png); 
 
    background-repeat: repeat-y; 
 
    background-size: auto; 
 
    float: left; 
 
} 
 

 
aside li { /*Sidebar Список */ 
 
    font-family: Verdana, Arial , "sans-serif", helvetica; 
 
    font-size: 11px; 
 
    margin-bottom: 5%; 
 
    width: 70%; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    line-height: 15px; 
 
    z-index: 2; 
 
    
 
} 
 
/* Стиль верхней панели навигации */ 
 
.topnav { 
 
     margin: 6.2% 0; 
 
    width: 100%; 
 
    background-color: red; 
 
    text-align: center; 
 
    float: left; 
 
    
 
} 
 

 
/* Стиль ссылок навигации */ 
 
.topnav a { 
 
     margin-left: 3px; 
 
    margin-top: 3px; 
 
    line-height: 7px; 
 
    font-size: 11px; 
 
    font-weight: 700; 
 
    font-family: verdana, "sans-serif", helvetica, arial; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 5px 10px; 
 
    text-decoration: none; 
 
} 
 

 
/* Изменение цвета при наведении */ 
 
.topnav a:hover { 
 
    color: orange; 
 
} 
 

 
ul { 
 
    list-style-type: none; /* Убираем маркеры */ 
 
    text-decoration: none; /* Убираем подчёркивание */ 
 
    margin-left: 0; /* Отступ слева в браузере IE и Opera */ 
 
    padding-left: 0; /* Отступ слева в браузере Firefox, Safari, Chrome */ 
 
} 
 

 
ul a{ 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color: darkblue; 
 
} 
 

 
ul a:hover{ 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color:orange; 
 
} 
 

 
#mainText { 
 
    text-align: center; 
 
} 
 

 
.border { 
 
    color:black; 
 
} 
 

 
table, th, td { 
 
    border: 1px solid black; 
 
} 
 

 
footer { /*Подвал*/ 
 
     width: 100%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 

 

 
.footerline { 
 
    position: fixed; 
 
    bottom: 1px; 
 
    left: 0px; 
 
    float: none; 
 
} 
 

 

 

 
    .News { 
 
    color: #6a70b3; 
 
    font-family: verdana, arial, helvetica, "sans-serif"; 
 
    font-size: 12.3333px; 
 
    line-height: 17px; 
 
    font-weight: 700; 
 
    text-align: left; 
 
    margin-right: 50%; 
 
    padding-top: 2%; 
 
    padding-left: 14%; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html lang="ru"> 
 
    <head>  
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="css/index.css"> 
 
<title>Новости - Анонсы</title> 
 
    </head> 
 
<body> 
 
    <header> 
 
    <img src="images/headerfinal.png" class="Header" alt="Header"> 
 
    </header> 
 
\t 
 
\t <aside> <!-- Меню слева --> 
 
<ul> 
 
<br> 
 
<br> 
 
<br> 
 
<li><a href="news.html">Новости</a></li> 
 
<li><a href="#top">О Суде</a></li> 
 
<li><a href="#top">Решения КС РФ</a></li> 
 
<li><a href="#top">Заседания КС РФ</a></li> 
 
<li><a href="#top">Контакты</a></li> 
 
</ul> 
 
<br> 
 
<img src="images/gerb.gif" alt="Герб РФ" align=center> 
 
    </aside> 
 
    <nav> 
 
    <div class="topnav"> <!--Верхнее меню --> 
 
    <a href="news.html">Новости</a> 
 
    <a href="#top">О Суде</a> 
 
    <a href="#top">Решения КС РФ</a> 
 
    <a href="#top">Заседания КС РФ</a> 
 
    <a href="#top">Контакты</a> 
 
    </div> 
 
    </nav> 
 
    
 
    <section> <!-- Основной текст --> 
 
<div class="News"><h3>Новости - Анонсы</h3></div> 
 
<br> 
 
<p>10 ноября 2017 года Конституционный Суд РФ провозгласит Постановление по делу о проверке конституционности Федерального закона «О внесении изменений в отдельные законодательные акты РФ в части совершенствования законодательства о публичных мероприятиях»</p> 
 
<br> 
 
<p>(<a href="#top">подробнее...</a>)</p> 
 
<br> 
 
<p>7 ноября 2017 года Конституционный Суд РФ провозгласил Постановление по делу о проверке конституционности ряда положений Закона Республики Крым «Об особенностях регулирования имущественных и земельных отношений на территории Республики Крым»</p> 
 
<br> 
 
<p>(<a href="#top">подробнее...</a>)</p> 
 

 
<br> 
 
    <a href="#top">Посмотреть все новости</a> 
 
<br> 
 
    </section> 
 

 
<br> 
 
<br> 
 
    <footer> 
 
     <hr style="border:1px;width:60%; height:1px;background-color:black"> 
 
    <img src="images/footer.PNG" class=footerline alt="Footer"> 
 
     <a href="index.html">©Конституционный Суд Российской Федерации, 2008-2017</a> 
 
    </footer> 
 
</body> 
 
</html>

は、それはあなたを助け願っています。

+0

ありがとうございます! しかし、私はちょっとした問題を抱えています。サイドバーはページの真ん中にトップハイトとフルハイトではありません。 [リンク](http://ksrf.tk/) –

+0

前回の回答でコードを更新しましたので確認してください。がんばろう –