Help with extra space on a web document. |
Help with extra space on a web document. |
jbyelich |
May 8 2019, 07:36 AM
Post
#1
|
Group: Members Posts: 3 Joined: 8-May 19 Member No.: 26,893 |
Hello all,
I have started creating a 'web portal', as I would call it for an elementary school that children can more easily access all of their web applications on a Chromebook. I have it looking exactly how I like it, but for some reason there is this large area to the right of the document where it can scroll to. You can see what I mean by viewing the page here: http://www.byelich.org/acps/test/index.html How do I get rid of this, I am fairly new at CSS. Thank you, J Here is the HTML of the document: CODE <!DOCTYPE HTML> <html> <head> <title>ACPS Elementary Chromebook Portal</title> <meta content="ACPS Elementary Chromebook Portal" name="description"> <meta content="" name="keywords"> <meta content="TRUE" name="MSSmartTagsPreventParsing"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> <header> </header> <div class="container"> <!--start application buttons--> <ul class="app_btns"> <li> <a href="http://go.imaginelearning.com"><div id="kinder"></div></a> </li> <li> <a href="https://hosted35.renlearn.com/32112/"><div id="first"></div></a> </li> <li><a href="https://www.reflexmath.com/"><div id="second"></div></a> </li> </ul> <!--end application buttons--> </div> <div class="footer"> <footer> <center>Copyright 2019 ACPS</center> </footer> </div> </body> </html> Here is the CSS of the document: [code] html { background-color: rgb(0, 124, 255); font-family: verdana, sans-serif; font-size: 12px; color: rgb(255 255 255); } body { background-color: rgb(255, 255, 255); margin: auto; width: 1300px; } a { outline: none; } img { border-style: none; } /*Main Header*/ header { height: 240px; width: 1300px; background-image: url(../images/aes_header.gif); /*! float: left; */ } /*Main Header*/ /*Application Button Grid*/ .container { height: 420px; width: 1300px; background: rgb(255,255,255); float: left; } .app_btns { margin: 10px 0 433px 17px; padding: 0; list-style: none; position: relative; width: 200%; } .app_btns li { position: relative; float: left; overflow: hidden; width: 16.6666667%; /* Fallback */ width: -webkit-calc(100% / 6); width: calc(100% / 6); } .app_btns li a, .app_btns li a img { display: block; width: 100%; cursor: pointer; } .app_btns li a img { max-width: 100%; } /*Application Button Grid*/ /*Application Buttons - Hover*/ #kinder { background-image: url('../images/k.gif'); height: 400px; width: 400px; } #kinder:hover { background-image: url('../images/k_dn.gif'); } #first { background-image: url('../images/1.gif'); height: 400px; width: 400px; } #first:hover { background-image: url('../images/1_dn.gif'); } #second { background-image: url('../images/2.gif'); height: 400px; width: 400px; } #second:hover { background-image: url('../images/2_dn.gif'); } #renplace:hover { background-image: url('../images/rp_dn.png'); } /*Application Buttons - Hover*/ /*Footer*/ .footer { width: 1300px; float: left; } footer { text-align: center; vertical-align: middle; line-height: 90px; } [code] |
pandy |
May 9 2019, 11:28 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
You are welcome.
|
jbyelich |
May 9 2019, 08:06 PM
Post
#3
|
Group: Members Posts: 3 Joined: 8-May 19 Member No.: 26,893 |
|
Lo-Fi Version | Time is now: 26th April 2024 - 09:13 AM |