You are viewing our Forum Archives. To view or take place in current topics click here.
[HELP] Website doesn't have a scroll bar (HTML)
Posted:

[HELP] Website doesn't have a scroll bar (HTML)Posted:

TTG-HyPer
  • TTG Master
Status: Offline
Joined: Jun 12, 201113Year Member
Posts: 843
Reputation Power: 36
Status: Offline
Joined: Jun 12, 201113Year Member
Posts: 843
Reputation Power: 36
I've been trying to learn HTML code and I'm in the middle of making a website to practice. however I've got to the point where the page on the site has become to big for the screen but there is no scroll bar.

I've been using Div boxes for most of the site if that is any help to you.

here is a picture to show you what i mean:

[ Register or Signin to view external links. ]
#2. Posted:
Kyle93
  • Retired Staff
Status: Offline
Joined: Jun 25, 201014Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Status: Offline
Joined: Jun 25, 201014Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Can you post your html and css, then we can see if you've put something you should not off. Just to check it's not the text not being big enough. If in the div with the text put some <br /> tags, so we can check it does actual go off the page.
#3. Posted:
TTG-HyPer
  • TTG Master
Status: Offline
Joined: Jun 12, 201113Year Member
Posts: 843
Reputation Power: 36
Status: Offline
Joined: Jun 12, 201113Year Member
Posts: 843
Reputation Power: 36
not sure what <br /> tags are but i put them where i thought they should go. it does go off the page because there should be 6 paragraphs and there are only 5.

heres the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main_css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
   #Outer_Container { position:relative }
      #Inner_Container {
   position:absolute;
   top:78px;
   height:50px;
   margin-top:-5em;
   width: 500px;
   left: 1px;
}
body {
}
</style>
</head>

   

<body>



<!--Start Main_Canvas--> <div class="Main_Canvas">

<div class="Header_container">

</div>

<!--Start Main_Body-->
<div class="Main_Body_Container">

<!--Start Links_Container-->
<div class="Links_Container">

<div class="Links_1" id="Outer_Container" align="center" valign="middle">
   <p>Home   |   News   |   Portfolio   |   Contact</p>
</div>

</div>
<!--End Links_Container-->

<div class="Main_Text_Body" id="Outer_Container" style=overflow: auto;>

  <tr>
    <td>
      <br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus ante, ornare quis interdum a, facilisis id neque. Phasellus sed est sed magna egestas aliquam et sed erat. Ut elementum arcu non erat tristique tincidunt. Suspendisse ut enim sit amet risus commodo tempus ut in magna. Proin felis sem, tristique in cursus eget, lacinia ut ligula. Proin sed justo odio, sed facilisis erat. Quisque purus eros, dapibus pulvinar convallis eleifend, rhoncus sed erat. Curabitur porta magna non eros porta id semper dui sollicitudin. Maecenas tincidunt, magna in feugiat porta, nisl orci placerat neque, vel aliquam ipsum justo quis diam. Sed dignissim quam sed justo porttitor ultrices. Nullam vel pretium eros. Integer porta, metus quis eleifend egestas, arcu quam pharetra dolor, ac posuere turpis ligula quis sapien. Phasellus scelerisque bibendum aliquet. Vestibulum lacinia justo non ligula auctor varius et at enim.</p>
      <p> Fusce odio nibh, elementum eu condimentum sed, auctor sit amet tortor. Integer mauris lorem, tincidunt ac ultrices a, sodales at urna. Maecenas viverra luctus auctor. Duis vel nulla quis sem feugiat auctor. Cras rhoncus risus et nisi ullamcorper eget dignissim enim euismod. Nulla tincidunt dictum turpis id scelerisque. Maecenas mattis, neque id ultricies dignissim, dui nibh molestie lectus, semper semper enim quam in ipsum. Morbi egestas mi at erat feugiat eget sollicitudin justo varius. Suspendisse potenti. Duis sit amet elit id tortor pretium cursus quis at libero.</p>
      <p> Nulla at odio et diam tincidunt semper. Morbi libero diam, facilisis at hendrerit at, dictum quis justo. Nunc tempor rhoncus volutpat. Maecenas nisi metus, lobortis ut rhoncus eu, facilisis sagittis erat. Vivamus in tempor turpis. Fusce fringilla accumsan turpis sit amet lobortis. Fusce ut massa a massa condimentum pharetra et vitae neque. Integer eros sapien, facilisis eget venenatis at, pharetra at augue. Pellentesque et laoreet libero. Mauris vel felis turpis, id malesuada libero. Fusce vel massa eros, ut consectetur purus.</p>
      <p> Vivamus faucibus dui at lectus imperdiet hendrerit venenatis sed est. Cras imperdiet, leo non blandit malesuada, ligula diam fringilla diam, eget hendrerit eros nunc ut dui. Phasellus varius lobortis ligula eu rhoncus. Duis vel elit quis sem malesuada pharetra. Mauris libero tellus, volutpat ornare consectetur a, pretium vel orci. Phasellus bibendum placerat ligula, in porta nisl vestibulum non. Quisque vitae vehicula lacus. Aenean bibendum nunc id nulla congue fermentum. Nullam pulvinar, orci sodales sodales rutrum, purus purus ultricies urna, id vulputate magna libero id augue. Nulla sit amet ante velit.</p>
      <p> Ut ligula purus, venenatis et pretium vitae, auctor non nibh. Pellentesque sit amet quam non lacus sodales semper non eu dui. Praesent quis nulla felis, et pulvinar odio. Maecenas tortor ligula, mattis nec varius quis, blandit id mi. Suspendisse nibh enim, imperdiet in euismod at, semper id augue. Sed quam libero, ornare aliquam elementum eget, pellentesque eu lectus. Curabitur hendrerit metus ut lectus iaculis sit amet aliquam nisi porttitor. Integer blandit dignissim eros, volutpat interdum ante tincidunt sit amet. Vestibulum aliquam urna non nunc condimentum volutpat vehicula nisi semper. Aliquam elementum varius tempus. Donec fermentum augue vel mauris hendrerit sit amet porttitor massa venenatis. </p></br></td>
  </tr>
</table>

</div>

</div>
<!--End Main_Body-->

</div>
<!--End Main_Canvas-->



</body>
</html>


And the CSS code:

.Main_Canvas {
   background-position: center top;
   background-image: url(Images/Background%20image.png);
   background-repeat: no-repeat;
   height: auto;
   left: 0px;
   min-height: 100%;
   min-width: 1200px;
   position: fixed;
   top: 0px;
   width: 100%;
}
.Main_Body_Container {
   height: 1000px;
   width: 1000px;
   background-color: #CCC;
   margin: 0 auto;
   border-left-width: 2px;
   border-left-style: solid;
   border-left-color: #fff;
   border-right-width: 2px;
   border-right-style: solid;
   border-right-color: #fff;
}
.Header_container {
   height: 100px;
   width: auto;
   alignment-adjust: central;
   background-image: url(Images/Header.png);
   border-bottom-width: 2px;
   border-bottom-style: solid;
   border-bottom-color: #FFF;
}

.Links_Container {
   height: 55px;
   background-color: #FFF;
   width: 1000px;
   border-bottom-width: thick;
   border-bottom-style: solid;
   border-bottom-color: #6E6E6E;
}
.Links_1 {
   height: 50px;
   background-color: #999;
   width: 990px;
   float: left;
   border-right-width: 5px;
   border-right-style: solid;
   border-right-color: #FFF;
   font-family: Verdana, Geneva, sans-serif;
   color: #FFF;
   border-left-width: 5px;
   border-left-style: solid;
   border-left-color: #FFF;
   font-weight: normal;
}
.Main_Text_Body {
   height: auto;
   width: 85%;
   background-color: #A8A8A8;
   float: right;
   border-left-width: 2px;
   border-left-style: solid;
   border-left-color: #FFF;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 14px;
   color: #333;
   text-align: center;
}
#4. Posted:
Nic
  • Retired Staff
Status: Offline
Joined: Jun 08, 201014Year Member
Posts: 2,466
Reputation Power: 1070
Motto: I've been watching you all day.
Motto: I've been watching you all day.
Status: Offline
Joined: Jun 08, 201014Year Member
Posts: 2,466
Reputation Power: 1070
Motto: I've been watching you all day.
Remove the "position: fixed;" in your Main_Canvas class in your external css.
#5. Posted:
Kyle93
  • Winter 2021
Status: Offline
Joined: Jun 25, 201014Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
Status: Offline
Joined: Jun 25, 201014Year Member
Posts: 4,078
Reputation Power: 2628
Motto: https://www.thetechgame.com/Forums/t=7804 333/vote-for-tune-of-the-week-friday-nigh ts-lockdown-dj-sets.html
The line "position: fixed;" from main_css.css in the maincanvas class is the issue. Remove that and the scrolling issue is fixed.

However, there are many issue with your code. Firstly, you are giving divs both classes and ID's, only use one. There is a lot more in the way you are going about it. Keep trying, however there a few things you need to look at again to be able to grasp the consents. Try finishing this site, then doing it again another way, a shorter better way. Hope this helps you, it will allow you to develop your HTML skills.
#6. Posted:
TTG-HyPer
  • TTG Master
Status: Offline
Joined: Jun 12, 201113Year Member
Posts: 843
Reputation Power: 36
Status: Offline
Joined: Jun 12, 201113Year Member
Posts: 843
Reputation Power: 36
Kyle93 wrote The line "position: fixed;" from main_css.css in the maincanvas class is the issue. Remove that and the scrolling issue is fixed.

However, there are many issue with your code. Firstly, you are giving divs both classes and ID's, only use one. There is a lot more in the way you are going about it. Keep trying, however there a few things you need to look at again to be able to grasp the consents. Try finishing this site, then doing it again another way, a shorter better way. Hope this helps you, it will allow you to develop your HTML skills.


Nicascus wrote Remove the "position: fixed;" in your Main_Canvas class in your external css.


Okay, thank you. I'm not familiar with a lot of the coding as i only got fully interested in it today and started to learn it outside of school today.

Thanks again.
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.