-2

My html/css website will not scroll but you can zoom out and everything shows. It didn't work with the overflow x and y. I tried a number of things but they didn't work. please help. thank you. these sentences are here because i dont have enough details in my question.these sentences are here because i dont have enough details in my question.these sentences are here because i dont have enough details in my question.

<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>
cjamgo
  • 1
  • 1

4 Answers4

0

You have your body set to position: fixed, but do not specify to your #menuwrapper or #menuwrapper ul to scroll. So your body is staying in the fixed position and the rest of your HTML just flows off the page.

I havn't had a situation where I needed my body be fixed, but start off removing that and you should be able to scroll. I can't test the situation at the moment but that should be a step in the write direction. I think what you are trying to achieve is background: fixed to have your background image fixed.

C Jones
  • 231
  • 1
  • 3
0

Remove the position: fixed; and the top: 182; and left: 8; from your body.

I'm not sure you've added those, but doing this will essentially force the body to a fixed state where it won't scroll.

Axel
  • 10,732
  • 2
  • 30
  • 43
0

Changes I made (read the css comments):

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;
 }

Hope this works for you. Here is the edited snippet. 

<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>
Rob Monhemius
  • 4,822
  • 2
  • 17
  • 49
0

overflow-y: scroll; to both body and html 

html,body{overflow-y: scroll; }

answer

Community
  • 1
  • 1
Darkcoder
  • 802
  • 1
  • 9
  • 17