div outer borders - html

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.

Related

Removing unwanted white boarder surrounding full page

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;
}

hr tag causing margin between two sections

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?

Maximize the spaces

I'm trying to remove the white spaces. I've research and finaly remove the white spaces on .side and .main but i cant remove the white space on top and below(when zoomed out).
Here's my FIDDLE. I appreciate any help.
What i want is (see image below). I'm tyring to create it like that, even when zoomed out there's no white space.
The another solution is to add this to .top and doesn't affect the other elements (That means, other elements' padding and margin will keep the same):
margin:0px;
display:inline-block;
Please notice that only add it to .top. Do not do this:
* {
margin:0px;
padding:0px;
}
Because it will also affect other elements.
Ok, take a look at this: http://jsfiddle.net/EH83H/
I've added a few things like
* {
margin: 0;
padding: 0;
}
to remove paddings and margins by default, i've added a position fixed to the container, and height: 100% to the main and left divs. Also main and left divs have a container div named bottom

What is the reason of padding / margin?

I have been impementing a web page in HTML and I have came across a weird problem.
http://jsfiddle.net/SntpD/3/
#menuh
{
width:100%;
padding-top:10px;
padding-bottom:10px;
float:left;
font-family:arial, tahoma;
text-align:left;
padding-left:12%;
background:#c1188d;
}
I can't see anything here which should introduce the white margin on the left side.
The magenta belt for drop-down menu is supposed to be aligned strictly to left (in my opinion) but it is not. (left side should be like it's right side is to right edge.)
Could somebody tell me what is the distance between edge of browser and magenta div (#menuh) ?
There are default styles imposed by many browsers. In my case (Chrome/Mac), the body element has a margin imposed on it of 8px. You can use the following rule (put it at the top of your css) to remove all margin/padding on elements by default:
* { margin: 0; padding: 0 }
Or you can just remove the margin/padding on the body element. I prefer the wildcard method, since it keeps the same issue from coming up later with other browser defaults.
JSFiddle (and most browsers) give the <body> tag a default padding, which is the white space you're seeing. Set
body {
padding: 0;
}
and your problem goes away. The padding in your JSFiddle (for me on Chrome/Win8 at least) is 8px.
To catch all situations (browsers have different default styles), apply a 0 padding and margin to both <body> and <html>:
html, body {
padding: 0;
margin: 0;
}
Default padding is the issue. Most all browsers have it, so even outside of jsfiddle, you may encounter it.
Best thing to do is use a CSS reset stylesheet. Creates proper padding and margin reset for most of the elements you will use in your web page. Here are some examples:
http://yuilibrary.com/yui/docs/cssreset/
http://meyerweb.com/eric/tools/css/reset/
http://www.cssreset.com/
http://html5reset.org/
http://necolas.github.io/normalize.css/

CSS HTML issue - Toolbar extends too far

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.