Help - Search - Members - Calendar
Full Version: Help with extra space on a web document.
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
jbyelich
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
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
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.
pandy
You are welcome. smile.gif
jbyelich
Here is the result of your help: http://www.byelich.org/acps/test/index.html

Thanks again!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.