Untitled

<!DOCTYPE HTML>
     <html id="page">
     <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="stylesheet.css">
        <script src="script.js"></script>
        <script src="jquery.js"></script>
     </head>
     <body>
        <img id="backgroundimg" onload="fadeIn(backgroundimg)" src="C:UsersJessica and LarryDesktopProjectsTest Template 1imgbackground1.jpg">
        <div id="navpane">
            <ul id="options">
                <li><button id="shirtdrop"><a>Shirts</a></button></li><li><button id="shoedrop"><a>Pants</a></button></li><li><button id="pantsdrop"><a>Shoes</a></button></li>
            </ul>
        </div>
        <div id="photochanger">
                <img>
        </div>
      </body>
      </html>

header {
    width: 100%;
}

body {
    margin: 0;
    height: 100%;
}

#page {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#backgroundimg {
    display: none;
    opacity: 0.4;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#navpane {
    text-align: center;
    height: 60px;
    width: 100%;
    background: #d7dfed;
    position: absolute;
    opacity: 0.4;
    top: 0;
}

#options {
    list-style: none;
    max-width: 100%;
    margin: 0;
    padding: 0 10%;

}

#options li {
    display: inline-block;
    padding: 0 10%;
    margin: 0;
    text-align: none;
}

#options a {
    float: left;
    font-size: 30px;
    padding: 15px 0px;
}

#shirtdrop {
    background-color: inherit;
    outline: none;
    border: none;
    padding: 0;
}

#shoedrop {
    max-width: 140px;
    background-color: inherit;
    outline: none;
    border: none;
    padding: 0;
}

#pantsdrop {
    background-color: inherit;
    outline: none;
    border: none;
    padding: 0;
}

#photochanger {
    position: absolute;
    height: 20%;
    width: 70%;
    border: black;
    border-width: 1px;
    border-style: solid;
    bottom: 45%;
    left: 15%;
}