For some reason there is an unusual border on my page. I'm unable to find the cause for it in the code:
http://danie1.me/temp/
Any idea how this can be fixed?
You have to update your <body> styles like this:
body {
color: green;
margin: 0;
padding: 0;
}
And it's generally a good idea to use some kind of CSS Reset to avoid a lot of troubleshouting in different browsers.
All elements by defauls has some style. Tag body by default has margin not 0. So
body { margin: 0px; }
Your body has extra margins. It is better to use a CSS Reset, a simple one:
* {margin: 0; padding: 0; list-style: none;}
Or just to body:
body {margin: 0; padding: 0; list-style: none;}
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 set the body to margin : 0; as well as in padding. Would you mind if I ask if I create a p element it will create their own respective padding.
Thanks I'm a newbie, trying to figure it out
Actually, it's not a Padding, it's a Margin.
Because <p> tag has a default css values which is:
/* Default CSS Values */
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
So the space between <p> tags is coming from margin-top and margin-bottom, and if you want to clear this space just add a css rule like this:
p {
margin: 0;
}
u can reset Paragraf like body.
So u can set css for paragraf.
p {
margin: 0;
padding: 0;
}
option 2
if u want reset all Tag like p, img, a, ul, li or etc. U can try Meyer Reset CSS
Thanks
Your question isn't too clear, do you mean something like this?
p {
margin: 0px;
padding: 0px;
}
You can also use inline tags. Inline tags will override all other load time styles.
<p style="margin: 0px; padding: 0px">
Hello World
</p>
I need to set a 4px space between all html internal components (in any direction top bottom left right). I am using an external css file for this. I tried this:
body {
padding: 2px;
border: 0px;
margin: 0px;
}
But this sets a space of 4px for all body not between it's components.
Also,
{
display: inline-block;
padding: 4px;
}
is not working either.
Can you please help. I am not allowed to change the html page.
You can use
body * {
margin: 2px;
}
Which will set that margin to every element inside of the body tag.
Looks like you need to set for the elements used on HTML , if you are
using Css preprocessor , then you can declare the values at the top
and later it will be used by all the elements like shown below :-
$standard-padding :2px;
$standard-border:0px;
$standard-margin:0px;
body,p,h1,h2,div,span{
padding: $standard-padding;
border: $standard-border;
margin: $standard-margin;
}
Maybe you can try padding like this:
body *{
padding:4px;
}
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
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 ).