Trying to create a footer in HTML, but each time I attempt it ends up with an extra margin on the left side.
Here is my current footer code:
<div id="footer"> Tester </div>
#footer {
background-image: url(images/backgroundrpatternfooter.png);
background-repeat: repeat;
position : absolute;
bottom : 0;
height : 40px;
width : 1800px;
margin: 0;
}
The issue is not with the footer div, but rather with the body itself. By default, the body element has a margin of 8px (may vary depending on the browser), so you should reset the margin to 0 like this:
body {
margin: 0;
}
Check out this working example.
Consider using the footer element instead of a div for your footer, as it was specifically added to HTML5 for that purpose!
I hope this explanation proves helpful and wish you the best of luck!
<div id="footer"> example </div>
#footer {
background-image: url(images/backgroundpatternfooter.png);
background-repeat: repeat;
position : absolute;
bottom : 0;
height : 40px;
width : 1800px;
margin: 0;
**left:0;**
}
Consider including left:0; in your code, and if the issue persists, review your inherited css rules.
Your current CSS specifies a fixed width of 1800px, however, since your element is positioned absolutely, you may need to include a margin-left or left property to determine its positioning (margin-right and right can also be used).
If you want your element to be centered, consider using
left: 50%;
to achieve this effect.
You can also try adding
left: 0;
and check if it resolves the gap issue you are experiencing.
(The gap might be due to the container element being wider than 1800 px).
Here's a little query on my mind. Is it possible to dynamically alter the content of a CSS style using PHP in this manner? <?php header("Content-type: text/css; charset: UTF-8"); $color = "red;"; ?> header { color:<?php print $co ...
I'm dynamically creating tab navigation from controllers using a list. <div class=""row> <div class="col-xl-3"> <!-- Tabs nav --> <div class="nav flex-column nav-pills nav-pills-custom" id="v-p ...
Is it possible to use AJAX to submit a form that includes a file type input? I'm attempting to achieve this using jQuery, but it seems that the file cannot be serialized during submission. Could this be a security feature implemented by the browser? A ...
Greetings! I am in need of some assistance with my coding query. I have been working on a piece of code where selecting 'x' should reveal another dropdown, which seems to be functioning correctly. However, if I navigate three dropdowns deep and t ...
My website has an issue with anchor elements appearing too frequently and not in the desired location. I need someone to help fix this so there are only two anchors displayed. After checking my code, it seems like there are not more than the specified num ...
In the example below, I have demonstrated the current behavior I am experiencing and the desired outcome. // Rotated div rotated.style.left = "50px"; rotated.style.top = "100px"; // Original "untouched" div original.style.left = "50px"; original.style.t ...
I've recently delved into front-end development, searching for solutions and hints without much success. I'm currently in the process of building my first website, specifically a "find recipes" website. Lacking knowledge of API calls, I created a ...
I have multiple data sets to display in divs with the same class name. Each div contains two inner divs. <div class="div1"> <div class="div2">Abc</div> <div class="div3"><?php echo $row['SOME VALUE']; ?>< ...
HTML: <html> <head> <body onload="document.getElementById('a').style.display='block';"> <div id="a" align="center" onclick="document.location.reload();" style="display: block; cursor: pointer;"> <img width="9 ...
I am struggling to find the xpath for a button element that says 'Cancel'. <div class="uipresk"> <button class="something" role="button" type="button"> <span class="thisthing">OK</span> </button> ...
I'm currently working on developing a method to incorporate space for error messages within my form input group component. The main objective is to prevent any displacement of elements on my forms when displaying error messages. In this scenario, it ...
I am currently developing an App and encountering issues with pushing data into an array. It seems that there is a problem in my code. Would you mind taking a look? Error Message Thrown: ionic.bundle.js:25642 TypeError: Cannot read property 'title&ap ...
Having an issue with my code in Chrome where auto play is enabled, but the video won't play. I have a loop set up to play each video one after the other, but first things first - how do I get this video to start playing? If there's a pre-made so ...
SOLVED -SORT OF--- After much frustration, I finally found a solution to my problem. By adding window.location.reload(); in my code where the submit button is, I was able to close the div successfully. // Collapse Panel on submit $("div#panel").on(' ...
While working on a website, I've incorporated a slight parallax effect that is functioning almost perfectly. However, I've noticed that the foreground divs tend to jump a little when scrolling down the page. At the top of the page, there is a di ...
I'm relatively new to the world of web development and have encountered an issue with a menu I created. The buttons in the menu have varying widths depending on the browser being used – Firefox or Chrome. In Firefox, the last button in the menu lin ...
I discovered some beautiful css styles for checkboxes that I would like to use instead of the regular ones. You can find these styles here: . Could someone guide me on how to implement this change? This is the code snippet from the form: <div class=" ...
Struggling to toggle a Bootstrap navbar on scroll? Need some guidance from the pros out there. I admit, my Bootstrap and jQuery skills are pretty basic. The browser console doesn't throw any errors, and I've experimented with fadeIn, fadeOut, add ...
Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...
Could anyone please assist me with fixing an issue I'm having with inserting data into a database from the form provided below? Unfortunately, I am unable to get it to work as expected. Here is the complete form: <html> <head> <m ...