我的html / css网站不会滚动

时间：2014-10-28 02:25:56

标签： html css scroll web overflow

我的html / css网站不会滚动，但您可以缩小并显示所有内容。 它没有使用溢出x和y。我尝试了很多东西，但他们没有工作。请帮忙。谢谢。这些句子在这里，因为我的问题没有足够的细节。这些句子在这里，因为我的问题中没有足够的细节。这些句子在这里，因为我的问题没有足够的细节。

＆＃13;
＆＃13; 
<html>
<body>
<head>
<style>
body {
    background-color: #101010;
    background-image: url("file:///Users/20175040/Desktop/gabeeg/gabeegwebdesign.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    overflow-y: scroll;
    overflow-x: scroll;
    
    
}

</style>
</head>


<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet" />
<div id="menuwrapper">
    <ul>
        <li><a href="home.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/home.png" alt="home" width="220" height="42" /></a></li>
        <li><a href="games.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/games.png" alt="games" width="220" height="42" class="games"/></a>
            <ul>
                <li><a href="football2104.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football2014.jpg" alt="football2014" width="318.5" height="22.5" class="football2104"/></a></li>
                <li><a href="basketball.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/basketball.jpg" alt="basketball" width="318.5" height="22.5" class="basketball"/></a></li>
                <li><a href="challenges.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/challenges.jpg" alt="challenges" width="318.5" height="22.5" class="challenges"/></a></li>
                <li><a href="european.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/european.jpg" alt="european" width="318.5" height="22.5" class="european"/></a></li>
                <li><a href="volleyball.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/volleyball.jpg" alt="volleyball" width="318.5" height="22.5" class="volleyball"/></a></li>
                <li><a href="wc.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/wc.jpg" alt="wc" width="318.5" height="22.5" class="wc"/></a></li>
                <li><a href="open.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/open.jpg" alt="open" width="318.5" height="22.5" class="open"/></a></li>
                <li><a href=".html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/tennis.jpg" alt="tennis" width="318.5" height="22.5" class="tennis"/></a></li>
                <li><a href="hockey.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/hockey.jpg" alt="hockey" width="318.5" height="22.5" class="hockey"/></a></li>
                <li><a href="football.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football.jpg" alt="football" width="318.5" height="22.5" class="football"/></a></li>
            </ul>
        </li>
        <li><a href="downloads.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/downloads.png" alt="downloads" width="220" height="42" /></a>
                    </li>
        


</div>
<style>
/* Define the body style */
body {
    font-family:Arial;
    font-size:0px;
    position: fixed;
    top: 182;
    left: -8;
}


/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    border-bottom:solid 0px #1a1a1a;
    width:2.3in;
    cursor:pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#1a1a1a;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:0px 0px;
    color:#1a1a1a;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
    z-index: 1;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:2.3in;
    top:3px;
    display:block;
    z-index: 1;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
    background-color:#cae25a;
    z-index: 1;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
 
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:0px;
    z-index: 1;
}


/* Clear float */
.clear{
    clear:both;
}
</style>	


<a href="football2014.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football2014.gif" width="219" class="img1"></a>
<a href="basketball.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/basketball.gif" width="219" class="img2"></a>
<a href="challenges.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/challenges.gif" width="219" class="img3"></a>
<a href="european.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/european.gif" width="219" class="img4"></a>
<a href="volleyball.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/volleyball.gif" width="219" class="img5"></a>
<a href="wc.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/wc.gif" width="219" class="img6"></a>
<a href="open.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/open.gif" width="219" class="img7"></a>
<a href="tennis.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/tennis.gif" width="219" class="img8"></a>
<a href="hockey.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/hockeyimg.jpg" width="219" class="img9"></a>
<a href="football.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/super.gif" width="219" class="img10"></a>

<style>
.img1 {
    position: fixed;
    top: 230px;
    left: 263px;
}
.img2 {
    position: fixed;
    top: 230px;
    left: 523px;
}
.img3 {
    position: fixed;
    top: 230px;
    left: 783px;
}
.img4 {
    position: fixed;
    top: 438px;
    left: 263px;
}
.img5 {
    position: fixed;
    top: 438px;
    left: 523px;
}
.img6 {
    position: fixed;
    top: 438px;
    left: 783px;
}
.img7 {
    position: fixed;
    top: 646px;
    left: 263px;
}
.img8 {
    position: fixed;
    top: 646px;
    left: 523px;
}
.img9 {
    position: fixed;
    top: 646px;
    left: 783px;
}
.img10 {
    position: fixed;
    top: 854px;
    left: 263px;
}
</style>

</body>

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

4 个答案:

答案 0 :(得分：0)

您的身体设置为position: fixed，但未指定您的#menuwrapper或#menuwrapper ul滚动。因此，您的身体处于固定位置，其余的HTML只会从页面流出。

我有一种情况，我需要修复我的身体，但是开始删除它，你应该能够滚动。我现在无法测试这种情况，但这应该是写入方向的一个步骤。我认为你想要实现的目标是background: fixed来修复你的背景图像。

答案 1 :(得分：0)

从您的身体中删除position: fixed;以及top: 182;和left: 8;。

我不确定你是否添加了这些，但这样做会基本上迫使身体处于不会滚动的固定状态。

答案 2 :(得分：0)

我所做的更改（阅读css评论）：

body {
    background-color: #101010;
    background-image: url("file:///Users/20175040/Desktop/gabeeg/gabeegwebdesign.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    position: static /*changed position: fixed to the default value, which does allow scrolling*/
    overflow: auto; /*only adds scrollbars when appropriate*/
}

#menuwrapper{ 
  height: 1500px;  /*added a height and color to the wrapper so content is heigh enough to need scrolling*/
  background-color: red;
 }

希望这适合你。这是已编辑的代码段。

＆＃13;
＆＃13; 
<html>
<body>
<head>
<style>
body {
    background-color: #101010;
    background-image: url("file:///Users/20175040/Desktop/gabeeg/gabeegwebdesign.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    overflow: auto; 
}

#menuwrapper{ 
  height: 1500px;  
  background-color: red;
 }
</style>
</head>


<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet" />
<div id="menuwrapper">
    <ul>
        <li><a href="home.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/home.png" alt="home" width="220" height="42" /></a></li>
        <li><a href="games.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/games.png" alt="games" width="220" height="42" class="games"/></a>
            <ul>
                <li><a href="football2104.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football2014.jpg" alt="football2014" width="318.5" height="22.5" class="football2104"/></a></li>
                <li><a href="basketball.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/basketball.jpg" alt="basketball" width="318.5" height="22.5" class="basketball"/></a></li>
                <li><a href="challenges.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/challenges.jpg" alt="challenges" width="318.5" height="22.5" class="challenges"/></a></li>
                <li><a href="european.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/european.jpg" alt="european" width="318.5" height="22.5" class="european"/></a></li>
                <li><a href="volleyball.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/volleyball.jpg" alt="volleyball" width="318.5" height="22.5" class="volleyball"/></a></li>
                <li><a href="wc.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/wc.jpg" alt="wc" width="318.5" height="22.5" class="wc"/></a></li>
                <li><a href="open.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/open.jpg" alt="open" width="318.5" height="22.5" class="open"/></a></li>
                <li><a href=".html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/tennis.jpg" alt="tennis" width="318.5" height="22.5" class="tennis"/></a></li>
                <li><a href="hockey.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/hockey.jpg" alt="hockey" width="318.5" height="22.5" class="hockey"/></a></li>
                <li><a href="football.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football.jpg" alt="football" width="318.5" height="22.5" class="football"/></a></li>
            </ul>
        </li>
        <li><a href="downloads.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/downloads.png" alt="downloads" width="220" height="42" /></a>
                    </li>
        


</div>
<style>
/* Define the body style */
body {
    font-family:Arial;
    font-size:0px;
    top: 182;
    left: -8;
}

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    border-bottom:solid 0px #1a1a1a;
    width:2.3in;
    cursor:pointer;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#1a1a1a;
    position:relative;
}

/* We apply the link style */
#menuwrapper ul li a{
    padding:0px 0px;
    color:#1a1a1a;
    display:inline-block;
    text-decoration:none;
}

/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
    z-index: 1;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{
    left:2.3in;
    top:3px;
    display:block;
    z-index: 1;
}

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{
    background-color:#cae25a;
    z-index: 1;
}

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{
 
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    color:#454444;
    display:inline-block;
    width:0px;
    z-index: 1;
}


/* Clear float */
.clear{
    clear:both;
}
</style>	


<a href="football2014.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football2014.gif" width="219" class="img1"></a>
<a href="basketball.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/basketball.gif" width="219" class="img2"></a>
<a href="challenges.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/challenges.gif" width="219" class="img3"></a>
<a href="european.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/european.gif" width="219" class="img4"></a>
<a href="volleyball.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/volleyball.gif" width="219" class="img5"></a>
<a href="wc.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/wc.gif" width="219" class="img6"></a>
<a href="open.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/open.gif" width="219" class="img7"></a>
<a href="tennis.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/tennis.gif" width="219" class="img8"></a>
<a href="hockey.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/hockeyimg.jpg" width="219" class="img9"></a>
<a href="football.html"><img src="file:///Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/super.gif" width="219" class="img10"></a>

<style>
.img1 {
    position: fixed;
    top: 230px;
    left: 263px;
}
.img2 {
    position: fixed;
    top: 230px;
    left: 523px;
}
.img3 {
    position: fixed;
    top: 230px;
    left: 783px;
}
.img4 {
    position: fixed;
    top: 438px;
    left: 263px;
}
.img5 {
    position: fixed;
    top: 438px;
    left: 523px;
}
.img6 {
    position: fixed;
    top: 438px;
    left: 783px;
}
.img7 {
    position: fixed;
    top: 646px;
    left: 263px;
}
.img8 {
    position: fixed;
    top: 646px;
    left: 523px;
}
.img9 {
    position: fixed;
    top: 646px;
    left: 783px;
}
.img10 {
    position: fixed;
    top: 854px;
    left: 263px;
}
</style>

</body>

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

答案 3 :(得分：0)

溢出-y：滚动;身体和html 

#include <iostream>

answer

相关问题
最新问题