After scouring numerous sources on the web, I have found various tips for centering a div.
However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve.
If you're curious, here's the Jsfiddle link: http://jsfiddle.net/ZYfaY/
Here are some of the things I've attempted:
div#navigation-head{
background-image:url('img/head.png');
text-align: center;
width: 100%;
height: 2em;
position: fixed;
top: 0;
left:auto;
right:auto;
}
That annoying extra space you see around your webpage is actually the default padding added by the browser to the body tag.
To get rid of this pesky padding, simply add the following CSS:
body { margin: 0; padding: 0; }
For a more comprehensive solution, consider using a reset stylesheet before applying your main styles. This will ensure you start with a clean slate and avoid any unexpected spacing issues - check out Eric Meyer's reset stylesheet here:
Want to see it in action? Check out this JSFiddle demo: JSFiddle Demo
To eliminate any default padding and margin in your HTML, add the following code:
body{margin:0;padding:0;}
See an example here.
Many of the elements come with default styles, which are set by the User Agent's stylesheet (referred to as UA). When you inspect the body element, you will notice that it already has default properties.
It is important to reset these default properties.
A common practice is to use a Reset CSS file.
For example:
/* Reset CSS */
body, div, section, nav, ... {
margin: 0;
padding: 0;
}
a { text-decoration: none; } /* To remove underlines from all `a` elements */
/* Other reset properties */
How can we use a Reset CSS?
One way is to include it in the head element:
<head>
<!-- Assuming that reset.css is in the *css folder* -->
<style>
@import url("css/reset.css") screen
@import url("css/style.css") screen
</style>
</head>
Another option is to reference it from your main stylesheet, like so:
/* Style CSS */
@import url("reset.css") screen; /* Assuming style.css and reset.css are in the same folder */
The issue you may be facing in your code is that the body element has a default margin, which you need to reset by adding:
body {
margin: 0;
padding: 0;
}
Here's a DEMO
Best regards, Leonardo
Many individuals opt for: document.getElementsByTagName('script')[0].style While others prefer: document.body.style. Are there any notable differences between the two methods? EDIT: Here's an example using the first option: ...
Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...
I'm facing an issue with my code. When I try to run it, I encounter the following error: 404 (Not Found) while using the get method. Here is my html code snippet. <html> <head> <title>Issue</title> <meta charset= ...
Hello fellow developers, I am currently working on creating a dynamic tablerow that allows users to fill in input fields and select options from a list for each cell. While the input fields are functioning properly, I am facing an issue with displaying th ...
Can anyone help me figure out why images are opening in a new window instead of downloading inside Chrome and Firefox on my iPhone? ...
I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...
I am currently in the process of developing a Q&A website inspired by Stack Overflow. However, I have encountered an issue where when I try to mark an answer as accepted, it ends up marking every answer as accepted. My goal is to allow users to only ma ...
I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation: HTML: ...
I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...
Is it possible to use a mat-accordion with radio buttons where each panel expands only when its corresponding radio button is selected? I have the radio buttons functioning correctly, but the panels are expanding and collapsing with every click rather than ...
I'm currently working with React and material-ui in order to achieve my goal of displaying a grid container that is populated by an array from an external JavaScript file. The challenge I am facing is getting the grid to show 3 items per row, as it is ...
My experience with angular 4 is fairly new and I've recently delved into using the angular multiselect feature with the npm package available here. I've managed to successfully configure it, as well as capture selected and deselected items/event ...
In the world of html/javascript, the order of execution is typically serial, meaning that the browser reads the code line by line and interprets it accordingly. This is a common practice in most programming languages. Some javascript programmers prefer to ...
Currently, I'm dealing with web scraping where one of the websites presents a 'Accept cookies' button within a shadow root. To address this issue, I sought assistance on how to click this button in discussions found here: Click on accept co ...
My goal is to create a layout with 4 blocks, where the first section contains 2 blocks each occupying 50% of the width, followed by 2 other blocks in the next section. I am utilizing the flex property for this layout. I want the flex-container to take up ...
I have created two different sections with distinct backgrounds. However, I am facing an issue where these two divs are not appearing on the webpage. My intention is to position the Navbar at the top and have another section below it that is not linked to ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container">Lorem ipsum</div&g ...
Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...
I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...
I am encountering an issue with my ASP.NET MVC project where I am attempting to call a JavaScript function to record a user's selection from a listbox. Despite duplicating the JavaScript function in multiple places, it is still not being found. What c ...