Help needed with my HTML/CSS website - it won't scroll, but zoom out works. I've tried overflow-x and y without success. Any suggestions? Thanks in advance for your assistance.
<html>
<body>
<head>
<style>
body {
background-color: #101010;
background-image: url("file:///Users/20175040/Desktop/gabeeg/gabeegwebdesign.jpg");
background-repeat: no-repeat;
background-position: left top;
overflow-y: scroll;
overflow-x: scroll;
}
/* More CSS styles here */
Your body is currently set to a fixed position, but the problem lies in not specifying the scrolling behavior for your #menuwrapper or #menuwrapper ul elements. This causes your body to remain fixed while the rest of your content overflows off the page.
I haven't encountered a scenario where a fixed body was necessary, so my suggestion would be to remove that property and see if you can scroll properly. Although I can't test it right now, this should push you in the right direction. It seems like what you actually want is a fixed background image using the 'background: fixed' property.
Eliminate the position: fixed;, top: 182;, and left: 8; styles from your body element.
If these styles are present, they will prevent the body from scrolling normally.
These are the modifications I made based on the CSS comments:
body {
background-color: #101010;
background-image: url("file:///Users/20175040/Desktop/gabeeg/gabeegwebdesign.jpg");
background-repeat: no-repeat;
background-position: left top;
position: static /*changed position value to 'fixed' for scrolling*/
overflow: auto; /*scrollbars only appear when necessary*/
}
#menuwrapper{
height: 1500px; /*added height and color to ensure content requires scrolling*/
background-color: red;
}
I hope this adjustment meets your requirements. Here is the updated code snippet.
<html>
<body>
<head>
<style>
body {
background-color: #101010;
background-image: url("file:///Users/20175040/Desktop/gabeeg/gabeegwebdesign.jpg");
background-repeat: no-repeat;
background-position: left top;
overflow: auto;
}
#menuwrapper{
height: 1500px;
background-color: red;
}
</style>
</head>
<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet" />
<div id="menuwrapper">
<ul>
<li><a href="home.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/home.png" alt="home" width="220" height="42" /></a></li>
<li><a href="games.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/games.png" alt="games" width="220" height="42" class="games"/></a>
<ul>
<li><a href="football2104.html"><img src="file://localhost/Volumes/Macintosh%20HD/Users/20175040/Desktop/gabeeg/football2014.jpg" alt="football2014" width="318.5" height="22.5" class="football2104"/></a></li>
<li><a href="basketball.html"><img src="file://localhost/l....... (The content has been shortened)
...x/macbebg/super.gif" width="219" class="img10"></a>
<style>
.img1 {
position: fixed;
top: 230px;
left: 263px;
}
/* Additional styles for other image positions */
</style>
</body>
</html>Apply the CSS rule overflow-y: scroll; to both the body and html elements.
html,body{overflow-y: scroll; }
Currently, I am facing the challenge of fetching an object from a server and utilizing its variables in another function to render them. This specific task pertains to a React project for my school assignment. In previous iterations, I was able to retrieve ...
My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjust ...
I am experimenting with making a spinning wheel rotate as the user drags the mouse over it. The wheel consists of 3 pieces, so I have individually mapped each image to target the specific section of the wheel that I want to rotate. Currently, it is funct ...
I have been working on creating a circle using CSS, but I've run into some issues that I can't seem to fix. There are two main problems I'm facing: When viewed in Chrome: The circles shake while rotating. When viewed in Firefox: A tail ...
My MySQL code is functioning perfectly, and I have created a custom shortcode to embed the content within a post. However, I am facing an issue where the shortcode is executing below the footer. Initially, I suspected it was a problem with a plugin or them ...
I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...
I have customized a Bootstrap 5 Accordion according to the guide provided at https://getbootstrap.com/docs/5.0/components/accordion/. The default behavior rotates the arrows 180 degrees when an item is opened, changing from 'v' to '^'. ...
Currently, I am in the process of constructing a homepage that requires the display of an image alongside text, paragraphs, buttons, and icons. Here is my goal: https://i.sstatic.net/ib6Xq.png However, this is what I have managed to accomplish so far: h ...
When I specify flex-direction: column and align-items: flex-start (or any value other than the default "stretch"), which automatically assigned CSS property determines the width of the flex items? I understand that flex-basis controls the height when I se ...
My concept involves implementing a switch that alternates between displaying a bootstrap carousel and cards. Essentially, one of them will be visible when the button is pressed while the other remains invisible. Initially, I am attempting to hide my existi ...
Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...
I have successfully updated the font globally on my website by modifying the styles.scss file, but I'm facing an issue with changing the font in the header section. Here is the code snippet for updating the font: $theme-colors:( "primary": #84329 ...
I am brainstorming a strategy to optimize the loading speed of my website and would like some input on its effectiveness. My current website, built with HTML, CSS, & jQuery, performs well on desktop browsers but experiences lag on mobile browsers due to h ...
I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...
My project directory is structured as follows: root css img src login login.php dashboard basic header.php footer.php profile.php manage.php department ...
I am currently working on HTML code for an admin panel. Here is a basic structure: body {margin: 0} .adminpanel { display: flex; height: 100vh; } .leftpane { width: 250px; background-color: #0038a8; } .rightpane { width: 87%; backgrou ...
Recently, I stumbled upon the :active element in CSS. To learn more about it, I visited the Mozilla documentation page dedicated to the :active element. https://developer.mozilla.org/en-US/docs/Web/CSS/:active One of the examples they provide is as follow ...
When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...
Looking to create a div ("profilemenu") that pops out on the right side of the page triggered by a button (I'll handle this part). I want it to have a sticky attribute, but positioning has been tricky. Using position: absolute works for proper placeme ...
Utilizing the ng-class feature to include CSS classes has been a bit challenging for me. Despite reading numerous articles on the topic, I am still struggling with implementing a function call within ng-class. Below is the expression I am working with: n ...