My site is https://ized.online
I have tried setting the margin and padding of h1 and my divs to 0px in my CSS, but the border remains, and it seems like its either my main container div or the CSS properties of or , as inspecting the element links back to both of them in a non-descriptive form, and similarly trying to set margin or padding to 0 gives no result.
What would you suggest to remove the white boarder surrounding my page?
Each browser has its own set of preset css rules, on divs, body, etc. try using something like https://github.com/csstools/sanitize.css which removes them, or simply use
body{ margin: 0 }
It seems you need to remove default margins from the body: body{margin:0;}
In css you can see
border: (px style color)
And that should solve the issue if you delete that settings.
Also, border: none on the element should be an option, but probably you missed the border settings.
Bellow is CSS you need. I suggest you to look up how position: absolute works with properties top, bottom, left, right.
.text2 {
position: absolute;
z-index: 1;
bottom: 0;
color: grey;
}
body {
margin: 0;
}
Related
I'm building a personal website and have sections that I want to split with hr tags. However, I keep getting this weird spacing when I use the tag.
(the yellow is one section, and the purple is another, the green is the color of the background of the page)
I'm trying to fix it by changing margins, paddings, etc, but nothing seems to work, any ideas?
hr {
padding: 0px;
height: 1px;
border: none;
}
You should be able to get that by setting the margin to 0:
hr {
margin: 0;
}
https://jsfiddle.net/5m5wad4r/
If that's not working, maybe the sections themselves have margins, and it's not the hr?
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
I'm trying to create a div header that extends the entire length of the page, but I keep getting a small white outer border on all divs so that the entire page has a thin white border around the outside. I'd like for the divs to extend to the very edge.
I've tried a few different css options but none seemed to have worked. E.G (Not all at once)
div
{
padding:0;
margin:0;
border:0;
margin: 0px auto 0px auto;
}
That sounds like the default margin/padding on the body. Some browsers uses margin, some (Opera) uses padding, so set both:
body { margin: 0; padding: 0; }
In general, you should be using some form of css reset or normalization. I'd check out this one, because it's by the master genius of css resets himself, Paul Irish.
This is the code I am working with:
http://jsfiddle.net/BTYA7/
I can't work out why the toolbar (blue) is extending past the right side of the text box. There doesnt seem to be any padding or margin a miss.
I applied it in blue and pink to help show it:
.uEditorToolbar {background-color: blue;}
Can anyone give some guidance please?
The uEditorToolbar has two extra pixels of padding. width:100% sets the width not including padding. If need the padding, you can remove the width:100%, and the blue bar doesn't extend too far.
Is that what you need, or am I missing something.
The default layout style as specified by the CSS standard means that the width and height properties are measured including only the content, but not the border, margin, or padding. So the combination of width:100% and padding: 0 0 0 2px; is pushing the content out by 2px.
The default display for <ul> is block so the width:100% is probably unnecessary anyway.
If you remove the width:100% or the padding-left will fix the problem.
Alternatively, the CSS3 box-sizing property can be used to correct the layout by using box-sizing: border-box; (if all browsers you are targeting support the property).
There appears to be a 2px padding. If I remove the padding then it looks ok.
.uEditor .uEditorToolbar
{
list-style: none;
width: 100%;
height: 48px;
margin: 0;
padding: 0 0 0 2px;
}
http://jsfiddle.net/BTYA7/5/
Remove width:100%; padding: 2px; from the .uEditor .uEditorToolbar CSS class. It will work.
I would like to position my footer at about 20 - 30px, or a percentage, from the bottom of the screen. From looking at the elements with * {outline: solid 1px} there is a rectangle along the bottom of the screen which must be either the html element or mark the bottom boundary of the body. I'm a little hazy on positioning elements and despite having played around with varius positioning options cannot get the footer where I want it. What is the best practice here? How should I position the footer?
If you want it at the bottom (+30px) of the document
footer{
position:absolute;
bottom:30px;
}
if you want it at the bottom of the document, you would need javascript to calculate the window's height
and do something like (in jquery)
$('footer').css({'position':'fixed','top':$(window).height()-$('footer').height()});
or with only CSS you can also do:
.footer{
position:fixed;
height:2%;
top:98%;
}
Without seeing any of your code, it's hard to imagine why things aren't working for you. But my first guess is that you haven't styled the body element properly. By default, many modern browsers apply some sort of padding or margin to the body. As such, you should use the following rule to reset it:
body { margin: 0; padding: 0; }
This will reset the defaults, allowing you to proceed as you like. You could also use the position: fixed CSS rule for the element you want fixed to the bottom of the screen. Example:
#footer { position: fixed; bottom: 0; height: 30px; }