I have read through many posts on this site and other things on the internet about centering a div.
To the left of my div there's a white space that I can't fix.
Here's the Jsfiddle
http://jsfiddle.net/ZYfaY/
So far I have tried
div#navigation-head{
background-image:url('img/head.png');
text-align: center;
width: 100%;
height: 2em;
position: fixed;
top: 0;
left:auto;
right:auto;
}
It's the default padding the browser adds to the body tag.
You can zero this out, by doing
body { margin:0; padding:0; }
Or better yet, use a reset stylesheet before your main styles, that way you're working from a consistent base-line - http://meyerweb.com/eric/tools/css/reset/
JSFiddle Demo
You need to clear the basic padding and margin from your html use this
body{margin:0;padding:0;}
Example is here http://jsfiddle.net/ZYfaY/3/
Most of the elements have default properties, product of UA's stylesheet (where UA means User Agent). If you inspect the body element, for example, you'll see that he has properties by default.
You have to reset those properties.
A good practice is including a Reset CSS.
For example:
/* Reset CSS */
body, div, section, nav, ... {
margin: 0;
padding: 0;
}
a { text-decoration: none; } /* If you will eliminate the underline for all `a` elements */
/* The rest of reset properties */
How to include a Reset CSS?
One option is "call him" in the head element:
<head>
<!-- I assume that reset.css is in *css folder* -->
<style>
#import url("css/reset.css") screen
#import url("css/style.css") screen
</style>
</head>
Or "call him" from your principal stylesheet, for example:
/* Style CSS */
#import url("reset.css") screen; /* I assume that style.css and reset.css are in the same folder */
Your problem is that in your code, your body have a margin by default and you didn't reset that default property. You have to eliminate putting:
body {
margin: 0;
padding: 0;
}
Here's a DEMO
Be good,
Leonardo
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
I have a jquery plugin, that annoyingly has this at the top of its stylesheet.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
It's causing my h1 to behave differently on this page. Is there a way to exclude certain selectors from this? Otherwise I guess I have to work out what it's applying to and list everything rather than *?
Well, quick answer is replace * for *:not(h1).
This looks like a simple attempt of a normalize. You could remove it and fix whatever is wrong on plugin's elements or simply fix your h1 to have the margin/padding it was supposed to have.
I would simply suggest you to use selector just h1 which will override the all selector(*):
h1{
box-sizing:content-box;
margin: 5px;
padding: 5px;
}
It's always better to use * selector for eg. as you may want to change #somecontent h1 but not h1 then just using #somecontent h1{...} would override the rule of * selector and even just h1 tag will be benefited from * selector.
A really nice idea would be to override * selector itself if you're not interested with the plugin css:
*{
border-box: content-box;
margin: 0; /*add your value as you wish*/
padding: 0; /*add your value as you wish*/
}
And you may also update the h1:
h1{
margin: 5px;
padding: 5px;
}
But to consider this, you must make sure that your css file is at last line of the plugin css file.
<link rel="stylesheet" type="text/css" href="plugin.css" />
<link rel="stylesheet" type="text/css" href="main.css" /> <!-- last in order--->
*:not(h1)
{
box-sizing:border-box;
margin:0;
padding:0;
}
modern browser solution
*:not(h1)
{
/* css code */
}
cross-browser compliant solution
h1{
box-sizing:none;
margin:auto;
padding:auto;
}
EDIT: removed superfluous !important flags.
This is only a partial answer but I would suggest instead using inherit for box-sizing. You can then easily reset an entire section if needed. You end up with less code utilizing box-sizing: border-box; in this way. Resetting your H1 is obvious. Just reference it explicitly to bypass your universal selector.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
With this HTML:
<div class="content">
<h1>Some Heading</h1>
</div>
Reset it with this CSS:
.content { box-sizing: content-box; }
I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:
It has like a 8px white border around it, and this is what I want it to look like:
Without the 8px white border around it.
I am using this code for it:
.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}
I can using this:
margin-left:-8px;
margin-right:-8px;
margin-top:-8px;
And put width to 102%, but then it gives me scrollbars on the bottom.
This may be confusing, but I am a beginner, and I need help.
If you can help me, I will appreciate it a lot!
Thanks.
You have to set the margin on your body to 0 like this:
body
{
margin:0;
}
Your body tag comes with margins. That is your problem.
Do:
body { margin: 0px; }
I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try
body
{
margin: 0px;
}
Hope that helps
set your html and body to:
body, html {padding: 0; margin: 0;}
This will reset all browsers and remove the border.
This will declare on the entire page not just to the Body.
* {
padding: 0;
margin: 0;
}
http://jsfiddle.net/cornelas/gwM4X/2/
User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like
body {
margin: 0;
}
Else you can also use a * universal selector like
* {
margin: 0;
padding: 0;
}
DEMO HERE
For a proper stylesheet reset, use CSS RESET STYLESHEET
I have a page with a image. I want set it top of page.
<HTML>
<HEAD>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</HEAD>
<BODY style="background-color:#3baa35;" >
<IMG border=0 src="home.PNG" ></p>
</BODY>
</HTML>
But there is one line of space between the top of the page and the body.
How to set image top of page?
Put some styles:
p { margin: 0; padding: 0; }
This is because each browser has its own default CSS values. You can use Eric Meyer's reset CSS to have the same display on all the browsers :)
Link to Reset CSS
Don't forget to put border: none; as well
IMO, your css properties are okay .
as
Margin is on the outside of block elements
We use padding for inside of block elements .
By default, images align their bottom edges with the baseline of the text.
just use to get rid from this
img { /* Or a suitable class, etc. */
vertical-align: bottom;
}
Hope it will help.
Here is a hack to your answer.
Your p tag inherits the font-size from the a tag and thus assigns the margin to a size of 1em which is the size of the letter M of the parent elemt i.e THE a tag
So if you set the font-size of a to 0 then the font-size of p will be 0 and hence the margin too.
Sounds pretty cool right? Here's a working fiddle...
FIDDLE
a{
font-size:0pt;
}
WARNING: This is just for Demo purposes and should not be used in actual working code.
Thanks in advance ! I tried float, margin, and padding nothing without any help, I wanted to be just sticked to the top corner of the background ... screen shot of the problem
http://www.mediafire.com/?6ngtuh4k5nf43r2
That space is (probably) the body's, not the element's.
body {
margin: 0;
padding: 0;
}
Hard to tell because I can't see the code inside your <body> tag in the screenshot, but almost certainly that's the issue.
Also consider to use css reset it helps with browser inconsistences.
You can use CSS reset tool to reset all the browser-default styles, for example add following rules at the top of your default css file.
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,select{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}/*address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}*/ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}
Add these to your css:
body, html {
margin: 0;
padding: 0;
}
.element {
position: absolute;
top: 0;
left:0;
}
Whenever I start a new project i always have this in my css file
*{
margin:0;
padding:0;
/* Optional Below */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
This resets the padding and margin on everything ( not:box-sizing ).