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

Reveal/Conceal footer upon vertical scrolling

I am attempting to achieve the following goals: Display the div element when the scrolling position is greater than 20 Apply a fadeOut effect after a certain delay Prevent the fadeOut effect when hovering over the sticky footer This is my implementation ...

Unlocking fashion with $refs: A step-by-step guide

After using console.log(this.$refs['block' + row + column]);, I confirmed that I can successfully access the HTML element it refers to. https://i.stack.imgur.com/7KYqB.png However, when attempting to access the element's style using variou ...

Expanding DIV to cover entire width of screen

Allow me to explain my current predicament: In the following code snippet, I have a simple div element. However, upon running the code, I am presented with a gray box that does not span across the entire browser window as I had intended. Instead, it appea ...

jquery is in motion while svg paths are at a standstill, waiting to

i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...

PHP code in Wordpress incorporating an Ajax request

Does anyone know how to fetch user data as a string using ajax in WordPress? I think I understand the basic concept PHP This code goes in my functions.php file add_action('template_redirect', 'edit_user_concept'); function edit ...

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

Visual Delights on the Menu

I am having trouble adding a "Home" picture to my menu. It keeps showing up as a blank square, even though I have tried using both .png and .jpg formats. Here is the code that I am currently using: <div id='cssmenu'> <link rel= ...

DIV height adds a layer of design to a website, making it visually

I have a situation where one of my web pages contains a DIV element with text inside, set at 1.1em size. Here's an example: <div id="displaydiv"> <b>Hello World</b> </div> On another page, I have the same DIV element but ...

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

Guide on incorporating the Chain Pattern alongside the Self Revealing Module Pattern within JavaScript

I have come across the following code snippet: filtersManager = (function ($) { var that = this; function initialize() { // some tasks return that; }; function execute() { // some tasks return that; ...

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

Incorporate extra padding for raised text on canvas

I have a project in progress where I am working on implementing live text engraving on a bracelet using a canvas overlay. Here is the link to my code snippet: var first = true; startIt(); function startIt() { const canvasDiv = document.getElement ...

Submitting data through a PHP server-side script

I am facing a dilemma regarding why the form is not submitting and directing me to the index.php page. Being new to PHP, I am attempting to utilize the User object. Below is my current progress: <main> <header> <h1>Cr ...

PHP code containing an if/else statement that performs form validation and validates the entered date of birth

Currently, I am practicing my PHP skills with if and else statements as well as form validation. The main concept I am working on involves the following: Upon entering a name, Date of Birth (DOB), and email, and then clicking the submit button, the action ...

Preventing page refresh when typing in a form input: Tips and tricks

I'm currently puzzled by a small issue. In my web application, I have a chat box that consists of an input[type='text'] field and a button. My goal is to send the message to the server and clear the input field whenever the user clicks the b ...

Generating various fields within a single row

I am in the process of creating a dynamic form that should generate two new fields in the same line when the user clicks on the plus icon. Currently, the code I have only creates a single field. I attempted to duplicate the code within the function, but i ...

Discover the elusive tag that holds the specified text

My code snippet in HTML looks like this: <body> <div class="afds"> <span class="dfsdf">mytext</span> </div> <div class="sdf dzf"> <h1>some random text</h1> ...

Tips for organizing dynamic table data following an append operation

Hey there! I'm currently working on a project involving sorting students after applying filters. Once the students have been filtered, I need to append classes and text to buttons as shown in the image below: https://i.stack.imgur.com/c9Mtm.png The HT ...

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...