I've managed to get my CSS looking just the way I want it on my 1366x768 laptop screen, with the element centered at the bottom of the page. However, when I switch to a larger screen, the footer moves to a different position higher up on the page.
Any suggestions on how to solve this issue?
position:relative;
width:900px;
height:70px;
background-color:#0CF;
margin-top:38%;
right:25%;
left:50%;
margin-left:-450px;
Here's the reason behind this:
margin-top:38%;
When you set the margin-top to 38%, it will result in the footer appearing at a different position on screens with varied heights. This is assuming that the footer is positioned relative to the body and not another element with its own positioning. In your situation, it seems likely that the footer is related to the body.
If you change the positioning to absolute and provide a bottom value, the footer will stay fixed at the bottom of the screen regardless of screen height.
position:absolute;
width:900px;
height:70px;
background-color:#0CF;
bottom:0;
right:25%;
left:50%;
margin-left:-450px;
To center the element with the width you already have, use the following CSS:
position: absolute;
margin-right: auto;
margin-left: auto;
Now to position it at the bottom of the screen, add this line:
bottom: 0;
You can then remove the left, right, and margin-top properties.
[edit] After making these changes, your final CSS should look like this:
position: absolute;
width: 900px;
height: 70px;
background-color: #0CF;
margin-left: auto;
margin-right: auto;
bottom: 0;
I am currently utilizing the DataTables plugin to enhance my HTML table. While I have managed to successfully implement most functionalities, I am facing a challenge with the boolean column. This particular column consists of icons representing X (value 0) ...
Hey there, I have a form that captures Name, Email, Subject, Telephone Number, Message, and a checkbox. Unfortunately, I'm not very proficient in PHP. I've just started learning the basics and could use some guidance from you :) The Form < ...
On my current web project, I am aiming for an immediate impact with a full-screen image that transitions to reveal text and information when the user starts scrolling. The challenge lies in ensuring this effect is consistent across various screen resolutio ...
Important: I haven't been able to find a relevant solution in similar questions. How can I extract prices from Udemy using web scraping? Scraping Data From Udemy's AngularJs Site Using PHP How do I obtain promotional prices using the Udemy API ...
Applying rounded corners to my list navigation elements using CSS. These elements also have a border. Here's how it currently appears: The quality of the rounded corner and border combination looks off, with some white shining through. Any suggesti ...
https://testing007.s3-api.us-geo.objectstorage.softlayer.net/1A23CDC6F75811E6BFD706E21CB7534C---prof__6.jpg This link displays correctly on browsers like Chrome and Firefox, but does not show up on Safari. ...
First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...
http://www.example.com/css/tryit.asp?filename=trycss_dropdown_navbar The link provided above showcases the practice background of a certain website. In the code on the left side, specifically under the style section, there is a "ul" element where the "ove ...
Is there a way to align buttons under a variable piece of text in Bootstrap 3? Currently, when the code example is viewed in full screen, the three buttons do not align horizontally. Current Behavior: https://i.sstatic.net/lEQ7o.png My goal is to have t ...
I am having trouble with changing the cell color of an object in my html table if a certain variable changeColor is true. I am utilizing angular for this task. <tr ng-repeat="list in results"> <% if (!{{list.changeColor}} ) %> <% { ...
While using IcoMoon icons on my website, I have noticed that they function perfectly in all modern browsers except for Internet Explorer 7, where they do not display at all. In Internet Explorer 8, the icons show up as small boxes instead. The CSS code I a ...
Although I am not a programmer, I managed to get this code to work, which sends an email with all the values. However, I am facing an issue where the checkbox values appear blank in the email even when they are checked. Any assistance would be greatly appr ...
Greetings and well wishes during this unique period we're currently experiencing! Can anyone share how to position a button over an image (located here)? I am utilizing Visual Studio, Jekyll, and Github. After attempting to copy and paste the exact ...
I am looking to position the main contents (content 1 and content 2) in between two side menus on my exercise page. At the moment, the main contents are overlapping with the two menus. Can someone guide me on how to fix this alignment issue? Thank you. ...
After searching through the questions here, I couldn't find a solution. As someone new to PHP and jQuery, I appreciate your patience as I explain my issue. My goal is to send an ajax request using jQuery to a script that runs a mysql query on data fr ...
Within my program, there exists a text element that appears in two distinct sections: section A and section B (in the form of a popup). My intention was to create one object using CSS that could be utilized in both areas. By doing so, I would be able to em ...
Struggling to get rid of the bullets displayed on an unordered list using Bootstrap. I attempted utilizing the "text-decoration-none" class without success. ...
Problem with updating string in Language File: COM_OHANAH_CONFIGURATION="Ohanah Konfiguration" I have tried adding the above string to the Language File, but it doesn't seem to reflect the changes. I have checked other Joomla Components and they all ...
My goal is to center the title in the middle of the page, taking into account its alignment with the search bar. However, I want it to be centered independently and not affected by the search bar's position. Is there a way to achieve this? To better ...
Does anyone know how to create a dynamic table in HTML with unique ng-models for each cell? I've tried the following code, but I'm struggling to figure out how to add ng-model. <!DOCTYPE html> <html> <head> <style> table, ...