I'm having trouble getting my HTML to scroll properly

Apologies for asking a common question, but I'm facing a specific issue with scrolling that I can't seem to figure out. Below is the code snippet:

* {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  font-size: 40px;
}
<div style="padding:20px;background-color:#000033;height:1500px;">
  <div id='stars'></div>
  <div id='stars2'></div>
  <div id='stars3'></div>
  <p style="color: #FFFFFF";><b>TITLE1</b></p>
  <p style="color: #FFFFFF";> PARAGRAPH </p>
  <p style="color: #FFFFFF";><sub>SUBPARAGRAPH</sub>
    <p style="color: #FFFFFF";><sub><sub><sub><sub>V0.81</sub></sub>
      </sub>
    </p>
    <IMG height="1080" width="1920" SRC="bricks.png"><br>
    <IMG height="1080" width="1920" SRC="pink.png"><br>
    <IMG height="1080" width="1920" SRC="black.jpg"><br>

</div>

This code might be messy. Any suggestions on cleaning it up would be helpful. Also, the CSS file stars.css (http://pastebin.com/nSiiUy1d) is quite extensive.

This is for my personal website, I just need the scrolling functionality to work.

Answer №1

To enable scrolling, it is suggested to eliminate the 1500px height from the div. Furthermore, it is advisable to avoid utilizing fixed dimensions in your style attribute; instead, consider using percentages or even implementing "max-width" to set restrictions.

Answer №2

For those looking to improve their tidying skills, I suggest delving into the world of indentation. You can check out this informative article on the topic here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Header rows in the table remain in place, however, the borders shift when viewed on Chrome and do not display at all on Firefox

I'm having trouble with the borders on my header table. In Chrome, the top border disappears when I scroll down, and in Firefox, it simply doesn't appear. You can see the issue here https://codepen.io/anon/pen/zyEwZq#anon-login Check it out on ...

Is there a way to determine if a browser is operating in compatibility mode?

Is there a way to determine if the browser is in compatibility mode or not? I need to apply different CSS depending on the mode. ...

Full-screen background with image adhering perfectly - left-aligned button that stays in place

Excuse me if my question seems basic, as I am just starting out in front-end development and may not know all the necessary terms to fully understand existing questions. I currently have a simple html file that consists of a title and three buttons, with ...

Switching hover behavior on dropdown menu for mobile and desktop devices

I have implemented a basic JavaScript function that dynamically changes HTML content based on the width of the browser window. When in mobile view, it removes the attribute data-hover, and when in desktop view, it adds the attribute back. The functionalit ...

The function setCustomValidity() will continue to display even after the form has been successfully filled out

My form is very simple and I am trying to validate it using the required attribute: <form name="form"> <label for="Header">Title</label> <input type="text" class="span5" name="Header" ng-model="Message.header" placeholder="Title" on ...

Establishing space between table rows

I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...

How to use JQuery to parse an external JSON file with array elements in Javascript

My goal is to extract information from an external JSON file using JavaScript, specifically an array and other elements. The JSON file I am working with is called 'TotalUsers.json' {"@version":"1.0", "@generatedDate":"12/20/10 5:24 PM", "day":[{ ...

Analyzing data visualization within CSS styling

I have the desire to create something similar to this, but I am unsure of where to start. Although I have a concept in mind, I am struggling to make it functional and visually appealing. <div id="data"> <div id="men" class="shape"></di ...

Align Divs Horizontally to Center

I'm trying to find a way to horizontally center multiple DIVs in a straight line. Here's how my code currently looks: HTML: <div id="circle"> <div id="circle1"></div> <div id="circle2"></div> </div> CSS ...

In order to avoid conflicts, please update the version code of your APK as there is currently one with version code 1. How can I go about changing the version?

My attempt to upload an apk file on Google Play has hit a roadblock. The apk file was created using Unity3D. Google Play is giving me an error message stating that I need to use a different version code for my APK because a version with code 1 already exis ...

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

Determine the overall sum of all items

Utilizing data fetched from my SQLite database, I'm utilizing *ngFor to display a comprehensive list of items with their respective names, prices, amounts, and totals. How can I calculate the grand total and display it at the bottom of the list? chec ...

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

Tips for collapsing or expanding a single button in Angular 6

I want to create rows of collapsible buttons in my code, but every time I visit the page, all the buttons are already expanded. Additionally, when I click on any button, they all expand or collapse simultaneously. HTML <div id="accordion" *ngFor="let ...

How to manipulate iframe elements using jQuery or JavaScript

Hey there, I have a simple task at hand: I have a webpage running in an iFrame (located in the same folder on my local machine - no need to run it from a server) I am looking to use JavaScript to access elements within this iFrame from the main page. How ...

How to Restrict the Number of Rows Displayed in an Angular 4 Table

Currently, I am faced with a situation where I have a lengthy list of entries that I need to loop through and add a row to a table for each entry. With about 2000 entries, the rendering process is slowing down considerably. Is there a way to limit the disp ...

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

What is the best way to enable my search function to filter out specific items from a table?

Currently, I have created a table populated with data fetched from a JSON file. Now, my focus is on implementing a search functionality that filters out items based on user input and displays only those table rows matching the search criteria. The code sni ...

Exploring Alternative Methods to Navigate Through Elements Using JQuery UI Autocomplete

After testing two different approaches: <div id = "team-search-container"> <label for="team-search" class = "text-center"> <input type = "text" id = "team-search"> </label> </div> With the following code sni ...