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, 08:22 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Here. The width I've commented out below.
QUOTE .app_btns { margin: 10px 0 433px 17px; padding: 0; list-style: none; position: relative; /* width: 200%; */ } You make ul.app_btns twice as wide as the box it's in, which is div.container that is 1300px wide. So 2600px plus with margins and stuff. Wider than most screens. Also, using images for navigation, or content for that matter, with no text alternative isn't a good idea. But maybe it doesn't matter so much if it's for internal use. At least not until you get a blind pupil or staff member. Think about it. |
jbyelich |
May 9 2019, 10:15 AM
Post
#3
|
Group: Members Posts: 3 Joined: 8-May 19 Member No.: 26,893 |
Thank you kindly. I was totally overlooking that. I have made the necessary changes and it now looks exactly how I want it. I was even able to clean up the code a bit.
This post has been edited by jbyelich: May 9 2019, 10:15 AM |
pandy |
May 9 2019, 11:28 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
You are welcome.
|
jbyelich |
May 9 2019, 08:06 PM
Post
#5
|
Group: Members Posts: 3 Joined: 8-May 19 Member No.: 26,893 |
|
Lo-Fi Version | Time is now: 30th March 2024 - 02:29 AM |