Just building a website and I want to do something I haven't come across yet. When the top of the site has no margin but the main content does have, same as the top of this site.
Can someone point me in the right direction?
currently I have given it:
<div id="header"><h1>Header</h1></div>
Just a bit stuck.
The body and/or html element will have margin and/or padding by default (the exact values depend on the browser).
If you remove them, then any div (if you don't apply CSS that restricts the width) that is a child of the body will then fill the width of the window.
html, body {
margin: 0;
padding: 0;
}
You can then set a margin on the main content.
#main_content {
margin: 5px 10%;
}
If I understand your question correctly this is what you need to do in css:
body {
margin:0px;
padding: 0px;
}
That's all.
Related
https://gyazo.com/1440b13007c6e011ec46218ceecabb6a
As you can see by the screenshot, there is a white border around the main content of the page. Ive tried making everything 100% width etc. but nothing seems to work. The nav bar is just a ul and the bottom part is a container div with other child divs heald inside.
The <body> element has a default margin. You need to set it to zero:
body {
margin: 0;
}
try adding css as below:
body, html {
margin: 0;
padding: 0;
}
Please take a look here, on my code. I am trying to make a responsive web page, but there is weird margin from top and bottom of first article column. I am talking about margin between top navigation and content column and between footer and content column, and I just set 10px margin to right column like below.
.content {
width: 69%;
float: left;
margin:0;
padding:0 10px 0 0;
}
I am new to web designing, and I don't know what wrong I am doing here. Please help me
Using
.topcontent{
display: inline-block;
}
should solve your problem.
You're experiencing the way margins collapse together. Set the top-margin on the H2 tag to 0, and the bottom-margin on the last paragraph to 0. Then to restore the white space, add top and bottom padding to the article element.
More info about margin collapse here:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
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.
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; }
I have a footer table which always has to stay at the bottom. In order to achieve this I have made a div with a class wrapper. wrappers height and width are 100%. The footer is not inside the wrapper so it is always at the bottom. By giving the wrapper a margin bottom of -150px I pull the footer up. However when you re size the page it becomes evident that the the table inside wrapper inherited the margin bottom -150px which is strange. If I do set margin bottom 150px for the table it stops working in safari and chrome.
Here is the site: http://canmill.zxq.net
Help is greatly appreciated
There's a few design choices (specifically your wrapping divs) which have contributed to the problem. The code provided on this page should help you correct it: http://www.cssstickyfooter.com/using-sticky-footer-code.html
try
.wrapper {
padding: 0 0 200px 0;
}
.footer {
margin-top: 0px;
background: url(images/bottombg.jpg) repeat-x;
position: fixed;
bottom: 0px;
}