The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post May 9 2019, 08:22 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,276
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jbyelich
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 9 2019, 11:28 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,276
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 #5





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

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

 



- Lo-Fi Version Time is now: 20th June 2019 - 04:41 PM