The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Help with extra space on a web document.
jbyelich
post 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]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
pandy
post May 9 2019, 11:28 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You are welcome. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jbyelich
post May 9 2019, 08:06 PM
Post #3





Group: Members
Posts: 3
Joined: 8-May 19
Member No.: 26,893



Here is the result of your help: http://www.byelich.org/acps/test/index.html

Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 09:22 PM