Does anyone know why this mysterious margin is?
This is the link to my site
I have tried everything! Turning all the margins off and on and playing with padding
but i just cant find the problem why does horizontal slider bar appear?
Thanks for all help!
You have a pretty significant typo in your css:
body{
marign: 0px;
background-color: #e6e6e6;
width: 100%;
height: 100%;
}
margin is spelled incorrectly.
To eliminate some odd margins that arise, I would suggest adding this to your code:
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Usually a pretty safe bet that eliminates some unnecessary margins, and fixes your problem. I get that you have some margins all over the place, but from your post it's hard for us to understand which margins you are trying to eliminate.
use this code :
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
probably may help you
it's on fg_membersite.css line 5 :
body {
background-color: rgb(230, 230, 230);
width: 100%;
height: 100%;
}
change to this :
body {
background-color: rgb(230, 230, 230);
}
.ads {
width: 160px;
height: 600px;
background-color: orange;
float: right;
}
.content {
margin-top: 50px;
width: 100%;
height: 100%;
}
What I always do to prevent this kind of margin/padding:
* {
padding:0;
margin:0 auto;
}
It just gives every element standard 0 margin and padding, unless you change it per element of course.
Fix the "body {marign...}" typo as jdero said and your horizontal bar will be gone. You don't need to set all the margin-top, bottom etc to 0 though. Once you fix the typo you will have body {margin : 0px}. This is all you need to set them all to 0.
Related
I'm pretty newbie with HTML and CSS. So, I've got a problem with the width of 100%. It appears to go beyond the borders of the browser. Please take a look at the example below! Should I decrease the width per cents a little or is there some flaws in my code that could cause this?
I found some other posts here about the width 100%, but neither of them didn't really help me. Here's the example I made: http://jsfiddle.net/gj53jbz9/
body{
font-size: 15px;
margin: 0px;
background-color: lightgrey; }
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
#name{
padding: 5px;
font-size: 25px;
float: left; }
#navbar{
float: right;
text-align: right; }
#navbar a{
background-color: black;
display: inline-block;
width: 120px;
text-align: center;
padding: 10px 0px;
text-decoration: none;
color: lightgrey; }
#title{
clear: both;
text-align: center;
padding-top: 100px;
font-size: 45px; }
#content{
text-align: center;
width: 80%;
margin: 0px auto; }
<div id=header>
<div id=name>Name</div>
<div id=navbar>
Link1
Link2
</div>
<div id=title>Insert title here</div>
</div>
<div id=content>
<h3>Age of aggression</h3>
<p>We drink to our youth, to days come and gone. For the age of aggression is just about done. We'll drive out the Stormcloaks and restore what we own. With our blood and our steel we will take back our home.</p>
<p>Down with Ulfric! The killer of kings! On the day of your death we will drink and we'll sing. We're the children of Skyrim, and we fight all our lives. And when Sovngarde beckons, every one of us dies! But this land is ours and we'll see it wiped clean. Of the scourge that has sullied our hopes and our dreams!</p>
</div>
Thats because you have both width and padding set to one element. And by default padding is added on top of width. (Making it 100% + 2*30px of width).
#header{
padding: 30px;
width: 100%;
}
Either remove padding and add it to an inner element with no width set, or use:
box-sizing: border-box;
Which makes the width calculation include padding. :)
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Take a look at this part of your code:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey; }
This is telling the browser that the width of #header should be 100% with a padding of 30px. Since padding is not counted into the width, the actual width ends up to be 100% + 60px. So, in order to make sure this fits into the page, you need to subtract 60px (30px to the left + 30px to the right) from the 100% width and it will fit into the browser. Luckily you are easily able to do this with CSS:
#header{
padding: 30px;
width: calc(100% - 60px);
height: 250px;
background-color: grey; }
It seems to work if you remove margin: 0px; from the properties inside body {}
I don't know why it has this behaviour
Every HTML element has some default values. Please check here:
https://www.w3schools.com/cssref/css_default_values.asp
You can also try to set all elements margin and padding as 0. Just like that:
*{margin: 0; padding: 0}
By default, HTML elements calculate their sizes based on the content only, so excluding the padding, borders and margins. To change that behavior, use:
box-sizing: border-box;
This makes the calculation include the padding and borders. You can add it to any element you want, but it is a common practice to add it to all elements:
* {
box-sizing: border-box;
}
Don't give padding from left and right to your header div.
Add some margin to name and navbar div
just like this
#header {
padding: 30px 0px;
width: 100%;
height: 250px;
background-color: grey;
}
#name {
padding: 5px;
font-size: 25px;
float: left;
margin-left: 40px;
}
#navbar {
float: right;
text-align: right;
margin-right: 40px;
}
It is because padding is being summed to width 100%.
Try to use box-sizing, like that:
#header{
padding: 30px;
width: 100%;
height: 250px;
background-color: grey;
box-sizing: border-box;
}
Header.Width=100% and Header.Padding=30px are causing the problem.
You are telling the browser that the header will use the 100% of the width, PLUS a pad of 30px. So the width is 100%+30px of the space created by the padding.
Try moving the width to the body property so all the page will use the 100% of the available space. That should fix it.
left: 0px;
right: 0px;
width: auto;
position: relative;
here I'm another time with another newbie problem :S
I've tried about 2h how to set the Blue background the same height as the white background, but setting "height: 100% or height: 100vh" doesn't work.
https://jsbin.com/sideto/1/edit?html,css,output
you need to remove padding from this class
div.c1 { height: 100vh; background: #fff; margin-top: -30px; padding: 60px 30px; }
checkout this
https://jsbin.com/hekusezobi/1/edit?html,css,output
Not completely sure what you want to achieve, but as I understand it it's the padding on div.c1. Change CSS to:
div.c1 { height: 100vh; background: #fff; margin-top: -30px; padding: 0px 30px; }
Try removing div.c1 padding :
div.c1 { height: 100vh; background: #fff; margin-top: -30px; }
When you put a padding to a component, you basically say to the browser that you want some space around the content of your component. The doc may help you. ;)
I was building a static html page for creating a wordpress theme.but now i notice that 48px margin is above the body element(I found it with chrome developer tools).i can fix it by just adding a -48px margin but what exactly is causing this problem,can someone help me.
My CSS
body{
font-size:18px;
line-height:1.72222;
color:#34495e;
font-family:Ubuntu;
margin:0
}
aside {
background: #31373d;
height: 100%;
position: fixed;
width: 20%;
font-weight: normal;
color:#fff;
}
.main {
margin-left: 20%;
}
.content{
width: 65%;
max-width: 760px;
margin: 3rem auto;
}
Look at this live JSfiddle Demo - http://jsfiddle.net/aq96b/1/embedded/result/
It's the line
margin: 3rem auto;
in your .content that's causing this (if I properly understand the problem). Unchecking/removing that margin will move the content back up to the top left of your .main div.
To maintain a similar effect with the content position, you could add padding to the .main of the same amount ie
padding: 3em;
Remove the margin: 3rem auto; from .content.
DEMO HERE
It's coming from the div .content. To correct this you should add overflow:hidden to .main
Example
.main {
margin-left: 20%;
overflow: hidden;
}
Alternatively you can set .content to inline-block. This will also correct the issue.
Example
.content {
display: inline-block;
}
I've noticed how on some websites, the headers have no edges or excessive whitespace, I am trying to recreate something similar, but not really sure how to. A good example would be the top notification/search bar on stackoverflow itself.
.header
{
height: 250px;
width: 100%;
margin: 0 auto;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffa200), color-stop(100%,#d25400));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa200',endColorstr='#d25400',GradientType=0);
background: -moz-linear-gradient(top,#ffa200,#d25400);
background-image: -o-linear-gradient(#ffa200,#d25400);
overflow: hidden;
}
.header .topbar
{
height: 60px;
background-image: url(../imgz/head/hBarSBg.png);
background-repeat: repeat-x;
}
.header .topbar .mCquake
{
height: 37px;
width: 278px;
background-image: url(../imgz/head/mCqRight.png);
background-repeat: no-repeat;
float: right;
margin-right: 10px;
margin-top: 11.5px;
margin-bottom: 11.5px;
}
How exactly would I go about doing this?
Thanks. :)
You forgot to set the body margin to 0.
body {
margin: 0px;
}
You will have to reset the default paddings and margins set by the browsers
* {
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
This will also help your CSS styles to work on different browsers similarly.
Most of the people use some default css declarations to bring all browsers to the same level. One that is gaining attention recently is http://necolas.github.com/normalize.css/ -- You can also type CSS Resets on google and it will give you bunch of results :D
I inserted this code to build a thumb gallery but it messed up my left and right border of my wrapper (it disappear). You can see it here http://blog.howtodjango.com/temp/template/
below is the code that causes it.
.gallery li {
display: inline;
list-style: none;
width: 126px;
min-height: 175px;
float: left;
margin: 15px 15px 1px 15px;
text-align: center;
}
Any help would be great!
this is related to floating elements to left, add this css:
#page-wrap {
overflow: hidden;
}
#main-content {
background: none repeat scroll 0 0 white;
overflow: hidden;
padding-left: 250px;
padding-top: 5px;
}
If you wanna figure out why, read this
You need to set overflow:auto and remove the left padding on #main-content
#main-content {
background: none;
overflow: auto;
padding-top: 5px;
}
That works for me.
You need to remove an extra div tag that exists in your code. Delete one of them at the end and see if this works. Or you could be missing an open tag. Since you did not post your code I cannot figure this out.