I am very new to this community and if this question has already been answered then I apologize I couldn't seem to find it on google or here under other questions.
I am trying to make a border for the body of the page that will not leave any space on any of the sides. I used margin to move the border to the edge for top, right and left but the bottom i am having a hard time with.
heres my CSS for the body border
body {
margin: 0 0 0 0;
background-color: gray;
border: 10px outset #596779;
height: 600px;
text-align: center;
}
Related
This question already has answers here:
Removing the default 8px margin from body
(3 answers)
Closed 3 months ago.
I'm trying to put a navigation bar with links at the very top of the browser screen. This bar will stretch all the way to the top, left, and right, with zero margins outside of it. I have already set the width to "width: 100%" in the CSS for this container. I have set margin-left, margin-top, and margin-right all at -8px because it appears putting a negative pixelation in is the only way to get those margins to go all the way to the edge.
For some reason, no matter what CSS properties I set, I cannot get that right margin to go all the way to the edge. Any ideas as to what I can try to get this stubborn margin to disappear? Just for kicks, I even set the right margin to negative 500px just to see. It had no effect on it. My right margin seems to be totally inaccessible. I would say that right now there is about a 5px margin on the right side that will not go away.
Please help.
.publicnavbarwrap {
width: 100%;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
background-color: #CCC;
box-shadow: 5px 5px 5px;
#FFF;
}
body {
font-family: Quicksand, verdana;
background-color: #000000;
box-sizing: border-box;
background-image: url(../images/background.jpg);
background-size: cover;
}
<section class="publicnavbarwrap">
<div id="public_nav_bar">
Nav content
</div>
</section>
Remove the negative margins from .publicnavbarwrap and add this to the body:
body {
margin: 0;
}
Some browsers have a default margin for the body inside the user agent stylesheet
I am trying to stick my pop up to top and make it a bit smaller to fit the screen.
Here is my landing page URL - yogavoga.com/2weekdiet
Any help will be appreciated.
.modal-content {
margin: 5px auto;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
width: 90%;
}
I'm not sure if this solves your question in full, because your sample code is a bit short and it doesn't show the element itself. I tried visiting your website, but can't find the element. So it is very difficult for us to say what you actually want.
margin is the space around your div element, in this case your modal. With your code you say your browser to put your element at the top, (0 margin at the top), and do the rest automatically. It does that and will center your element based on the width of your element.
You can scale your element with width. Make it smaller by reducing the percentage.
.modal-content {
margin: 0 auto; // 0 from top, left, bottom and right auto.
background-color: #fefefe;
border: 1px solid #888;
border-width: 3px;
width: 60%; // Width of your element.
}
TIP: remove the margin and padding presets from your body to have your element at the absolute browser border.
So I have a problem with empty space at bottom of the website. Here is website: click
Repo of website: https://github.com/bdevelops/feditor
I read questions on stack, tried to find solution, but nothing works.
Sorry for bad English, if it is.
In your CSS class .box is margin-top:30px or height:100%. This is what makes white space at the bottom of your website
box {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
height: 100%; **//Set it to "auto"
margin-top: 30px; **//or this one, change it to 0px or remove**
overflow: hidden;
width: 100%;
}
like many others looking for CSS height solutions, I've had this issue on and off throughout the years. A simple jsfiddle is worth a thousand words:
http://jsfiddle.net/7dcjn/1/
I understand how to use height: 100% on the html and body to achieve partially what I would like to do. I also just found out about the CSS3 box-sizing property, which again, fixes some of the issues.
However, I still have the issue where if you have a top header div1 that is 50px in height, then have a div2 below that with 100% height, the browser makes the div2 100% of the viewport height which then of course makes div2 run outside the body. See the jsfiddle above or code below.
<div id="MainBody">
<div id="TopHeader">My Top Header</div>
<div id="ContentWrapper">
How does one get this blue box to extend only to the bottom of the viewport/browser window? In other words, the blue border needs to extend right up to the green box.
</div>
</div>
html, body {margin: 0; padding: 0; border: 2px solid #00CC00;}
html, body, #MainBody, #ContentWrapper {height: 100%; min-height: 100%; box-sizing:border-box; -moz-box-sizing:border-box;}
#MainBody {margin: 0; padding: 0; border: 2px solid #CC0000;}
#TopHeader {height: 50px; background-color: #303030; padding: 10px; color: #FFFFFF;}
#ContentWrapper {margin: 0; padding: 20px 20px 0 20px; margin: 10px 10px 0 10px; border: 2px solid #0000CC;}
Any suggestions? Thanks!
I think this is the closest you'll get to actually fitting the box to the remaining space, that is to have the box fill the whole space and float the header over top of it so that the content gets pushed out of the way.
This is a better solution than calc() because the size of the header does not need to be set in order for this to work.
So you need to make a few modifications, TopHeader needs to be float:left;width:100%; and the margins on the ContentWrapper need to be changed so that it doesn't get pushed off of the bottom.
See my JSfiddle
To adjust the spacing below the header for when the content starts you need to adjust hte bottom margin on TopHeader
Here's an Example
Here's your solution bro:
The first styling of the css of the "contentWrapper" was false.
http://jsfiddle.net/xbV9A/
I am trying to use a shape (made with CSS), and have it placed up against the top of the HTML page. Please see the image below for an example. I want the gray rectangle to be at the top of the HTML page with no gap on the top, right, or left sides. I'm terribly new to CSS and HTML so sorry if this is a trivial question. I am only using CSS 3 and HTML 5, maybe a little JavaScript later.
What I want... (notice there is not gap above the gray rectangle)
What I have now... (notice the white gap above the gray rectangle)
Here is my CSS code:
#header {
margin: auto;
width: 1050;
height: 120px;
background: rgb(45,45,45);
}
Try removing the padding and margin from the body.
body {
margin: 0;
padding: 0;
}
Not knowing the rest of your code this is a long shot, but try this:
body {margin:0; padding:0}
#header {
margin:0 auto;
width: 1050;
height: 120px;
background: rgb(45,45,45);
}