How can I remove the white border on bottom of the browser (google chrome)?
This is the code I have used:
footer {
color: white;
width: 101%;
margin-left: -8px;
background-color: #343434;
margin-left: -16px;
width: 101.5%;
margin-top: -8px;
height: 40px;
z-index: 100;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
<main>
<!--main things-->
</main>
<footer>
<div>
<p>FastCycle werdt gecreëerd door HP-programming vzw. Copyright © 2015</p>
</div>
</footer>
I have try to place the margin-button to set on zero but it didn't help. Also I have place the margin-left to -16px and width to 101.5%? Why?
Can anyone help me?Thanks
You can try adding the following to the <body> tag:
<body style="padding: 0; margin: 0;">
or alternatively, create a new CSS class:
body {
padding: 0;
margin: 0;
}
If that doesn't work, in Chrome, if you press F12, it will bring up a panel that allows you to view the styles of elements. Hover over the elements until you find the one that's creating the whitespace, and remove the padding/margin from it.
Try to add to your css
body{
margin:0;
}
And some cleaning for your css footer
footer {
color: white;
width: 100%;
background-color: #343434;
height: 40px;
z-index: 100;
bottom:0;
}
footer > div {
width: 1000px;
margin: 0 auto;
}
Use this HTML:
<body>
<div id="footer">
<div id="inner">
FastCycle werdt gecreerd door HP-programming vzw. Copyright © 2015
</div>
</div>
</body>
Use this CSS:
body {
margin: 0px;
padding: 0px;
}
#footer {
background-color: #343434;
color: #ffffff;
height: 40px;
margin: 0px;
padding: 0px;
width: 100%;
}
#inner {
margin: 0px 0px 0px -500px;
padding: 0px;
position: relative;
left: 50%;
top: 0px;
width: 1000px;
}
Also, you've set the Width and the Left Margin twice with 2 different values so you might want to clean that up. Regardless my code gives the same result except without the white space. Feel free to add back some of the stuff I've taken out if other elements depend on it.
Related
#page-container {
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
#header {
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
<div id="container">
<div id="header">
<center>
<br>
<a href="index.html">
<img src="images/logo.png">
</a>
</center>
</div>
</div>
Just a quick one, and the solution is probably somewhat obvious and is eluding me, essentially there is a border around my container div for my website, margins, padding and borders are all set to 0 so why the border is still there i have no idea. The background colour fill is on the 'header' div, and from this I can see the evident white lines either side of the div. Any help is appreciated, code below.
CSS:
#page-container
{
position:absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
#header
{
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
HTML:
<div id="container">
<div id="header">
<center>
<br>
<img src="images/logo.png">
</center>
</div>
<REST OF WEBPAGE>
</div>
The <body> element has margin set by default in browsers. Set body { margin:0; } and you shouldn't have margins anymore.
css
body {
margin: 0px;
}
#page-container
{
position:absolute;
margin: 0px;
padding: 0px;
border: 0px;
}
#header
{
background-color: #f9f8e5;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-top: -10px;
padding: 0px;
border: 0px;
width: 100%;
height: 200px;
}
https://jsfiddle.net/ozbkr3sL/
of course you didn't provide full code to the page, but this css should help.
You should set the color and properties you want for the body itself and not just the container. Put in a different color in the background to test it out. From the snippet you posted this is the best I can see. If you had a full link that would've helped.
body{
margin:0;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
color: yellow;
}
After searching for this topic for a while in internet, i came here with no clue. I am writing html pages where i am in a need of sticky footer, that should not change it's position even on browser resize.
What i am suffering now is, when i am changing my browser size, i am getting a horizontal and vertical scroll bar. But my footer is displaying above all the div elements. Here is my code.
HTML,
<!-- Main Content -->
<div class="wrapper">
<div id="welcomeDiv">
<label>Welcome Message</label>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div id="footerDiv">
<h5 class="copyright">© 2013 </h5>
<h5 class="footer_info">Career | Help</h5>
</div>
</div>
CSS:
/* Footer */
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 1580px;
padding: 0;
border: 1px solid #000;
}
div#footerDiv {
font-size: 10px;
color: grey;
text-align: center;
margin: 0 auto;
width: 100%;
}
div#footerDiv h5 {
font-size: 9pt;
font-weight: 300;
}
div#footerDiv h5.copyright {
margin-left: 10px;
float: left;
}
div#footerDiv h5.footer_info {
margin-right: 10px;
float: right;
}
/* Body Content styles */
.wrapper {
min-height: 100%;
height: auto !important;
}
Can some one please help me what's wrong in my code. I dont want to see cssstickyfooter.com anymore.
Thank you,
Add width and height to body and make footer width as 100%
body{
width: 100%;
height:100%;
margin : 0;
}
div#footer {
position: absolute;
bottom: 0;
height: 4em;
clear: both;
width: 100%;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
Fiddle: http://jsfiddle.net/sK9Wu/2/
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
<div id="tervitus">
<h3 id="tere">TERE TULEMAST</h3>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
<footer>©2014 Janno.</footer>
</body>
</html>
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: absolute;
top: 0;
background-color: #000000;
left: 0;
min-width:760px;
}
#navBar ul{
list-style:none;
margin: 0 auto;
}
#navBar li{
float: left;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #F0F0F0;
color: #000000;
text-decoration: none;
}
#logimine{
}
body{
margin: 15px;
padding: 15px;
background-color: #F0F0F0;
min-width: 700px;
}
.content, .artikkel{
max-width: 65%;
margin: 1em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
#tervitus{
background-color: black;
color: white;
font: 18px "open sans", sans-serif;
font-weight: bold;
}
#tere{
margin-left: 5px;
}
#logo{
}
#regnupp{
color: blue; /*miks see valge on muidu*/
}
.uudised{
max-width: 65%;
margin: 4em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
.uudised{
padding-left: 115px;
}
.uudised img{
float: left;
width: 100px;
margin-left: -75px;
}
.uudised p, h2{
margin-left: 50px;
}
.uudised hr{
margin-top: 50px;
margin-bottom: 50px;
}
footer {
text-align: center;
margin: 0 auto -40px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
font-weight:300;
color:#ffffff;
background-color:#000000;
}
If I understand correctly, the <footer>, when using width: 100%; looks like the width of the <body> element, so I tried quite a few things and nothing. This is my first try at a webpage, so is there anything I can do, to have the <footer> use the entirety of the page width, without drastically changing everything?
Make sure that firstly your css is set up properly such as:
body {
margin: 0;
}
then your footer css should be something like this:
.footer {
margin: 0;
width: 100%;
height: 120px;
background-color: red;
}
This should work obvious then your html should be something like:
<html>
<body>
<div class="footer">
</div>
</body>
</html>
Hope this helps!
JsFiddle
I added extra styles to the JSFiddle for presentation and proof, but the code works the same without.
Do this:
HTML
<body>
<footer>Hi</footer>
</body>
CSS
html,body{
width:100%;
height:100%;
marging:0;
}
footer{
height:120px;
width:100%;
position:absolute;
bottom:0;
}
Block level elements
To understand this issue you need to understand about display:block. Block level elements (elements which declare display:block) by default take up the full width of their containing element.
In this case, the footer is, in all newish browsers, a block level element, and so will take up the full width of its container, in this case the body. There is no need to set width:100%;
Older browsers
In older browsers, the newer HTML5 elements, including block, are inline by default, so you need to set them to be block level in your CSS, like so:
footer {
display:block;
}
This is good practice.
Floats
There are several things which can get in the way of this behaviour, notably floats. If you float an element, to the left or right, it will become as narrow as it possibly can, while still enclosing it’s contents. This may or may be your issue here.
Do please post your code.
set footer width to viewport width width: 100vw;, and add the viewport meta tag to your header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
There is a good full width and sticky to bottom (if you need) solution:
<div class="content">
<!-- content here -->
<div class="hfooter">
<!-- For Content not to lay under the Footer -->
</div>
</div>
<div class="footer">
<!-- footer content here -->
</div>
and CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.content {
height: 100%;
}
.hfooter {
height: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
}
Hope it is that what you need)
DEMO here: http://jsfiddle.net/verber/63gbg/11/
I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?
<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
header {
width: 96%;
height: auto;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
section {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
footer {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
h1 {
font-size: 2em;
margin: 1em auto;
}
img {
max-width: 100%;
/* This tells the browser to set the image to the full-width of it's containing element. */
}
.group-icon {
width: 10%;
position: relative;
float: left;
margin: 0 1% 0 0;
}
.group-name {
position: relative;
float: left;
}
</style>
</head>
<body>
<header>
<div class="group-icon">
<img src="images/sailing-icon.png">
</div>
<div class="group-name">
<h1>Pirates in the Bay</h1>
</div>
</header>
<section>
<h2>TEST</h2>
</section>
<section>
<h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>
It's because you've floated elements inside the header (group-name and group-icon).
Try adding overflow: hidden to the header styles. The will 'clear' the floated elements effectively.
See the demo here.
http://jsbin.com/EPelEMA/1/edit
Some more information about the overflow property here: http://css-tricks.com/the-css-overflow-property/
We have to support the last two revisions of IE, Chrome and Firefox and I have a feeling this isn't possible with IE 7/8, but perhaps I'm missing something
I have a footer that is moved up behind a content area by -280px. This content area is moved up over a header area by -230px. As a result I have a blank area at the bottom of my page of approx 320px. I can fill this and make it appear to be the bottom end of the gradient, but I'd really rather just cut it out, so there's no scroll bar to nothing.
In the example code below -
<div id = "page">
<div id = "topbar">
</div>
<div id = "header">
</div>
<div id = "content">
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
body
{
/* background-color: #040e22; */
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px;
position: relative;
}
#topbar
{
height: 60px;
background-color: #112247;
color: white;
position: static;
}
#header
{
background-color: navy;
color: yellow;
height: 240px;
position: relative;
}
#content
{
min-height: 280px;
background-color: green;
width: 480px;
margin: auto;
position: relative;
top: -230px;
z-index: 1;
height: 2000px;
}
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
top: -280px;
position: relative;
}
.inner
{
width: 940px;
margin: auto;
}
how do I get rid of the white under the navy footer?
just change in your #footer from top: -280px to margin-top: -280px voila!
position relative will move the element relatively to its original location but will perserve its space thus rendering empty area, negative margin will move your element including its bounding space and will do what you need.
You can change the footer position from relative to static like so:
#footer
{
/*background: url("footerGradient.png") repeat-x 50% 0%;*/
background-color: navy;
color: white;
text-align: center;
padding-top: 60px;
height: 220px;
bottom: 0px;
width: 100%;
position: fixed;
}
You might want to take a look at this sticky footer page-- you can modify that technique by NOT making the height of the footer and the negative margin of the previous element the same; you would want the negative margin to be greater.