CODEWITHSUNDEEP
scrollhtml
N4t4ly4
N4t4ly4

Reputation: 41

Web Page Will Not Scroll Down?

I am making a fake website for a class at school. For some reason it won't let me scroll. Any ideas? I am a total beginner so you will have to excuse my cluelessness.

Live Site:

http://ec2-54-187-248-132.us-west-2.compute.amazonaws.com/pizzaplace/

Source:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>The Pizza Place</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>

            body{text-align: center;}
            table{margin-left:auto; margin-right:auto;}

            h1{font-style: italic;
               font-size: 450%;}
            div.title{
                position: fixed;
                top:10px;
                left:10px;
            }
            div.contents{
                background-color: red;
                position: fixed;
                top:200px;
                left:420px;
                padding:20px;
                -webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                -moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            }
        </style>
    </head>
    <body>
        <h1>The Pizza Place</h1>
        <div class="title"><img src="pizza.gif"></div>
        <div class="contents"><br><br>

            <form name="orderdetail" action="MAILTO:[email protected]" 
                  method="post" enctype="text/plain">
                <b>Name:</b><input type="text" name="Name" value="Enter Your Name" size="30" max length="30">
                <b>Phone:</b><input type="text" name="Phone" value="Enter Your Phone Number" size="30" max length="30"><br><br><br>
                <b>Size:</b> &nbsp; <input type="radio" name="size" value="S"/> Small &nbsp;&nbsp;
                <input type="radio" name="size" value="S"/> Medium &nbsp; &nbsp;
                <input type="radio" name="size" value="S"/> Large &nbsp; &nbsp;
                <input type="radio" name="size" value="S"/> Family Size &nbsp;&nbsp;
                <br><br><br>
                <b>Crust:</b> <select name="crust"><option value='Thin'>Thin Crust</option>
                    <option value="Original">Original Crust</option>
                    <option value="Stuffed Crust">Cheese Stuffed Crust</select><br><br>
                <div><b>Toppings:</b></div>
                <table>
                    <tr><td><input type="checkbox" name="toppings" value="P" checked/></td><td>Pepporoni</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="S" checked/></td><td>Sausage</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="GP" checked/></td><td>Green Peppers</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="C" checked/></td><td>Chicken</td></tr>
                    <tr><td><input type="checkbox" name="toppings" value="J" checked/></td><td>Jalapenos</td></tr>
                </table>
                <br><br><br>
                <input type="reset" value="Reset"> &nbsp;&nbsp;&nbsp;
                <input type="submit" value="Send"><br><br>
            </form>
            <br><br>
            </div>
        <br><br><br>



    </body>
</html>

Upvotes: 1

Views: 175

Answers (2)

Anjula Ranasinghe
Anjula Ranasinghe

Reputation: 584

I'm Not sure what are the things you don't want to move but you can scroll down by replacing position: fixed; with position: relative; in the style

div.contents{
            background-color: red;
            position: fixed; /*replace This*/
            top:200px;
            left:420px;
            padding:20px;
            -webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            -moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
        }

The fixed position is holding the div content down without letting them to appear. Hope This helped.

Edited code

div.contents{
                background-color: red; 
                position: relative;
                top:200px;
                left:420px;
                padding:20px;
                -webkit-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                -moz-box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
                box-shadow: 122px -30px 5px 0px rgba(224,202,56,1);
            }

Upvotes: 0

CragMonkey
CragMonkey

Reputation: 848

That's because you have all the contents fixed into place. Remove position: fixed; from div.contents in your styles.

Upvotes: 1

Related Questions